/* === Huella 3D · Panel “Mis Mascotas” — v3.2-compat === */
:root{
  --h3d-bg:#0b0d10;
  --h3d-card:#11161a;
  --h3d-border:rgba(255,255,255,.08);
  --h3d-txt:#e9eef2;
  --h3d-sub:#c5d0d9;
  --h3d-muted:#5f6b76;
  --h3d-brand:#0d8ecf;
  --h3d-accent:#fea985;
  --h3d-danger:#ef4444;
  --h3d-success:#22c55e;
  --h3d-warn:#facc15;
  --h3d-gray:#64748b;
}

/* Contenedor */
.h3d-mis-mascotas{ padding:16px 0; }

/* Header */
.h3d-pets-head{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:16px; margin:0 0 16px;
}
.h3d-header-content h2{ color:#fff; margin:0 0 4px; font-size:clamp(20px,2.8vw,28px); }
.h3d-subtitle{ color:var(--h3d-sub); margin:0; }

/* CTA */
.h3d-cta{ display:flex; gap:10px; flex-wrap:wrap; }
.h3d-cta .button{
  background:var(--h3d-brand); color:#fff; border:none; border-radius:12px;
  padding:10px 14px; font-weight:800; box-shadow:0 6px 16px rgba(13,142,207,.25);
}
.h3d-cta .button:hover{ transform:translateY(-1px); opacity:.94; }

/* Oculta el drawer propio en /my-account/ */
body.woocommerce-account .h3d-drawer-fallback,
body.woocommerce-account .h3d-open-drawer,
body.woocommerce-account .h3d-drawer-overlay{ display:none !important; }

/* Grid de tarjetas */
.h3d-pets-grid{ display:grid; gap:16px; grid-template-columns:repeat(1,minmax(0,1fr)); }
@media(min-width:700px){ .h3d-pets-grid{ grid-template-columns:repeat(2,1fr); } }
@media(min-width:1100px){ .h3d-pets-grid{ grid-template-columns:repeat(3,1fr); } }

/* Tarjeta con borde degradado (técnica background-clip — alta compatibilidad) */
.h3d-card{
  position:relative;
  border:1px solid transparent;
  background:
    linear-gradient(#0f1418,#0f1418) padding-box,
    linear-gradient(135deg, var(--h3d-brand), var(--h3d-accent)) border-box;
  border-radius:16px;
  box-shadow:0 10px 30px rgba(0,0,0,.25);
  overflow:hidden; display:flex; flex-direction:column;
}

.h3d-card-head{ display:flex; gap:14px; padding:14px 14px 0 14px; }

/* Avatar */
.h3d-avatar{
  width:74px; height:74px; border-radius:14px; overflow:hidden; background:#0b0f13;
  border:1px solid var(--h3d-border); display:grid; place-items:center; flex:0 0 auto;
}
.h3d-avatar img{ width:100%; height:100%; object-fit:cover; }
.h3d-avatar-letter{
  color:#11161a; background:var(--h3d-accent); width:100%; height:100%;
  display:grid; place-items:center; font-weight:900; font-size:26px;
}

/* Info breve */
.h3d-pet-info{ flex:1; min-width:0; }
.h3d-pet-info h3{
  color:#fff; margin:0 0 2px; font-size:18px; font-weight:900; text-transform:capitalize;
}
.h3d-meta{ color:var(--h3d-muted); font-size:13px; }

/* Detalles */
.h3d-details{ padding:8px 14px 0 14px; display:grid; gap:6px; }
/* oculta restos antiguos (svgs/imágenes sueltas) */
.h3d-details > :not(.h3d-row){ display:none !important; }

.h3d-row{
  display:grid;
  grid-template-columns:minmax(110px,160px) 1fr; /* etiqueta fija, valor flexible */
  gap:10px; align-items:start;
}
.h3d-label{
  color:#cfe6f3; font-weight:800; display:flex; align-items:center; gap:8px;
}
/* oculta iconos antiguos que vengan en el HTML */
.h3d-label svg, .h3d-label img, .h3d-label i{ display:none !important; }

.h3d-value{
  color:var(--h3d-txt);
  display:block; min-width:0; max-width:100%;
  text-align:left;
  line-height:1.35;
  white-space:normal;        /* permite salto */
  overflow:visible;
  word-break:break-word;     /* rompe palabras largas */
  overflow-wrap:anywhere;    /* por si hay nombres compuestos largos */
  text-transform:capitalize; /* Title Case */
}

/* Iconos por etiqueta (emojis con escapes — seguro en cualquier codificación) */
.h3d-row[data-field="raza"]   .h3d-label::before{ content:"\01F43E"; margin-right:6px; } /* 🐾 */
.h3d-row[data-field="genero"] .h3d-label::before{ content:"\26A5";   margin-right:6px; } /* ⚥ */
.h3d-row[data-field="genero"][data-gender="macho"]  .h3d-label::before{ content:"\2642"; } /* ♂ */
.h3d-row[data-field="genero"][data-gender="hembra"] .h3d-label::before{ content:"\2640"; } /* ♀ */

/* Badge de estado */
.h3d-badge-estado{
  display:inline-flex; align-items:center; gap:6px;
  padding:6px 10px; border-radius:999px; border:1px solid transparent;
  font-weight:900; font-size:12px; letter-spacing:.2px; text-transform:none;
  box-shadow:0 4px 12px rgba(0,0,0,.15);
}
.h3d-estado-normal{           background:rgba(34,197,94,.16);  border-color:rgba(34,197,94,.35);  color:#bbf7d0; }
.h3d-estado-perdida{          background:rgba(239,68,68,.16);  border-color:rgba(239,68,68,.45);  color:#ffdfe1; }
.h3d-estado-fallecida{        background:rgba(148,163,184,.16);border-color:rgba(148,163,184,.45);color:#e2e8f0; }
.h3d-estado-pausa-tratamiento,
.h3d-estado-pausa_tratamiento{background:rgba(250,204,21,.16); border-color:rgba(250,204,21,.45); color:#fff3c4; }

/* Acciones — grilla compacta */
.h3d-actions{
  margin-top:12px !important;
  padding:12px 14px 14px;
  display:grid; gap:10px;
  grid-template-columns:repeat(3,minmax(0,1fr));
}
@media(max-width:980px){ .h3d-actions{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:480px){ .h3d-actions{ grid-template-columns:1fr; } }

.h3d-actions .button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:12px 12px; font-weight:900; border-radius:12px; border:1px solid transparent;
  box-shadow:0 6px 16px rgba(0,0,0,.25); text-decoration:none;
}

/* Colores por acción (si no tienes clases, aplica por orden) */
.h3d-actions .h3d-btn-edit,
.h3d-actions .button:nth-child(1){ background:var(--h3d-brand);  color:#fff; }
.h3d-actions .h3d-btn-view,
.h3d-actions .button:nth-child(2){ background:var(--h3d-accent); color:#11161a; }
.h3d-actions .h3d-btn-transfer,
.h3d-actions .button:nth-child(3){ background:var(--h3d-gray);   color:#fff; }
.h3d-actions .h3d-btn-delete,
.h3d-actions .button:last-child{   background:var(--h3d-danger); color:#fff; }

/* Emojis en botones y ocultar SVG internos (si los hubiera) */
.h3d-actions .button svg{ display:none !important; }
.h3d-actions .h3d-btn-edit::before,
.h3d-actions .button:nth-child(1)::before{ content:"\270F"; }  /* ✏ */
.h3d-actions .h3d-btn-view::before,
.h3d-actions .button:nth-child(2)::before{ content:"\01F441"; }/* 👁 */
.h3d-actions .h3d-btn-transfer::before,
.h3d-actions .button:nth-child(3)::before{ content:"\01F501"; }/* 🔁 */
.h3d-actions .h3d-btn-delete::before,
.h3d-actions .button:last-child::before{ content:"\01F5D1"; } /* 🗑 */

.h3d-actions .button:hover{ transform:translateY(-1px); opacity:.96; }

/* Estado vacío */
.h3d-empty-state{
  background:#0f1418; border:1px solid var(--h3d-border); border-radius:16px;
  padding:28px; text-align:center; color:var(--h3d-sub);
}
.h3d-empty-state h3{ color:#fff; margin:0 0 8px; }

/* Responsive extras */
@media(max-width:640px){
  .h3d-pets-head{ flex-direction:column; align-items:stretch; }
  .h3d-cta .button{ width:100%; text-align:center; }
}


/* === PATCH: botones verticales + más padding izquierdo === */

/* 1) Botonera siempre 1 por fila */
.h3d-mis-mascotas .h3d-actions{
  grid-template-columns: 1fr !important;
  margin-top: 10px !important;
}
.h3d-mis-mascotas .h3d-actions .button{
  width:100%; text-align:center;
}

/* 2) Más “aire” en la zona de Raza/Género */
.h3d-mis-mascotas .h3d-card-head{ padding:16px 16px 0 18px !important; }
.h3d-mis-mascotas .h3d-details{   padding:10px 18px 0 18px !important; }

/* 3) Columna de etiqueta un poco más ancha para que no “salte” */
.h3d-mis-mascotas .h3d-row{
  grid-template-columns: minmax(120px, 180px) 1fr !important;
}

/* === PATCH v3.3 — Detalles centrados + iconos de género con color === */

/* 1) Centrar y limitar ancho del bloque de detalles para evitar “vacío” */
.h3d-mis-mascotas .h3d-details{
  max-width: 420px;                 /* límite cómodo en desktop */
  width: 100%;
  margin: 8px auto 0;               /* centrado horizontal */
  padding-left: 18px !important;    /* aire contra el borde izq. */
  padding-right: 18px !important;
}

/* 2) Rejilla de 2 columnas estable (etiqueta fija, valor flexible) */
.h3d-mis-mascotas .h3d-row{
  display: grid !important;
  grid-template-columns: 120px 1fr !important;  /* <— clave */
  column-gap: 12px !important;
  align-items: start;
}
.h3d-mis-mascotas .h3d-label{
  color:#cfe6f3; font-weight:800; display:flex; align-items:center; gap:8px;
}
.h3d-mis-mascotas .h3d-value{
  color:var(--h3d-txt);
  text-align: left !important;
  white-space: normal !important;
  word-break: break-word !important;
  overflow-wrap: anywhere !important;
  text-transform: capitalize;
}

/* 3) Icono de Raza (emoji, como antes) */
.h3d-mis-mascotas .h3d-row[data-field="raza"] .h3d-label::before{
  content:"🐾"; margin-right:6px;
}

/* 4) Iconos de GÉNERO con color (círculo) */
.h3d-mis-mascotas .h3d-row[data-field="genero"] .h3d-label::before{
  content:""; width:18px; height:18px; border-radius:999px;
  display:inline-grid; place-items:center; font-size:12px; font-weight:900;
  color:#fff; margin-right:6px; line-height:1;
  box-shadow:0 2px 6px rgba(0,0,0,.25);
}
/* Macho: círculo azul con símbolo ♂ */
.h3d-mis-mascotas .h3d-row[data-field="genero"][data-gender="macho"] .h3d-label::before{
  background:#3b82f6; content:"\2642";   /* ♂ */
}
/* Hembra: círculo rosa con símbolo ♀ */
.h3d-mis-mascotas .h3d-row[data-field="genero"][data-gender="hembra"] .h3d-label::before{
  background:#ec4899; content:"\2640";   /* ♀ */
}
/* Valor “no especificado”: círculo gris con guion */
.h3d-mis-mascotas .h3d-row[data-field="genero"]:not([data-gender]) .h3d-label::before,
.h3d-mis-mascotas .h3d-row[data-field="genero"][data-gender=""] .h3d-label::before{
  background:#64748b; content:"–";
}

/* 5) Oculta iconos antiguos que pudieran venir en el HTML */
.h3d-mis-mascotas .h3d-label svg,
.h3d-mis-mascotas .h3d-label img,
.h3d-mis-mascotas .h3d-label i{ display:none !important; }

/* === PATCH: más aire a la izquierda en Raza/Género === */
.h3d-mis-mascotas .h3d-details{
  padding-left: 28px !important;   /* antes 18px */
  padding-right: 20px !important;
}

.h3d-mis-mascotas .h3d-row{
  grid-template-columns: 130px 1fr !important;  /* etiqueta un poco más ancha */
  padding-left: 6px !important;                  /* micro sangría */
}

/* separa un pelín los iconos de la orilla */
.h3d-mis-mascotas .h3d-row[data-field="raza"]   .h3d-label::before,
.h3d-mis-mascotas .h3d-row[data-field="genero"] .h3d-label::before{
  margin-left: 2px;
}