/* =========================================================
   petmx-design.css — Sistema de diseño PetMX
   - Mobile-first
   - Accesible (contrastes, focus)
   - Compatible con Bootstrap 5 (no pisa variables BS)
   ========================================================= */

/* =========================
   Tokens (custom properties)
   ========================= */
:root{
  /* Colores base (PetMX) */
  --pmx-blue: #1570EF;         /* Azul principal */
  --pmx-blue-600:#155AEF;
  --pmx-blue-700:#0F4CCF;
  --pmx-ink: #0B1727;          /* Títulos */
  --pmx-text:#2B3645;          /* Texto base */
  --pmx-muted:#6B7A90;         /* Texto secundario */
  --pmx-bg:#F6F9FF;            /* Fondo página suave */
  --pmx-card:#FFFFFF;          /* Tarjetas */
  --pmx-border:#E5EAF2;        /* Bordes sutiles */
  --pmx-success:#22C55E;
  --pmx-warning:#F59E0B;
  --pmx-danger:#EF4444;
  --pmx-info:#06B6D4;

  /* Gradientes */
  --pmx-grad-hero: linear-gradient(180deg,#F2F7FF 0%, #FFFFFF 70%);
  --pmx-grad-badge: linear-gradient(90deg,#E6F0FF, #F2F9FF);

  /* Sombras y radios */
  --pmx-shadow-sm: 0 1px 2px rgba(16,24,40,.06);
  --pmx-shadow-md: 0 8px 24px rgba(16,24,40,.12);
  --pmx-radius-sm: 10px;
  --pmx-radius-md: 16px;
  --pmx-radius-lg: 20px;
  --pmx-radius-xl: 24px;
}

/* ===== Resets suaves / tipografía ===== */
html,body{height:100%;}
body{
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Apple Color Emoji","Segoe UI Emoji";
  color: var(--pmx-text);
  background: var(--pmx-bg);
  line-height: 1.45;
}
h1,h2,h3{ color: var(--pmx-ink); }
a{ color: var(--pmx-blue); text-decoration: none; }
a:hover{ text-decoration: underline; }

/* ===== Inputs base ===== */
.pmx-input{
  appearance:none; width:100%;
  border:1px solid var(--pmx-border); border-radius:12px;
  background:#fff; color:var(--pmx-text);
  padding:10px 12px; font:inherit; line-height:1.2;
}
.pmx-input:focus{ outline:3px solid rgba(21,112,239,.25); border-color:var(--pmx-blue); }
.pmx-input::placeholder{ color:#9AA7BD; }

/* ===== Barra azul oficial ===== */
.pmx-topbar{
  position: sticky; top:0; z-index: 1000;
  background: var(--pmx-blue);
  color:#fff;
  box-shadow: var(--pmx-shadow-sm);
}
.pmx-topbar .pmx-container{
  display:flex; align-items:center; gap:12px;
  padding: 12px 16px;
}
.pmx-logo{ width:24px; height:24px; border-radius:6px; background:#fff; display:inline-block; }
.pmx-title{ font-weight:700; letter-spacing:.2px; }
.pmx-sub{ opacity:.9; font-size:.92rem; }

/* ===== Contenedores ===== */
.pmx-page{ padding: 16px; }
@media (min-width: 992px){ .pmx-page{ padding: 28px; } }

.pmx-hero{
  position:relative;
  background: var(--pmx-grad-hero);
  border:1px solid var(--pmx-border);
  border-radius: var(--pmx-radius-xl);
  padding: 18px;
  box-shadow: var(--pmx-shadow-sm);
}
@media (min-width: 768px){
  .pmx-hero{ padding: 24px 28px; }
}
.pmx-hero-row{ display:flex; gap:16px; align-items:center; flex-wrap:wrap; }
.pmx-avatar{
  width:86px; height:86px; border-radius: 22px; overflow:hidden; background:#EFF4FF;
  box-shadow: var(--pmx-shadow-sm); flex: 0 0 auto;
}
.pmx-avatar img{ width:100%; height:100%; object-fit: cover; }
.pmx-hero-meta{ display:flex; flex-direction:column; gap:6px; }
.pmx-hero-name{ font-size: clamp(20px, 3vw, 28px); font-weight:800; }
.pmx-hero-sub{ color: var(--pmx-muted); }
.pmx-hero-badge{
  display:inline-flex; align-items:center; gap:8px;
  background: var(--pmx-grad-badge);
  padding: 6px 10px; border-radius: 999px; font-weight: 600; font-size: .90rem; color:#0F2B57;
}

/* === NUEVO: switcher multi-mascota en el hero === */
.pmx-hero-switch{ position:absolute; right:14px; top:10px; }
.pmx-chip--selector{ font-weight:700; padding:6px 10px; }

/* ===== Botones ===== */
.pmx-actions{ display:flex; gap:10px; flex-wrap:wrap; margin-top: 16px; }
.pmx-btn{
  --_bg: #fff; --_fg: var(--pmx-blue); --_bd: var(--pmx-blue);
  background: var(--_bg); color: var(--_fg);
  border:1.5px solid var(--_bd);
  padding: 10px 14px; border-radius: 999px;
  font-weight: 700; letter-spacing:.2px;
  transition: .18s ease;
}
.pmx-btn:hover{ transform: translateY(-1px); box-shadow: var(--pmx-shadow-sm); text-decoration:none; }
.pmx-btn:focus-visible{ outline:3px solid rgba(21,112,239,.35); outline-offset: 2px; }

.pmx-btn--primary{ --_bg: var(--pmx-blue); --_fg:#fff; }
.pmx-btn--danger{ --_bg:#fff; --_fg:var(--pmx-danger); --_bd: var(--pmx-danger); }
.pmx-btn--ghost{ --_bg:#fff; --_fg:var(--pmx-text); --_bd: var(--pmx-border); }

/* === NUEVO: botón WhatsApp verde técnico === */
.pmx-btn--whatsapp{
  background:#25D366; border-color:#25D366; color:#fff !important;
  display:inline-flex; align-items:center; gap:6px;
  line-height:1; padding:.55rem .9rem; border-radius:999px;
}
.pmx-btn--whatsapp:hover{ filter:brightness(.95); text-decoration:none; }

.pmx-btn-group{ display:flex; flex-wrap:wrap; gap:10px; }
.pmx-btn-twin{ display:flex; border:1.5px solid var(--pmx-blue); border-radius: 999px; overflow:hidden; }
.pmx-btn-twin .pmx-btn{ border:0; border-radius:0; }
.pmx-btn-twin .pmx-btn:first-child{ border-right:1.5px solid var(--pmx-blue); }

/* ===== Chips de estado ===== */
.pmx-chips{ display:flex; flex-wrap:wrap; gap:8px; margin-top: 14px; }
.pmx-chip{
  display:inline-flex; align-items:center; gap:8px;
  background:#fff; border:1px solid var(--pmx-border);
  border-radius:999px; padding:8px 12px; font-weight:600;
  box-shadow: var(--pmx-shadow-sm);
}
.pmx-chip--ok{ color: var(--pmx-success); }
.pmx-chip--warn{ color: var(--pmx-warning); }
.pmx-chip--no{ color: var(--pmx-danger); }
.pmx-chip--grad{ background: linear-gradient(180deg, #FFFFFF 0%, #F8FBFF 100%); }
.pmx-chip--ghost{ background:#fff; color:var(--pmx-text); border-color:var(--pmx-border); }

/* ===== Tarjetas (cards) ===== */
.pmx-grid{ display:grid; gap:12px; margin-top: 16px; }
@media (min-width: 768px){
  .pmx-grid.cols-2{ grid-template-columns: 1fr 1fr; }
  .pmx-grid.cols-3{ grid-template-columns: repeat(3,1fr); }
}
.pmx-card{
  background: var(--pmx-card);
  border: 1px solid var(--pmx-border);
  border-radius: var(--pmx-radius-lg);
  box-shadow: var(--pmx-shadow-sm);
  padding: 16px;
}
.pmx-card h3{ font-size: 1.05rem; margin:0 0 10px; font-weight:800; }

/* ===== Sidebar de Atajos ===== */
.pmx-layout{ display:grid; gap:16px; margin-top: 16px; }
@media (min-width: 992px){
  .pmx-layout{ grid-template-columns: 2fr 1fr; align-items:start; }
}
.pmx-shortcut{
  display:flex; align-items:center; justify-content:space-between;
  padding:12px 10px; border-radius: 14px; border:1px solid var(--pmx-border);
  background:#fff; transition:.15s ease; font-weight:700;
}
.pmx-shortcut + .pmx-shortcut{ margin-top:8px; }
.pmx-shortcut:hover{ transform: translateY(-1px); box-shadow: var(--pmx-shadow-sm); text-decoration:none; }

/* ===== Footer emotivo ===== */
.pmx-footer{ text-align:center; color: var(--pmx-muted); padding: 28px 10px; }

/* ===== Overlay / Modal ===== */
.pmx-overlay{
  position: fixed; inset:0; background: rgba(9,21,43,.42);
  display:none; align-items: center; justify-content: center;
  padding: 16px; z-index: 1200;
}
.pmx-overlay[aria-hidden="false"]{ display:flex; }
.pmx-sheet{
  width: 100%; max-width: 560px; background:#fff; border-radius: 20px;
  border:1px solid var(--pmx-border); box-shadow: var(--pmx-shadow-md);
  padding: 18px;
}
.pmx-sheet h2{ font-size:1.25rem; font-weight: 800; margin-bottom:8px; }
.pmx-sheet p{ color: var(--pmx-text); margin-bottom: 12px; }
.pmx-sheet .pmx-actions{ margin-top: 12px; }

/* ===== Utilidades ===== */
.pmx-muted{ color: var(--pmx-muted); }
.pmx-kv{ display:grid; grid-template-columns: 1fr; gap:8px; }
.pmx-kv .kv{
  display:flex; justify-content: space-between; gap:10px;
  border-bottom:1px dashed var(--pmx-border); padding:6px 0;
}
.pmx-kv .kv span{ color:var(--pmx-muted); }
.pmx-kv .kv strong{ color:var(--pmx-ink); }
@media (min-width: 576px){ .pmx-kv{ grid-template-columns: repeat(2,1fr); } }
.pmx-badge{ display:inline-block; padding:2px 10px; border-radius:999px; border:1px solid var(--pmx-border); font-weight:700; }
.pmx-badge--beta{ background:#FFF6E6; color:#8A4A00; border-color:#FFE1A6; }

/* ===== Parche de degradados suaves ===== */
.pmx-hero--soft{ background: linear-gradient(180deg, #F2F7FF 0%, #FFFFFF 75%); }
.pmx-card--soft{
  background:
    radial-gradient(120% 120% at 0% 0%, #F7FAFF 0%, rgba(247,250,255,0) 60%),
    #FFFFFF;
}

/* === NUEVO: Lista del selector (buscable) === */
.pmx-list .pmx-list-item{
  display:grid; grid-template-columns:1fr auto auto; gap:10px;
  align-items:center; padding:10px 12px; border-radius:12px;
  border:1px solid #eef1f6; margin-bottom:8px; background:#fff;
}
.pmx-list .pmx-list-item .name{ font-weight:700; color:var(--pmx-ink); }
.pmx-list .pmx-list-item .meta{ font-size:12px; color:var(--pmx-muted); }
.pmx-list .pmx-list-item .arrow{ opacity:.45; }
.pmx-list .pmx-list-item:hover{ border-color:#d7e3ff; background:#f7fbff; text-decoration:none; }
.pmx-list .pmx-list-item.is-active{ border-color:#155EEF33; background:#EEF4FF; }

/* === NUEVO: Tabla “Notas rápidas” en pares legibles con color === */
.pmx-facts{ display:grid; gap:8px; }
.pmx-facts .row{
  display:grid; grid-template-columns: 1fr auto 1fr auto; gap:12px;
  align-items:center; padding:10px 12px;
  border:1px solid var(--pmx-border); border-radius:14px;
  background: linear-gradient(180deg,#fff 0%,#f8fbff 100%);
}
@media (max-width: 640px){ .pmx-facts .row{ grid-template-columns: 1fr auto; } }
.pmx-facts .k{ color:#1f2937; font-weight:700; }
.pmx-facts .v{
  font-weight:800; padding:4px 10px; border-radius:999px; border:1px solid transparent;
}
.pmx-facts .v.yes{ color:#166534; background:#ECFDF3; border-color:#BBF7D0; } /* verde */
.pmx-facts .v.no { color:#991B1B; background:#FEF2F2; border-color:#FECACA; } /* rojo */

/* Botones auth visibles también en móvil */
.topbar .auth-actions { display:flex !important; gap:8px; align-items:center; }
.topbar .auth-actions .btn-auth { display:inline-flex !important; }

/* Ajustes responsive para que quepan sin romper el layout */
@media (max-width: 640px){
  .topbar { position:sticky; top:0; z-index: 120; } /* por si el overlay o algún absolute los tapa */
  .topbar .brand { flex:1 1 auto; min-width:0; }    /* que el logo/frase no empuje a los botones fuera */
  .topbar .nu-phrase { display:none; }              /* opcional: esconder la frase en XS si no cabe */
  .topbar .auth-actions .btn-auth { 
    padding:6px 10px; 
    font-size:14px; 
    line-height:1.1; 
  }
}

/* Evitar recortes por overflow en contenedores */
.topbar, .topbar > .container { overflow:visible; }


/* === Fin === */