:root{
    --bg:#FFFBF3;
    --surface:#FFFFFF;
    --surface-2:#EAF3F2;
    --ink:#11676A;
    --ink-soft:#666666;
    --ink-faint:#69829E;
    --brand:#F39620;
    --brand-strong:#7E4208;
    --brand-soft:#FDEFD6;
    --teal:#3E938E;
    --teal-strong:#11676A;
    --teal-soft:#E1EEED;
    --accent:#FBBB54;
    --accent-ink:#3C2800;
    --alert:#F39620;
    --alert-soft:#FCE3BE;
    --violet:#7E4208;
    --violet-soft:#F1E4D3;
    --rose:#B8447A;
    --rose-soft:#F7E2EC;
    --line:rgba(17,103,106,0.16);
    --shadow:rgba(243,150,32,0.28);
    --frame:#3C2800;
  }
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#1B1206;
      --surface:#241A0C;
      --surface-2:#2F2310;
      --ink:#FBEFE0;
      --ink-soft:#C9BBA8;
      --ink-faint:#8FA6B8;
      --brand:#FBBB54;
      --brand-strong:#F39620;
      --brand-soft:#4A340F;
      --teal:#69ACA7;
      --teal-strong:#A9D6D1;
      --teal-soft:#193634;
      --accent:#FBBB54;
      --accent-ink:#3C2800;
      --alert:#FBBB54;
      --alert-soft:#4A3410;
      --violet:#C99A5B;
      --violet-soft:#3A2A12;
      --rose:#E293BC;
      --rose-soft:#3A1D2A;
      --line:rgba(251,239,224,0.14);
      --shadow:rgba(0,0,0,0.6);
      --frame:#120B04;
    }
  }
  :root[data-theme="dark"]{
    --bg:#1B1206;
    --surface:#241A0C;
    --surface-2:#2F2310;
    --ink:#FBEFE0;
    --ink-soft:#C9BBA8;
    --ink-faint:#8FA6B8;
    --brand:#FBBB54;
    --brand-strong:#F39620;
    --brand-soft:#4A340F;
    --teal:#69ACA7;
    --teal-strong:#A9D6D1;
    --teal-soft:#193634;
    --accent:#FBBB54;
    --accent-ink:#3C2800;
    --alert:#FBBB54;
    --alert-soft:#4A3410;
    --violet:#C99A5B;
    --violet-soft:#3A2A12;
    --rose:#E293BC;
    --rose-soft:#3A1D2A;
    --line:rgba(237,239,242,0.14);
    --shadow:rgba(0,0,0,0.6);
    --frame:#0A1420;
  }

  *{box-sizing:border-box;}
  body{
    background:var(--bg);
    color:var(--ink);
    font-family:"Poppins",system-ui,sans-serif;
    min-height:100vh;
  }
  h1,h2,h3,.display{
    font-family:"Poppins",system-ui,sans-serif;
    font-weight:700;
    text-wrap:balance;
    margin:0;
  }
  h1{ font-family:"Chewy","Poppins",cursive; font-weight:400; letter-spacing:.02em; }
  .editorial{ font-family:Georgia,"Times New Roman",serif; font-style:italic; }
  .mono{ font-family:"JetBrains Mono",ui-monospace,monospace; font-variant-numeric:tabular-nums; }
  button{ font-family:inherit; }

  /* ---------- Page shell (desktop context) ---------- */
  .page{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:48px;
    padding:56px 24px;
    max-width:1000px;
    margin:0 auto;
    overflow:hidden;
  }
  .blob{
    position:absolute;
    border-radius:50%;
    filter:blur(60px);
    opacity:.35;
    z-index:0;
    pointer-events:none;
  }
  .blob1{ width:380px;height:380px; background:var(--brand); top:-120px; left:-100px; }
  .blob2{ width:320px;height:320px; background:var(--teal); bottom:-100px; right:-80px; }
  .blob3{ width:260px;height:260px; background:var(--accent); top:40%; left:38%; opacity:.22; }

  .intro{
    position:relative; z-index:1;
    max-width:340px;
    display:flex;
    flex-direction:column;
    gap:14px;
  }
  .eyebrow{
    display:inline-flex;
    align-items:center;
    gap:8px;
    width:fit-content;
    font-size:12.5px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:#fff;
    background:linear-gradient(120deg, var(--brand), var(--violet));
    padding:7px 13px;
    border-radius:99px;
  }
  .intro h1{ font-size:36px; font-weight:700; color:var(--ink); }
  .intro p{ margin:0; color:var(--ink-soft); font-size:15px; line-height:1.55; }
  .howto{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:6px;
    padding-top:16px;
    border-top:2px dashed var(--line);
  }
  .howto-step{
    display:flex;
    gap:12px;
    align-items:flex-start;
    font-size:13.5px;
    color:var(--ink-soft);
    line-height:1.5;
  }
  .howto-num{
    flex:none;
    width:24px;height:24px;
    border-radius:8px;
    background:var(--violet-soft);
    color:var(--violet);
    display:flex;align-items:center;justify-content:center;
    font-size:12px;font-weight:700;
    font-family:"Poppins",sans-serif;
  }
  .howto-step b{ color:var(--ink); }
  .linkrow{
    display:flex;
    gap:8px;
    align-items:center;
    margin-top:4px;
  }
  .linkbox{
    flex:1;
    font-size:12.5px;
    color:var(--ink-soft);
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:9px 11px;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }
  .copybtn{
    flex:none;
    border:none;
    background:var(--brand);
    color:#fff;
    font-weight:700;
    font-size:12.5px;
    padding:10px 14px;
    border-radius:10px;
    cursor:pointer;
    box-shadow:0 8px 18px -8px var(--shadow);
  }
  .copybtn:active{ transform:translateY(1px); }
  .copybtn[data-copied="true"]{ background:var(--teal); }

  /* ---------- Phone frame ---------- */
  .phone-wrap{
    position:relative;
    z-index:1;
    flex:none;
  }
  .phone-glow{
    position:absolute;
    inset:-50px;
    background:conic-gradient(from 120deg, var(--brand), var(--accent), var(--teal), var(--violet), var(--brand));
    filter:blur(50px);
    opacity:.35;
    z-index:0;
    border-radius:60px;
  }
  .phone{
    position:relative;
    z-index:1;
    width:360px;
    height:740px;
    background:var(--frame);
    border-radius:46px;
    padding:14px;
    box-shadow:0 30px 60px -20px rgba(27,15,43,0.45), 0 2px 0 rgba(255,255,255,0.06) inset;
  }
  .screen{
    position:relative;
    width:100%;
    height:100%;
    background:var(--bg);
    border-radius:32px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
  }
  .notch{
    position:absolute;
    top:0; left:50%; transform:translateX(-50%);
    width:120px; height:22px;
    background:var(--frame);
    border-radius:0 0 16px 16px;
    z-index:5;
  }
  .statusbar{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:14px 24px 4px;
    font-size:12px;
    font-weight:600;
    color:var(--ink);
    flex:none;
  }

  .app-content{
    flex:1;
    overflow-y:auto;
    padding:14px 18px 10px;
    display:flex;
    flex-direction:column;
    gap:16px;
  }
  .app-content::-webkit-scrollbar{ display:none; }

  .splash-screen{
    position:absolute; inset:0; z-index:200; border-radius:inherit;
    display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
    background:
      radial-gradient(280px 280px at 50% 34%, rgba(255,255,255,.4), rgba(255,255,255,0) 68%),
      linear-gradient(160deg, var(--accent), var(--brand) 55%, var(--brand-strong));
    color:#fff; text-align:center; padding:32px; cursor:pointer;
    transition:opacity .45s ease, visibility .45s ease;
  }
  .splash-screen.hide{ opacity:0; visibility:hidden; pointer-events:none; }
  .splash-mark{
    width:158px;
    filter:drop-shadow(0 16px 22px rgba(60,40,0,.35));
    margin-bottom:2px;
  }
  .splash-mark img{ width:100%; height:auto; display:block; }
  .splash-title{ font-family:"Chewy","Poppins",cursive; font-size:32px; letter-spacing:.02em; line-height:1.05; text-transform:uppercase; text-shadow:0 2px 10px rgba(0,0,0,.18); }
  .splash-sub{ font-family:"Poppins",sans-serif; font-weight:600; font-size:12.5px; letter-spacing:.16em; text-transform:uppercase; opacity:.95; margin-bottom:6px; }
  .splash-progress-track{
    width:150px; height:5px; border-radius:99px;
    background:rgba(255,255,255,.3);
    overflow:hidden;
  }
  .splash-progress-bar{
    height:100%; width:0%; border-radius:99px;
    background:#fff;
    transition:width 2.5s cubic-bezier(.4,0,.2,1);
  }
  .splash-progress-label{
    font-family:"Poppins",sans-serif; font-size:10.5px; font-weight:600;
    letter-spacing:.06em; text-transform:uppercase; opacity:.85; margin-top:8px;
  }
  .splash-tap{
    position:absolute; bottom:26px; left:0; right:0;
    font-family:"Poppins",sans-serif; font-size:11px; font-weight:600; opacity:.75;
    animation:splashPulse 1.6s ease-in-out infinite;
  }
  @keyframes splashPulse{ 0%,100%{opacity:.45;} 50%{opacity:.9;} }
  @media (prefers-reduced-motion: reduce){
    .splash-tap{ animation:none; }
  }

  .tabpanel[hidden]{ display:none; }

  .topbar{
    display:flex;
    align-items:center;
    justify-content:space-between;
  }
  .greet{ display:flex; flex-direction:column; gap:2px; }
  /* display:flex de arriba le gana en cascada al [hidden] del navegador
     (mismo motivo que .tabpanel[hidden] más arriba) — arreglo defensivo para
     que ocultar #greetBox en Club/Perfil (ver cambiarTab() en app.js)
     funcione de verdad. */
  .greet[hidden]{ display:none; }
  .greet .hi{ font-size:12.5px; color:var(--ink-faint); font-weight:500; }
  .greet h2{ font-size:21px; font-weight:600; }
  .avatar{
    width:40px;height:40px;border-radius:13px;
    background:linear-gradient(135deg, var(--brand-soft), var(--violet-soft));
    display:flex;align-items:center;justify-content:center;
  }

  /* status card */
  .status-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:22px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:12px;
    transition:background .3s ease, border-color .3s ease;
    box-shadow:0 14px 30px -20px var(--shadow);
  }
  .status-card[data-state="lost"]{
    background:var(--alert-soft);
    border-color:color-mix(in srgb, var(--alert) 40%, var(--line));
  }
  .status-top{ display:flex; align-items:center; justify-content:space-between; }
  .dog-id{ display:flex; align-items:center; gap:10px; }
  .dog-avatar{
    width:46px;height:46px;border-radius:15px;
    background:linear-gradient(135deg, var(--teal-soft), var(--brand-soft));
    display:flex;align-items:center;justify-content:center;
    flex:none;
  }
  .status-card[data-state="lost"] .dog-avatar{ background:var(--alert-soft); }
  .dog-name{ font-weight:700; font-size:15.5px; font-family:"Poppins",sans-serif; }
  .dog-sub{ font-size:12px; color:var(--ink-soft); }
  .pill{
    display:inline-flex; align-items:center; gap:6px;
    font-size:11.5px; font-weight:700; letter-spacing:.02em;
    padding:5px 11px; border-radius:99px;
    background:var(--teal-soft); color:var(--teal-strong);
  }
  .pill .dot{ width:7px;height:7px;border-radius:99px; background:var(--teal-strong); }
  .status-card[data-state="lost"] .pill{ background:var(--alert-soft); color:var(--alert); }
  .status-card[data-state="lost"] .pill .dot{ background:var(--alert); animation:pulse 1.1s ease-in-out infinite; }
  @keyframes pulse{ 0%,100%{opacity:1;} 50%{opacity:.35;} }

  .map{
    position:relative;
    height:150px;
    border-radius:16px;
    overflow:hidden;
    background:var(--surface-2);
  }
  .map svg{ width:100%; height:100%; display:block; }
  .map-badge{
    position:absolute; left:10px; bottom:10px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:10px;
    padding:6px 9px;
    font-size:10.5px;
    color:var(--ink-soft);
  }
  .map-badge .mono{ color:var(--ink); }

  .vecinos-alertados-badge{
    display:flex; align-items:center; gap:8px;
    background:var(--teal-soft); color:var(--teal-strong);
    border-radius:14px; padding:10px 14px; font-size:13px; font-weight:600;
    margin-bottom:10px;
  }

  .meta-row{ display:flex; gap:18px; }
  .meta-item{ display:flex; flex-direction:column; gap:2px; }
  .meta-item .label{ font-size:10.5px; color:var(--ink-faint); text-transform:uppercase; letter-spacing:.05em; }
  .meta-item .val{ font-size:13px; font-weight:600; }

  .cta{
    border:none;
    border-radius:16px;
    padding:14px;
    font-weight:700;
    font-size:14.5px;
    cursor:pointer;
    text-align:center;
    font-family:"Poppins",sans-serif;
    letter-spacing:.01em;
  }
  .cta.danger{ background:var(--alert); color:#fff; box-shadow:0 10px 22px -10px var(--alert); }
  .cta.safe{ background:var(--teal); color:#fff; box-shadow:0 10px 22px -10px var(--teal); }
  .cta:active{ transform:translateY(1px); }

  .banner{
    display:flex;
    gap:10px;
    align-items:flex-start;
    background:var(--alert-soft);
    border:1px solid color-mix(in srgb, var(--alert) 35%, var(--line));
    border-radius:16px;
    padding:12px;
    font-size:12.5px;
    color:var(--ink);
    line-height:1.45;
  }
  .banner b{ display:block; margin-bottom:2px; }
  .banner[hidden]{ display:none; }
  .banner.safe{ background:var(--teal-soft); border-color:color-mix(in srgb, var(--teal) 35%, var(--line)); }
  .banner.neutral{ background:var(--violet-soft); border-color:color-mix(in srgb, var(--violet) 35%, var(--line)); }
  .btn-outline.alert-text{ color:var(--alert); border-color:color-mix(in srgb, var(--alert) 55%, var(--line)); }

  .promo-banner{
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(120deg, var(--brand), var(--violet));
    color:#fff;
    border-radius:16px;
    padding:12px 14px;
    font-size:12.5px;
    line-height:1.4;
  }
  .promo-banner b{ font-family:"Poppins",sans-serif; display:block; font-size:13.5px; }

  .section-label{
    font-size:12px; font-weight:700; text-transform:uppercase;
    letter-spacing:.05em; color:var(--ink-faint);
    margin-top:2px;
  }

  /* alerts list */
  .alert-item{
    display:flex; gap:11px; align-items:flex-start;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
  }
  .alert-avatar{
    width:52px;height:52px;border-radius:15px;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-size:20px; overflow:hidden; background:var(--surface-2);
  }
  .alert-avatar img{ width:100%; height:100%; object-fit:cover; }
  .alert-item.mine{ border-color:color-mix(in srgb, var(--alert) 40%, var(--line)); }
  .alert-btn{
    flex:none; align-self:center; border:none; background:var(--teal); color:#fff;
    font-weight:700; font-size:11px; padding:9px 11px; border-radius:11px;
    cursor:pointer; font-family:"Poppins",sans-serif;
  }
  .alert-body{ flex:1; display:flex; flex-direction:column; gap:3px; min-width:0; }
  .alert-title{ font-size:13.5px; font-weight:700; }
  .alert-datos{ font-size:12px; color:var(--ink-soft); }
  .alert-traits-row{ display:flex; flex-wrap:wrap; gap:5px; margin:1px 0; }
  .alert-desc{ font-size:12px; color:var(--ink-soft); line-height:1.4; }
  .alert-foot{ display:flex; gap:8px; align-items:center; margin-top:2px; flex-wrap:wrap; }
  .chip{
    font-size:10.5px; font-weight:700; padding:3px 9px; border-radius:99px;
    background:var(--surface-2); color:var(--ink-soft);
  }
  .chip.found{ background:var(--teal-soft); color:var(--teal-strong); }
  .chip.lost{ background:var(--alert-soft); color:var(--alert); }
  /* "Búsqueda con prioridad" (beneficio Manada Premium, ver perkPrioridad en
     Club) — chip que marca la tarjeta en el feed de Alertas cuando el dueño
     tiene ese plan. Ver renderAlertItem() en app.js. */
  .chip.urgente{ background:var(--violet-soft); color:var(--violet); }

  /* Cartelito fijo con el total histórico de perros encontrados (ver
     #encontradosTotal en index.html y contarPerrosEncontrados() en db.js) —
     no se pliega, siempre visible mientras el total sea mayor a cero. */
  .encontrados-total{
    margin-top:14px; padding:11px 14px;
    background:var(--teal-soft); color:var(--teal-strong);
    border-radius:14px; font-family:"Poppins",sans-serif;
    font-size:12.5px; font-weight:700; text-align:center;
  }

  /* Cartelito fijo con el total de vecinos registrados (ver #vecinosTotal en
     index.html) — mismo look que .encontrados-total, pero en violeta para
     distinguirlo de un vistazo (y porque solo lo ve Marcelo, ver comentario
     en index.html). */
  .vecinos-total{
    margin:0 0 14px; padding:11px 14px;
    background:var(--violet-soft); color:var(--violet);
    border-radius:14px; font-family:"Poppins",sans-serif;
    font-size:12.5px; font-weight:700; text-align:center;
  }

  /* Tip del día (ver #tipDelDiaCard en index.html y actualizarTipDelDia() en
     app.js) — en --accent (dorado) para distinguirlo de un vistazo del resto
     de los cartelitos (violeta = vecinos, teal = encontrados). */
  .tip-del-dia{
    display:flex; align-items:flex-start; gap:10px;
    margin:0 0 14px; padding:12px 14px;
    background:var(--accent); color:var(--accent-ink);
    border-radius:14px;
  }
  /* El ícono es el perro de HuellaSegura (icons/icon-192.png) con el emoji de
     categoría (ver ICONO_CATEGORIA_TIP en app.js — 🎓/🩺/💡 según el tip del
     día) como insignia sobre la esquina — mismo patrón que un badge de
     notificación sobre un avatar, para que se lea como UN ícono y no como
     dos elementos flotando por separado (antes el emoji quedaba suelto
     arriba del perro; ajuste pedido por Marcelo el 27/09, la primera
     versión — perro chico + emoji flotando — no le cerró). */
  .tip-del-dia-icono{
    position:relative; flex-shrink:0;
    width:30px; height:30px; margin-top:1px;
  }
  .tip-del-dia-perro{ width:30px; height:30px; border-radius:9px; display:block; }
  .tip-del-dia-emoji{
    position:absolute; bottom:-4px; right:-4px;
    width:16px; height:16px; border-radius:50%;
    background:var(--surface);
    box-shadow:0 0 0 2px var(--accent);
    display:flex; align-items:center; justify-content:center;
    font-size:10px; line-height:1;
  }
  .tip-del-dia-texto{
    margin:0; font-family:"Poppins",sans-serif;
    font-size:13px; font-weight:600; line-height:1.4;
    flex:1;
  }
  /* Botón "Compartir" del tip — mismo patrón visual que la insignia del ícono
     de arriba (círculo con --surface + aro de color) para que se sienta parte
     del mismo cartelito. Genera una imagen (ver btnTipCompartir en app.js,
     #printAreaTip/.tip-print-view más abajo) y reutiliza el modal de vista
     previa que ya usa "Compartir flyer". */
  .tip-del-dia-compartir{
    flex-shrink:0; width:26px; height:26px; margin-top:1px;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface); border:none; border-radius:50%;
    box-shadow:0 0 0 2px var(--accent);
    font-size:12px; line-height:1; padding:0; cursor:pointer;
  }
  .tip-del-dia-compartir:active{ transform:scale(0.92); }

  /* Cartelito de cumpleaños (#cumpleañosCard) y de clima (#climaCard) — mismo
     patrón visual que el tip del día (.tip-del-dia), pero con su propio color
     para distinguirse de un vistazo: rosa para cumpleaños, teal para clima.
     Ver actualizarCumpleañosCard() / actualizarClimaCard() en app.js. */
  .cumpleanos-card{
    background:var(--rose-soft); color:var(--rose);
  }
  .cumpleanos-card .tip-del-dia-emoji{ box-shadow:0 0 0 2px var(--rose); }
  .clima-card{
    background:var(--teal-soft); color:var(--teal-strong);
  }
  .clima-card .tip-del-dia-emoji{ box-shadow:0 0 0 2px var(--teal); }

  /* Desplegable "🐾 Perros encontrados" debajo del feed de alertas activas
     (ver #encontradosLista en index.html y toggleEncontrados() en app.js). */
  .encontrados-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; margin-top:14px; padding:11px 14px;
    background:var(--teal-soft); color:var(--teal-strong);
    border:none; border-radius:14px; font-family:"Poppins",sans-serif;
    font-size:12.5px; font-weight:700; cursor:pointer;
  }
  .encontrados-chevron{ transition:transform .2s ease; }
  .encontrados-toggle[aria-expanded="true"] .encontrados-chevron{ transform:rotate(180deg); }
  /* max-height + scroll para que la lista no estire toda la pantalla cuando
     hay muchos perros encontrados — a partir de 3-4 tarjetas ya se scrollea
     ADENTRO del cuadro, en vez de empujar el resto de la pestaña hacia abajo. */
  .encontrados-lista{ margin-top:10px; max-height:420px; overflow-y:auto; padding-right:2px; }
  .encontrados-lista .alert-item{ opacity:.9; }

  /* Directorio de servicios (modal #directorioOverlay, ver renderDirectorio()
     en app.js) — un desplegable por rubro, mismo look que .encontrados-toggle
     de arriba, pero puede haber varios abiertos/cerrados a la vez (cada uno
     tiene su propio aria-expanded, no comparten estado). */
  .directorio-lista{ display:flex; flex-direction:column; gap:10px; }
  .directorio-lista .cargando{ text-align:center; color:var(--ink-soft); font-size:13px; padding:16px 0; }
  .directorio-rubro-toggle{
    display:flex; align-items:center; justify-content:space-between;
    width:100%; padding:11px 14px;
    background:var(--teal-soft); color:var(--teal-strong);
    border:none; border-radius:14px; font-family:"Poppins",sans-serif;
    font-size:13px; font-weight:700; cursor:pointer;
  }
  .directorio-rubro-chevron{ transition:transform .2s ease; }
  .directorio-rubro-toggle[aria-expanded="true"] .directorio-rubro-chevron{ transform:rotate(180deg); }
  .directorio-rubro-lista{ margin-top:8px; display:flex; flex-direction:column; gap:8px; }
  .directorio-item{
    padding:10px 12px; border:1px solid var(--line); border-radius:12px;
    font-size:12.5px; line-height:1.45;
  }
  .directorio-item b{ display:block; font-size:13.5px; }
  .directorio-item a{ color:var(--teal-strong); text-decoration:none; font-weight:700; }
  /* Entrada paga/destacada — mismo trato visual que el resto de la app le da
     a lo pago (fondo brand-soft), así el negocio que paga por aparecer acá
     se nota de un vistazo, sin gritar. */
  .directorio-item.destacado{ background:var(--brand-soft); border-color:var(--brand); }
  .directorio-item .badge-destacado{ display:block; font-size:10.5px; font-weight:700; color:var(--brand-strong); margin-bottom:2px; }
  /* Rubros sin entradas todavía (guardería, paseadores, peluquería...) — el
     "Próximamente" queda ahí a propósito como gancho para que un alumno de
     EduCanis que tenga ese negocio se ofrezca a aparecer (ver charla con
     Marcelo del 24/09), en vez de ocultar el rubro entero. */
  .directorio-proximamente{
    padding:12px 14px; border-radius:14px; background:var(--surface-2);
    border:1px dashed var(--line); font-size:12px; color:var(--ink-soft); text-align:center;
  }
  /* Botón de texto para acciones destructivas chicas (ver "Eliminar" en la
     agenda de salud) — no es un botón grande como .cta.danger, solo un link. */
  .link-danger{
    background:none; border:none; padding:0; cursor:pointer;
    color:var(--alert); font-size:11.5px; font-weight:700; text-decoration:underline;
  }

  /* club (banners de plan: colores originales, no la paleta EduCanis) */
  .member-card{
    position:relative;
    background:linear-gradient(135deg, #8155E8, #FF5A46);
    color:#fff;
    border-radius:20px;
    padding:16px;
    display:flex;
    flex-direction:column;
    gap:10px;
    overflow:hidden;
  }
  .member-card::after{
    content:"";
    position:absolute; right:-30px; top:-40px;
    width:140px;height:140px;border-radius:50%;
    background:rgba(255,255,255,0.14);
  }
  .member-top{ display:flex; justify-content:space-between; align-items:flex-start; position:relative; }
  .member-plan{ font-size:11px; opacity:.85; letter-spacing:.04em; text-transform:uppercase; font-weight:700; }
  .member-name{ font-family:"Poppins",sans-serif; font-size:20px; font-weight:600; margin-top:2px; }
  .member-code{ font-size:11px; opacity:.8; }
  .ribbon{
    position:relative;
    background:#FFC933;
    color:#4A3400;
    font-size:10.5px;
    font-weight:700;
    padding:4px 10px;
    border-radius:99px;
  }

  .perk{
    display:flex; align-items:center; gap:12px;
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:18px;
    padding:12px;
  }
  .perk-mark{
    width:44px;height:44px;border-radius:14px;flex:none;
    display:flex;align-items:center;justify-content:center;
    font-family:"Poppins",sans-serif;
    font-weight:600; font-size:12px;
    line-height:1.1;
    text-align:center;
  }
  .perk-body{ flex:1; display:flex; flex-direction:column; gap:2px; min-width:0; }
  .perk-title{ font-size:13.5px; font-weight:700; }
  .perk-desc{ font-size:11.5px; color:var(--ink-soft); }
  .perk-extra{ font-size:10.5px; color:var(--teal-strong); font-weight:700; margin-top:1px; }
  .perk-cta{ font-size:10.5px; font-weight:700; color:var(--brand-strong); margin-top:2px; }

  /* #clubIncluidos/#clubBloqueados: contenedores donde renderClub() (app.js)
     reubica los .perk de #clubPerksSource según el plan — ver comentario
     largo en index.html, sección Club. */
  #clubIncluidos, #clubBloqueados{ display:flex; flex-direction:column; gap:9px; }
  .allset{
    display:flex; align-items:center; gap:12px; background:var(--teal-soft); color:var(--teal-strong);
    border-radius:16px; padding:14px; font-size:12.5px; font-weight:600; line-height:1.5; margin-top:2px;
  }
  .allset-big{ font-size:22px; flex:none; }
  /* display:flex arriba le gana en cascada al [hidden] del navegador (misma
     especificidad, la regla de acá pesa más por venir después) — sin esto,
     $("clubAllSet").hidden = true no lo ocultaría de verdad. Mismo patrón
     defensivo que .tabpanel[hidden]/.banner[hidden] más arriba en este archivo. */
  .allset[hidden]{ display:none; }

  /* Botón "Visitar tienda de EduCanis": único .btn-outline con ícono, por
     eso el flex/gap va en una clase aparte y no en .btn-outline (que usan
     muchos otros botones de solo texto en toda la app). */
  .btn-tienda{
    margin-top:10px; width:100%; box-sizing:border-box; display:flex; align-items:center;
    justify-content:center; gap:8px; text-decoration:none;
  }
  .btn-tienda img{ height:20px; width:20px; object-fit:contain; border-radius:5px; flex:none; }
  .perk-off-wrap{ position:relative; flex:none; width:52px; height:52px; display:flex; align-items:center; justify-content:center; }
  .perk-off-wrap svg{ position:absolute; inset:0; width:100%; height:100%; }
  .perk-off{ position:relative; font-family:"Poppins",sans-serif; font-weight:600; font-size:11.5px; color:var(--accent-ink); text-align:center; line-height:1.05; }

  /* profile */
  .profile-head{ display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center; padding:6px 0 2px; }
  .profile-avatar{ width:78px;height:78px;border-radius:24px; background:linear-gradient(135deg, var(--teal-soft), var(--brand-soft)); display:flex; align-items:center; justify-content:center; }
  .profile-head h2{ font-size:20px; }
  /* Input que reemplaza al <h2> del nombre mientras se edita (ver
     bloquearPerfil()/desbloquearPerfil() en app.js, rediseño del 27/09) —
     mismo tamaño/peso que el h2 para que no salte el layout al tocar
     "Editar". Reemplaza la vieja regla de h2[contenteditable], que nunca
     llegó a usarse desde JS. */
  .profile-head .perfil-nombre-input{
    font-size:20px; font-weight:700; text-align:center;
    border:none; border-bottom:1px dashed var(--line); background:none;
    color:var(--ink); font-family:inherit; outline:none;
    padding:2px 4px; width:100%; max-width:240px;
  }
  .profile-head .perfil-nombre-input:focus{ border-bottom-color:var(--brand); }
  .profile-head .dog-sub{ font-size:12.5px; }

  .field-list{ display:flex; flex-direction:column; gap:1px; background:var(--line); border-radius:16px; overflow:hidden; }
  .field{
    background:var(--surface);
    display:flex; justify-content:space-between; align-items:center;
    padding:11px 13px;
    gap:10px;
  }
  .field .label{ font-size:12.5px; color:var(--ink-soft); flex:none; }
  .field .value{
    font-size:13px; font-weight:600; text-align:right;
    border:none; background:none; color:var(--ink); font-family:inherit;
    outline:none; border-bottom:1px dashed transparent;
    min-width:0;
  }
  .field .value:focus{ border-bottom-color:var(--brand); }

  .qr-card{
    display:flex; align-items:center; gap:14px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:18px; padding:13px;
  }
  .qr-box{ flex:none; width:64px;height:64px; border-radius:10px; overflow:hidden; background:#fff; padding:5px; }
  .qr-box svg{ width:100%; height:100%; }
  .qr-text{ display:flex; flex-direction:column; gap:2px; }
  .qr-text .t{ font-size:13px; font-weight:700; }
  .qr-text .s{ font-size:11.5px; color:var(--ink-soft); }

  .geo-card{
    display:flex; flex-direction:column; gap:10px;
    background:var(--surface); border:1px solid var(--line);
    border-radius:18px; padding:13px;
  }
  .geo-top{ display:flex; align-items:center; gap:12px; }
  .geo-icon{ flex:none; width:40px;height:40px;border-radius:12px; background:var(--teal-soft); display:flex; align-items:center; justify-content:center; font-size:19px; }
  .geo-body{ display:flex; flex-direction:column; gap:2px; }
  .geo-body .t{ font-size:13px; font-weight:700; }
  .geo-body .s{ font-size:11.5px; color:var(--ink-soft); }
  #geoRadiusSlider{ width:100%; accent-color:var(--teal-strong); }

  .caution-toggle{ display:flex; align-items:flex-start; gap:9px; font-size:12.5px; color:var(--ink-soft); cursor:pointer; padding:2px 0; line-height:1.4; }
  .caution-toggle input[type="checkbox"]{ margin-top:2px; width:16px; height:16px; accent-color:var(--alert); flex:none; }
  .caution-note-box{ margin-top:2px; }
  .caution-note-box textarea{ min-height:58px; resize:vertical; }
  .chip.caution{ background:var(--accent); color:var(--accent-ink); }

  /* photo picker */
  .profile-avatar{ overflow:hidden; cursor:pointer; }
  .profile-avatar img{ width:100%; height:100%; object-fit:cover; }
  .photo-picker{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .photo-preview{
    width:78px;height:78px;border-radius:24px; flex:none; overflow:hidden;
    background:linear-gradient(135deg, var(--teal-soft), var(--brand-soft));
    display:flex; align-items:center; justify-content:center;
  }
  .photo-preview img{ width:100%; height:100%; object-fit:cover; }
  .photo-preview.small{ width:52px;height:52px;border-radius:16px; cursor:pointer; }
  .photo-preview.small svg{ width:22px;height:22px; }
  .photo-picker .field-actions{ width:100%; }
  .avatar-photos-row{ display:flex; align-items:flex-end; gap:10px; justify-content:center; }
  .avatar-photos-row .photo-preview.small{ margin-bottom:2px; }

  .photo-slot{ position:relative; flex:none; }
  .photo-slot .profile-avatar, .photo-slot .photo-preview{ cursor:pointer; }
  .photo-edit-badge{
    position:absolute; right:-4px; bottom:-4px; z-index:2;
    width:26px;height:26px;border-radius:50%; border:2px solid var(--surface);
    background:var(--brand); color:#fff; font-size:12px;
    display:flex; align-items:center; justify-content:center;
    cursor:pointer; box-shadow:0 4px 10px -4px var(--shadow);
  }
  .photo-edit-badge.small{ width:20px;height:20px; font-size:9.5px; right:-3px; bottom:-3px; }

  /* Elegir avatar de perfil (modal "Foto de perfil") */
  .avatar-picker-label{ font-size:12.5px; color:var(--ink-soft); font-weight:600; margin-bottom:8px; }
  .avatar-picker-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
  .avatar-picker-btn{
    aspect-ratio:1/1; border-radius:16px; border:2px solid var(--line); background:var(--surface-2);
    padding:6px; cursor:pointer; display:flex; align-items:center; justify-content:center;
    transition:border-color .15s ease, transform .1s ease;
  }
  .avatar-picker-btn img{ width:100%; height:100%; object-fit:contain; }
  .avatar-picker-btn:active{ transform:scale(.94); }
  .avatar-picker-btn.selected{ border-color:var(--brand); background:var(--brand-soft); }

  /* Beneficio de plan Manada dentro de "Editar datos del perro" */
  .plan-tag{
    display:inline-block; margin-left:6px; font-size:10.5px; font-weight:700;
    background:var(--teal-soft); color:var(--teal-strong); border-radius:99px; padding:2px 8px;
  }
  .plan-promo-nota{
    font-size:12.5px; color:var(--ink-soft); background:var(--surface-2);
    border-radius:14px; padding:10px 12px; line-height:1.4;
  }

  /* lightbox */
  .lightbox-photo-box{
    width:100%; aspect-ratio:1/1; max-height:280px; border-radius:20px; overflow:hidden;
    background:linear-gradient(135deg, var(--teal-soft), var(--brand-soft));
    display:flex; align-items:center; justify-content:center;
  }
  .lightbox-photo-box img{ width:100%; height:100%; object-fit:cover; }
  .lightbox-thumbs{ display:flex; gap:8px; justify-content:center; }
  .lightbox-thumbs[hidden]{ display:none; }
  .lightbox-thumb{
    width:52px;height:52px;border-radius:14px; overflow:hidden; cursor:pointer;
    border:2px solid transparent; background:var(--surface-2); padding:0;
  }
  .lightbox-thumb img{ width:100%; height:100%; object-fit:cover; }
  .lightbox-thumb.active{ border-color:var(--brand); }
  .trait-tags{ display:flex; flex-wrap:wrap; gap:6px; }

  /* flyer — cartel de "perro perdido" pensado para imprimirse a página
     completa en A4 (ver @page en el bloque @media print, más abajo): estos
     elementos están siempre `hidden` en pantalla y solo se ven en el diálogo
     de impresión, así que los tamaños de acá abajo están pensados para el
     papel, no para el celular. 1mm ≈ 3.78px a 96dpi, que es la conversión que
     usan los navegadores tanto en pantalla como al imprimir/exportar a PDF —
     por eso podemos calcular los tamaños en base a cuánto papel A4 queremos
     que ocupen sin tener que meter una media query aparte. */
  .cta.outline{ background:none; color:var(--alert); border:1.5px solid var(--alert); box-shadow:none; }

  /* Contenedor base compartido por el cartel de "perdido" (.flyer-lost) y la
     tarjeta de QR del collar (.collar-print-view) — cada uno pone su propio
     borde/radio/tamaño más abajo, esto es solo el centrado + fondo blanco
     fijo (el flyer siempre se imprime en blanco, nunca en el fondo oscuro
     del modo oscuro del celular).
     position:fixed + left:-9999px lo mantiene RENDERIZADO (necesario para
     poder imprimirlo o capturarlo como imagen para compartir) pero fuera de
     la pantalla mientras se usa la app normalmente — btnFlyerImprimir/
     btnFlyerCompartir en app.js le sacan el atributo "hidden" justo antes de
     imprimir o generar la imagen, y si no lo sacáramos también de acá,
     aparecería un flash del cartel tapando la app por una fracción de
     segundo. El bloque @media print de más abajo lo vuelve a poner en el
     flujo normal (position:static) para que ocupe la hoja como corresponde. */
  .flyer-print-view{
    display:flex; flex-direction:column; align-items:center;
    max-width:480px; background:#fff; overflow:hidden;
    position:fixed; left:-9999px; top:0;
  }

  /* ---------- Cartel de "perdido": diseño "alta visibilidad" ----------
     Elegimos esta versión, entre 3 variantes, específicamente porque es la
     que mejor aguanta una impresión/fotocopia en blanco y negro (que es lo
     más probable si alguien lo imprime en una impresora casera o lo
     fotocopia para pegar varias copias): casi todo el cartel es blanco y
     negro puro, con bordes y texto bien gruesos — el color de marca queda
     solo como un detalle chico al pie, no hace falta para que se entienda.
     Además, evitamos fondos negros grandes (comíamos mucha tinta si alguien
     imprime 10 copias) y concentramos el ÚNICO bloque de tinta sólida en el
     recuadro del teléfono, que es lo primero que tiene que ver quien lo lee
     de lejos. #171310 es un "negro cálido" (no #000 puro) para que combine
     con el resto de la paleta de marca en vez de verse genérico. */
  .flyer-lost{ width:100%; border:7px solid #171310; }
  .flyer-band{
    width:100%; text-align:center; padding:16px 10px 13px;
    border-bottom:4px solid #171310;
  }
  .flyer-band-text{
    font-family:"Poppins",sans-serif; font-weight:800; font-size:44px;
    letter-spacing:.02em; color:#171310;
  }
  /* Cuadrada (antes era una franja panorámica de 230px de alto): las fotos
     de perro en la app siempre se suben ya recortadas cuadradas (ver el
     recorte en app.js), así que una caja panorámica obligaba a
     object-fit:cover a descartar casi toda la foto (dejaba solo una franja
     angosta del medio) — con la caja cuadrada, la foto entra completa, sin
     recortar nada, y de paso queda bien grande. */
  .flyer-photo{
    width:100%; aspect-ratio:1/1; overflow:hidden;
    background:var(--brand-soft);
    display:flex; align-items:center; justify-content:center;
    border-bottom:4px solid #171310;
  }
  .flyer-photo img{ width:100%; height:100%; object-fit:cover; }
  /* Respaldo cuando no hay foto del perro (o no se pudo cargar): antes era
     el emoji 🐾 como texto — pero html2canvas (la librería que convierte el
     cartel en imagen para compartir, ver completarFlyerPerdido() en app.js)
     no dibuja bien los emoji a color, y salía achatado/deforme en la imagen
     final. Un PNG normal (el mismo perrito del ícono de la app) se captura
     siempre igual, sin sorpresas. object-fit:contain para que nunca se
     estire — a diferencia de la foto real de arriba, que sí usa cover. */
  .flyer-photo .flyer-photo-fallback{ width:auto; height:62%; object-fit:contain; }
  .flyer-body{
    width:100%; padding:18px 24px 24px; display:flex; flex-direction:column;
    align-items:center; gap:11px;
  }
  .flyer-name{
    font-family:"Poppins",sans-serif; font-weight:800; font-size:42px;
    letter-spacing:.01em; text-transform:uppercase; color:#171310; text-align:center; line-height:1;
  }
  .flyer-sub{
    font-size:14.5px; font-weight:700; letter-spacing:.03em; text-transform:uppercase;
    color:#4d4d4d; text-align:center;
  }
  /* Datos físicos + seña particular + fecha, todo en un solo párrafo (antes
     eran 3 bloques sueltos: chips, fecha y un recuadro de "seña particular")
     — así el cartel se lee más de corrido, como un afiche clásico de
     "se busca", y la seña particular se destaca con un resaltado en negro
     sólido en vez de un recuadro entero de color (menos tinta). */
  .flyer-facts{ font-size:16px; font-weight:600; color:#171310; text-align:center; line-height:1.5; padding:0 4px; }
  .flyer-facts b{ background:#171310; color:#fff; padding:0 6px; border-radius:3px; font-weight:700; }
  /* El teléfono y el QR ahora van en la misma fila (antes el QR iba solo,
     debajo, ocupando una franja entera de ~150px de ancho x su caption) —
     así se gana ese espacio vertical para la foto (que ahora es cuadrada y
     necesita más alto). El QR sigue sirviendo para lo mismo (escanear y
     llamar directo), solo que más chico. */
  .flyer-phone-row{ margin-top:2px; width:100%; display:flex; align-items:stretch; gap:10px; }
  .flyer-phone{ flex:1; min-width:0; background:#171310; border-radius:8px; padding:10px 14px; display:flex; flex-direction:column; justify-content:center; gap:2px; text-align:center; }
  .flyer-phone-label{ font-size:11px; font-weight:800; letter-spacing:.05em; color:#fff; }
  .flyer-phone-num{ font-family:"Poppins",sans-serif; font-weight:800; font-size:30px; color:#fff; line-height:1.15; }
  .flyer-brand{ font-family:"Poppins",sans-serif; font-weight:700; font-size:15px; color:var(--teal-strong); margin-top:2px; display:flex; align-items:center; gap:6px; }
  .flyer-qr{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:5px; flex:none; }
  .flyer-qr-img{ width:92px; height:92px; border:2px solid #171310; border-radius:10px; background:#fff; padding:5px; }
  .flyer-qr-caption{ font-size:12.5px; color:#4d4d4d; text-align:center; max-width:280px; line-height:1.35; }
  .brand-logo{ width:16px; height:16px; object-fit:contain; }

  /* QR del collar: comparte el contenedor base de arriba (.flyer-print-view)
     pero es una tarjeta chica y prolija (pensada para recortar y guardar
     junto al collar), no un cartel de alerta — por eso NO usa .flyer-lost:
     tiene su propio borde redondeado en teal, sin la lógica de "ahorro de
     tinta" (una sola tarjeta, no se imprimen 10 copias de esta). */
  .collar-print-view{
    border:4px solid var(--teal); border-radius:32px;
    padding:22px 20px 18px; gap:10px;
  }
  .collar-print-view .flyer-name{
    font-family:"Poppins",sans-serif; font-weight:700; text-transform:none; letter-spacing:normal;
    font-size:26px; color:#11676A;
  }
  .collar-print-view .flyer-sub{
    font-size:15px; font-weight:400; text-transform:none; letter-spacing:normal; color:#666666;
  }
  .collar-print-view .flyer-qr-img{ width:220px; height:220px; border:none; border-radius:18px; box-shadow:0 10px 24px -10px var(--shadow); }
  .collar-print-view .flyer-brand{ font-size:14px; }

  /* Tip del día compartible: comparte el contenedor base (.flyer-print-view)
     y el mismo criterio "tarjeta prolija" del QR del collar de arriba — no la
     versión "alta visibilidad" del cartel de perdido, que es para pegar en la
     calle. Ver #printAreaTip en index.html y btnTipCompartir en app.js. */
  .tip-print-view{
    border:4px solid var(--teal); border-radius:32px;
    padding:26px 24px 20px; gap:14px;
  }
  .tip-print-icono{ position:relative; width:60px; height:60px; }
  .tip-print-perro{ width:60px; height:60px; border-radius:18px; display:block; }
  .tip-print-emoji{
    position:absolute; bottom:-6px; right:-6px;
    width:30px; height:30px; border-radius:50%;
    background:var(--surface);
    box-shadow:0 0 0 3px var(--teal);
    display:flex; align-items:center; justify-content:center;
    font-size:18px; line-height:1;
  }
  .tip-print-texto{
    margin:0; font-family:"Poppins",sans-serif; font-weight:700;
    font-size:20px; line-height:1.4; text-align:center; color:#11676A;
  }
  .tip-print-view .flyer-brand{ font-size:14px; }

  /* bottom nav */
  .tabbar{
    flex:none;
    display:flex;
    border-top:1px solid var(--line);
    background:var(--surface);
    padding:8px 6px calc(8px + env(safe-area-inset-bottom,0px));
  }
  .tab{
    flex:1;
    display:flex; flex-direction:column; align-items:center; gap:5px;
    background:none; border:none; cursor:pointer;
    padding:6px 2px;
    color:var(--ink-faint);
  }
  .tab svg{ width:27px;height:27px; }
  .tab span{ font-size:11.5px; font-weight:700; }
  .tab[aria-selected="true"]{ color:var(--brand); }

  /* ---------- Real mobile: drop the frame, go full-bleed ---------- */
  @media (max-width:640px){
    .page{ padding:0; gap:0; display:block; max-width:none; }
    .intro{ display:none; }
    .blob{ display:none; }
    .phone-wrap{ width:100%; }
    .phone-glow{ display:none; }
    .phone{
      width:100%; height:100dvh; border-radius:0; padding:0; box-shadow:none;
    }
    .screen{ border-radius:0; height:100dvh; }
    .notch{ display:none; }
    .statusbar{ padding-top:calc(14px + env(safe-area-inset-top,0px)); }
  }

  @media (prefers-reduced-motion: reduce){
    .status-card[data-state="lost"] .pill .dot{ animation:none; }
  }

  /* ---------- Modals (Encuentro Seguro / QR / Chapita) ---------- */
  .modal-overlay{
    position:absolute; inset:0;
    background:rgba(20,10,30,0.55);
    display:flex; align-items:flex-end; justify-content:center;
    z-index:50; opacity:0; pointer-events:none; transition:opacity .2s ease;
  }
  .modal-overlay.open{ opacity:1; pointer-events:auto; }
  .modal-panel{
    position:relative; width:100%; max-height:90%; overflow-y:auto;
    background:var(--surface); border-radius:24px 24px 0 0;
    padding:18px 18px calc(18px + env(safe-area-inset-bottom,0px));
    transform:translateY(16px); transition:transform .2s ease;
    display:flex; flex-direction:column; gap:13px;
  }
  .modal-overlay.open .modal-panel{ transform:translateY(0); }
  .modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:10px; }
  .modal-head h3{ font-size:16.5px; }
  .modal-head p{ margin:4px 0 0; font-size:12px; color:var(--ink-soft); line-height:1.4; }
  .modal-x{ flex:none; width:30px;height:30px;border-radius:10px; border:none; background:var(--surface-2); color:var(--ink-soft); font-size:14px; cursor:pointer; }

  /* Confirmación genérica (#confirmOverlay, ver confirmarAccion() en
     app.js) — mismo .modal-panel de arriba, pero sin .modal-head: solo un
     párrafo y los dos botones de .reauth-actions. */
  .confirm-texto{ margin:6px 0 2px; font-size:14.5px; line-height:1.5; color:var(--ink); }

  /* Anuncio interstitial de novedades (#anuncioOverlay, ver
     ANUNCIO_ACTUAL_ID en app.js) — mismo mecanismo de apertura/cierre que
     .modal-panel (desliza desde abajo), pero con look de "festejo" propio:
     degradé en vez de fondo blanco, texto centrado. */
  .anuncio-panel{
    position:relative; width:100%; overflow-y:auto;
    background:linear-gradient(135deg, #8155E8, #FF5A46); color:#fff;
    border-radius:24px 24px 0 0;
    padding:30px 22px calc(30px + env(safe-area-inset-bottom,0px));
    transform:translateY(16px); transition:transform .2s ease;
    display:flex; flex-direction:column; align-items:center; gap:10px; text-align:center;
  }
  .modal-overlay.open .anuncio-panel{ transform:translateY(0); }
  .anuncio-panel .modal-x{ position:absolute; top:14px; right:14px; background:rgba(255,255,255,.22); color:#fff; }
  .anuncio-emoji{ font-size:42px; line-height:1; }
  .anuncio-panel h3{ margin:4px 0 0; font-size:19px; }
  .anuncio-panel p{ margin:0; font-size:13.5px; line-height:1.5; opacity:.95; }
  .anuncio-panel .cta{ background:#fff; color:#7E4208; margin-top:8px; width:100%; }

  /* ---------- Ampliar foto (lightbox) ----------
     Mismo truco de posicionamiento que .modal-overlay (absolute+inset:0
     dentro de .screen, que en mobile real ocupa el 100dvh) pero sin el
     .modal-panel: acá la foto ocupa toda la pantalla, centrada, respetando
     su proporción original (object-fit:contain, nunca la recorta). */
  /* Cualquier foto de perro clickeable (avatar de inicio, tarjeta de alerta,
     etc.) — ver htmlAvatarPerro()/wireLightboxFoto() en app.js. */
  .avatar-clickable{ cursor:pointer; }

  .lightbox-overlay{
    position:absolute; inset:0;
    background:rgba(10,6,16,0.92);
    display:flex; align-items:center; justify-content:center;
    z-index:60; opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .lightbox-overlay.open{ opacity:1; pointer-events:auto; }
  .lightbox-img{
    max-width:92%; max-height:92%; object-fit:contain;
    border-radius:14px;
    box-shadow:0 20px 50px -15px rgba(0,0,0,0.6);
  }
  .lightbox-x{
    position:absolute; top:calc(14px + env(safe-area-inset-top,0px)); right:14px;
    width:36px; height:36px; border-radius:12px; border:none;
    background:rgba(255,255,255,0.14); color:#fff; font-size:16px; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }

  .verify-step{ display:flex; gap:11px; align-items:flex-start; }
  .verify-mark{ flex:none; width:32px;height:32px;border-radius:11px; display:flex;align-items:center;justify-content:center; font-size:14px; background:var(--teal-soft); }
  .verify-body{ flex:1; display:flex; flex-direction:column; gap:2px; }
  .verify-title{ font-size:12.5px; font-weight:700; }
  .verify-desc{ font-size:11px; color:var(--ink-soft); line-height:1.4; }

  .verify-photo-card{ display:flex; flex-direction:column; gap:6px; }
  .verify-photo-box{
    width:100%; height:170px; border-radius:16px;
    background:linear-gradient(135deg, var(--surface-2), var(--teal-soft));
    display:flex; align-items:center; justify-content:center; font-size:64px;
  }
  .verify-photo-caption{ font-size:11px; color:var(--ink-soft); text-align:center; line-height:1.4; }

  .trust-row{ display:flex; align-items:center; gap:10px; background:var(--surface-2); border-radius:14px; padding:10px 12px; }
  .trust-avatar{ width:34px;height:34px;border-radius:50%; background:var(--violet-soft); display:flex;align-items:center;justify-content:center; font-weight:700; font-size:11px; color:var(--violet); font-family:"Poppins",sans-serif; flex:none; }
  .trust-name{ font-size:12.5px; font-weight:700; }
  .trust-meta{ font-size:11px; color:var(--ink-soft); }

  .safe-point{ display:flex; align-items:center; gap:10px; border:1.5px solid var(--line); border-radius:14px; padding:10px 12px; cursor:pointer; margin-top:7px; }
  .safe-point.selected{ border-color:var(--brand); background:var(--brand-soft); }
  .safe-point .radio{ width:17px;height:17px;border-radius:50%; border:2px solid var(--ink-faint); flex:none; }
  .safe-point.selected .radio{ border-color:var(--brand); background:radial-gradient(circle, var(--brand) 40%, transparent 42%); }
  .safe-point-body{ flex:1; }
  .safe-point-title{ font-size:12.5px; font-weight:700; }
  .safe-point-desc{ font-size:11px; color:var(--ink-soft); }

  .hint-box{ background:var(--accent); color:var(--accent-ink); border-radius:14px; padding:11px 13px; font-size:12px; line-height:1.4; }
  .hint-box b{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:2px; }

  .trait-row{ display:flex; flex-wrap:wrap; gap:8px; }
  .trait-chip{ border:1.5px solid var(--line); background:var(--surface); color:var(--ink-soft); border-radius:99px; padding:8px 13px; font-size:12px; font-weight:600; cursor:pointer; font-family:"Poppins",sans-serif; }
  .trait-chip.on{ border-color:var(--brand); background:var(--brand-soft); color:var(--brand-strong); }

  /* Agenda de salud: cada tipo de registro (vacuna, desparasitación, celo…)
     prende con SU PROPIO color al elegirlo — a pedido de Marcelo, para que
     se note de un vistazo que sí cambió de tipo y no quede la duda de "no
     pasó nada" al tocar otro chip (ver cargarRegistrosSalud/actualizarCamposSalud
     en app.js, que además cambia las etiquetas del formulario). */
  #saludTipoRow .trait-chip.on[data-valor="vacuna"]{ border-color:var(--teal-strong); background:var(--teal-soft); color:var(--teal-strong); }
  #saludTipoRow .trait-chip.on[data-valor="desparasitacion_interna"]{ border-color:var(--violet); background:var(--violet-soft); color:var(--violet); }
  #saludTipoRow .trait-chip.on[data-valor="desparasitacion_externa"]{ border-color:var(--brand-strong); background:var(--brand-soft); color:var(--brand-strong); }
  #saludTipoRow .trait-chip.on[data-valor="celo"]{ border-color:var(--rose); background:var(--rose-soft); color:var(--rose); }
  #saludTipoRow .trait-chip.on[data-valor="otro"]{ border-color:var(--ink-faint); background:var(--surface-2); color:var(--ink-soft); }

  .custom-trait-input{ width:100%; border:1.5px solid var(--line); border-radius:12px; padding:9px 12px; font-size:12.5px; font-family:inherit; color:var(--ink); background:var(--surface); outline:none; margin-top:2px; }
  .custom-trait-input:focus{ border-color:var(--brand); }

  .traits-box{ background:var(--alert-soft); border:1px solid color-mix(in srgb, var(--alert) 35%, var(--line)); border-radius:14px; padding:11px 13px; font-size:12px; line-height:1.5; color:var(--ink); }
  .traits-box b{ display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.04em; margin-bottom:5px; color:var(--alert); }
  .traits-box .trait-tag{ display:inline-block; background:var(--surface); border-radius:99px; padding:4px 10px; font-size:11.5px; font-weight:600; margin:0 6px 6px 0; }
  .traits-box.empty{ background:var(--surface-2); color:var(--ink-soft); font-style:italic; }
  .traits-box.empty b{ color:var(--ink-faint); }

  .safety-tip{ display:flex; gap:8px; font-size:11px; color:var(--ink-soft); background:var(--surface-2); border-radius:12px; padding:10px; line-height:1.4; }

  .modal-cta{ display:flex; gap:10px; }
  .btn-outline{ flex:1; border:1.5px solid var(--line); background:none; color:var(--ink); border-radius:14px; padding:12px; font-weight:600; font-size:13px; cursor:pointer; font-family:"Poppins",sans-serif;}
  .btn-solid{ flex:1; border:none; background:var(--brand); color:#fff; border-radius:14px; padding:12px; font-weight:600; font-size:13px; cursor:pointer; font-family:"Poppins",sans-serif;}

  .found-card{
    display:flex; gap:11px; align-items:center;
    background:linear-gradient(120deg, var(--violet-soft), var(--brand-soft));
    border:1px solid var(--line);
    border-radius:18px; padding:12px;
  }
  .found-card[hidden]{ display:none; }
  .found-icon{ width:38px;height:38px;border-radius:13px; background:var(--surface); display:flex;align-items:center;justify-content:center; font-size:17px; flex:none; }
  .found-body{ flex:1; }
  .found-title{ font-size:12.5px; font-weight:700; }
  .found-desc{ font-size:11px; color:var(--ink-soft); }
  .found-btn{ flex:none; border:none; background:var(--violet); color:#fff; font-weight:700; font-size:11.5px; padding:9px 12px; border-radius:11px; cursor:pointer; font-family:"Poppins",sans-serif; }

  .tag-option{ display:flex; align-items:center; gap:11px; border:1.5px solid var(--line); border-radius:14px; padding:11px; cursor:pointer; margin-top:8px; }
  .tag-option.selected{ border-color:var(--brand); background:var(--brand-soft); }
  .tag-swatch{ width:36px;height:36px;border-radius:11px; flex:none; display:flex; align-items:center; justify-content:center; font-size:15px; }
  .tag-info{ flex:1; }
  .tag-name{ font-size:12.5px; font-weight:700; }
  .tag-price{ font-size:11.5px; color:var(--ink-soft); }
  .tag-radio{ width:17px;height:17px;border-radius:50%; border:2px solid var(--ink-faint); flex:none; }
  .tag-option.selected .tag-radio{ border-color:var(--brand); background:radial-gradient(circle, var(--brand) 40%, transparent 42%); }

  .success-view{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:9px; padding:6px 0 2px; }
  .success-view .big{ font-size:34px; }
  .success-view h3{ font-size:15px; }
  .success-view p{ font-size:12px; color:var(--ink-soft); margin:0; line-height:1.45; }

  .qr-print-view{ display:flex; flex-direction:column; align-items:center; gap:9px; padding:4px 0; }
  .qr-print-box{ width:180px;height:180px; background:#fff; border-radius:16px; padding:13px; box-shadow:0 8px 24px -12px var(--shadow); }
  .qr-print-box svg{ width:100%; height:100%; }
  .qr-print-view .name{ font-family:"Poppins",sans-serif; font-weight:600; font-size:15px; }
  .qr-print-view .sub{ font-size:11.5px; color:var(--ink-soft); }

  .field-actions{ display:flex; gap:10px; }

  /* chat seguro (simulado) */
  .chat-masked-note{ display:flex; align-items:center; gap:8px; background:var(--teal-soft); color:var(--teal-strong); border-radius:12px; padding:9px 12px; font-size:11.5px; font-weight:600; line-height:1.35; }
  .chat-thread{ display:flex; flex-direction:column; gap:9px; }
  .chat-row{ display:flex; }
  .chat-row.me{ justify-content:flex-end; }
  .chat-bubble{ max-width:78%; padding:9px 12px; border-radius:16px; font-size:13px; line-height:1.4; }
  .chat-row.them .chat-bubble{ background:var(--surface-2); color:var(--ink); border-bottom-left-radius:4px; }
  .chat-row.me .chat-bubble{ background:var(--brand); color:#fff; border-bottom-right-radius:4px; }
  .chat-time{ display:block; margin-top:3px; font-size:10px; opacity:.7; }
  .chat-system{ text-align:center; font-size:10.5px; color:var(--ink-faint); padding:2px 0; }

  /* plan toggle + paywall */
  .plan-toggle{
    display:flex; background:var(--surface-2); border-radius:99px; padding:3px; gap:2px;
  }
  .plan-btn{
    flex:1; border:none; background:none; padding:8px 6px; border-radius:99px;
    font-size:11.5px; font-weight:700; color:var(--ink-soft); cursor:pointer;
    font-family:"Poppins",sans-serif;
  }
  .plan-btn.active{ background:var(--surface); color:var(--ink); box-shadow:0 2px 8px -3px var(--shadow); }

  .gate-wrap{ position:relative; }
  .gate-blur{ display:flex; flex-direction:column; gap:14px; }
  .gate-wrap.locked .gate-blur{ filter:blur(5px); pointer-events:none; user-select:none; opacity:.75; }
  .gate-unlock{
    display:none;
    position:absolute; inset:0; z-index:5;
    align-items:center; justify-content:center; text-align:center;
    flex-direction:column; gap:10px; padding:18px;
  }
  .gate-wrap.locked .gate-unlock{ display:flex; }
  .gate-unlock .lock-mark{
    width:44px;height:44px;border-radius:14px; background:var(--surface);
    display:flex;align-items:center;justify-content:center; font-size:19px;
    box-shadow:0 10px 24px -12px var(--shadow);
  }
  .gate-unlock h3{ font-size:15.5px; }
  .gate-unlock p{ font-size:12px; color:var(--ink-soft); margin:0; max-width:220px; line-height:1.45; }
  .gate-unlock button{
    border:none; background:linear-gradient(120deg, var(--brand), var(--violet)); color:#fff;
    font-family:"Poppins",sans-serif; font-weight:600; font-size:13px;
    padding:11px 18px; border-radius:14px; cursor:pointer;
  }

  .dog-switcher{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
  .dog-chip{
    flex:none; display:flex; align-items:center; gap:6px;
    border:1.5px solid var(--line); border-radius:99px; padding:7px 13px;
    font-size:12px; font-weight:700; color:var(--ink-soft); cursor:pointer; background:var(--surface);
  }
  .dog-chip.active{ border-color:var(--brand); color:var(--brand-strong); background:var(--brand-soft); }
  .dog-chip.add{ border-style:dashed; }
  .dog-chip .lockmini{ font-size:10px; }
  .dog-chip-thumb{
    width:20px;height:20px;border-radius:50%; overflow:hidden; flex:none;
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); font-size:11px;
  }
  .dog-chip-thumb img{ width:100%; height:100%; object-fit:cover; }

  .form-field{ display:flex; flex-direction:column; gap:5px; min-width:0; }
  .form-field label{ font-size:11.5px; font-weight:700; color:var(--ink-soft); }
  .form-field input, .form-field textarea, .form-field select{
    border:1.5px solid var(--line); border-radius:12px; padding:10px 12px;
    font-size:13.5px; font-family:inherit; color:var(--ink); background:var(--surface); outline:none;
    width:100%; min-width:0; box-sizing:border-box;
  }
  .form-field input:focus, .form-field textarea:focus, .form-field select:focus{ border-color:var(--brand); }
  /* Agregado junto con .form-field textarea de arriba (agenda de salud, ver
     #formSalud) — sin esto el textarea hereda el resize horizontal por
     defecto del navegador y puede desbordar el ancho del modal. */
  .form-field textarea{ resize:vertical; min-height:48px; }
  .form-grid{ display:flex; flex-direction:column; gap:11px; }
  /* min-width:0 acá es lo que soluciona el campo "Edad" saliéndose de
     pantalla: sin esto, un <input> dentro de un flex item no se achica
     nunca por debajo de su ancho "natural" (es el comportamiento por
     defecto de flexbox), así que en pantallas angostas terminaba
     empujando la fila entera hacia afuera. */
  .form-row2{ display:flex; gap:10px; flex-wrap:wrap; }
  .form-row2 .form-field{ flex:1 1 120px; min-width:0; }

  /* ad banner (free tier only) */
  .ad-banner{ display:flex; align-items:center; gap:10px; background:var(--surface); border:1px dashed var(--line); border-radius:16px; padding:11px 12px; }
  .ad-banner[hidden]{ display:none; }
  .ad-tag{ font-size:9.5px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; color:var(--ink-faint); background:var(--surface-2); padding:2px 7px; border-radius:6px; flex:none; }
  .ad-icon{ width:34px;height:34px;border-radius:10px; background:#FFC933; display:flex;align-items:center;justify-content:center; font-size:15px; flex:none; }
  .ad-body{ flex:1; }
  .ad-title{ font-size:12px; font-weight:700; }
  .ad-desc{ font-size:11px; color:var(--ink-soft); }
  .ad-remove{ flex:none; font-size:10.5px; font-weight:700; color:#FF5A46; background:none; border:none; cursor:pointer; font-family:"Poppins",sans-serif; }

  /* 4-tier switcher */
  .tier-row{ display:flex; gap:8px; overflow-x:auto; padding-bottom:2px; }
  .tier-chip{ flex:none; border:1.5px solid var(--line); background:var(--surface); border-radius:99px; padding:8px 14px; font-size:11.5px; font-weight:700; color:var(--ink-soft); cursor:pointer; font-family:"Poppins",sans-serif; }
  .tier-chip.active{ border-color:var(--brand); color:#fff; background:var(--brand); }

  .perk.locked{ opacity:.55; }
  .perk-locklabel{ flex:none; font-size:9.5px; font-weight:700; color:var(--ink-faint); background:var(--surface-2); padding:5px 8px; border-radius:8px; text-align:center; line-height:1.25; white-space:nowrap; }
  /* Chip verde "✓ Incluido" — renderClub() (app.js) agrega esta clase al
     mismo .perk-locklabel de siempre cuando el beneficio YA está desbloqueado,
     en vez de mostrar el plan que hace falta. */
  .perk-locklabel.incluido{ background:var(--teal-soft); color:var(--teal-strong); }

  .teaser-card{ display:flex; flex-direction:column; align-items:center; text-align:center; gap:8px; background:var(--surface-2); border:1.5px dashed var(--line); border-radius:16px; padding:16px; }
  .teaser-card .lock-mark{ width:36px;height:36px;border-radius:12px; background:var(--surface); display:flex;align-items:center;justify-content:center; font-size:16px; }
  .teaser-card h4{ font-size:13px; font-family:"Poppins",sans-serif; font-weight:600; margin:0; }
  .teaser-card p{ font-size:11.5px; color:var(--ink-soft); margin:0; line-height:1.4; max-width:230px; }
  .teaser-card button{ border:none; background:linear-gradient(120deg, var(--brand), var(--violet)); color:#fff; font-family:"Poppins",sans-serif; font-weight:600; font-size:12px; padding:9px 15px; border-radius:12px; cursor:pointer; margin-top:2px; }

  .tip-item{ display:flex; gap:10px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px; margin-top:8px; }
  .tip-num{ flex:none; width:26px;height:26px;border-radius:9px; background:var(--teal-soft); color:var(--teal-strong); font-family:"Poppins",sans-serif; font-weight:700; font-size:12px; display:flex;align-items:center;justify-content:center; }
  .tip-body{ flex:1; }
  .tip-title{ font-size:12.5px; font-weight:700; }
  .tip-desc{ font-size:11.5px; color:var(--ink-soft); line-height:1.4; }

  .educator-item{ display:flex; align-items:center; gap:11px; background:var(--surface); border:1px solid var(--line); border-radius:14px; padding:11px; margin-top:8px; }
  .educator-avatar{ width:38px;height:38px;border-radius:50%; background:var(--brand-soft); color:var(--brand-strong); font-family:"Poppins",sans-serif; font-weight:700; font-size:12px; display:flex;align-items:center;justify-content:center; flex:none; }
  .educator-body{ flex:1; }
  .educator-name{ font-size:12.5px; font-weight:700; }
  .educator-meta{ font-size:11px; color:var(--ink-soft); }
  .educator-badge{ flex:none; font-size:9.5px; font-weight:700; color:var(--teal-strong); background:var(--teal-soft); padding:4px 8px; border-radius:8px; text-align:center; }

  .premium-card{ background:linear-gradient(135deg, #241a38, #8155E8); color:#fff; border-radius:18px; padding:16px; display:flex; flex-direction:column; gap:9px; }
  /* Bug real que ya existía (no es nuevo de este rediseño): display:flex de
     arriba le gana en cascada al [hidden] del navegador, así que
     $("clubUpgradeCard").hidden=true con plan Manada Premium NO lo ocultaba
     de verdad — se notó al armar el mockup del Club (27/09). Mismo patrón
     defensivo que .tabpanel[hidden]/.banner[hidden] en este archivo. */
  .premium-card[hidden]{ display:none; }
  .premium-card h4{ font-family:"Poppins",sans-serif; font-size:15px; margin:0; }
  .premium-perk{ display:flex; gap:8px; align-items:flex-start; font-size:12px; opacity:.92; line-height:1.4; }
  .premium-card button{ margin-top:4px; border:none; background:#FFC933; color:#4A3400; font-family:"Poppins",sans-serif; font-weight:700; font-size:12.5px; padding:10px; border-radius:12px; cursor:pointer; }
  .premium-card button.done{ background:rgba(255,255,255,.18); color:#fff; cursor:default; }
  .disabled-btn{ opacity:.5; }

  /* El truco anterior (visibility:hidden en todo + position:fixed en el
     flyer) hacía que el flyer saliera DUPLICADO al imprimir: el resto de la
     app seguía ocupando su lugar en el documento (solo invisible, no
     display:none), así que si esa altura invisible no entraba en una sola
     hoja, el navegador generaba más de una página — y un elemento con
     position:fixed se repite en cada página al imprimir. Ahora directamente
     sacamos el resto de la app del documento (display:none), así solo queda
     el flyer (o el QR del collar) en el flujo normal, en una sola hoja. */
  @media print{
    @page{ size:A4 portrait; margin:12mm; }
    #authLoading, #authScreen, #appShell{ display:none !important; }
    body{ margin:0; display:flex; justify-content:center; padding-top:20px; }
    /* Lo sacamos de position:fixed (que usamos para mantenerlo fuera de
       pantalla mientras no se imprime, ver .flyer-print-view más arriba) —
       fixed se repite en cada hoja al imprimir, y acá solo queremos una. */
    .flyer-print-view{ position:static; left:auto; top:auto; }
  }

  /* Banner de publicidad (pestaña Inicio, solo plan Gratis) — ver
     AD_BANNER en app.js para cambiar auspiciante, y renderInicio() /
     actualizarAdBanner() para la lógica de qué variante se muestra. Cuando
     no hay auspiciante activo van rotando (con fundido cruzado) las
     imágenes de DEFAULT_AD_BANNER — por eso son dos <img> superpuestas en
     vez de una sola: la que entra sube su opacity mientras la que sale la
     baja, al mismo tiempo. */
  .ad-banner-wrap{ margin:0 0 16px; }
  .ad-banner{
    display:block; position:relative; border-radius:16px; overflow:hidden;
    box-shadow:0 10px 24px -18px var(--shadow); border:1px solid var(--line);
    aspect-ratio:3/1;
  }
  .ad-banner-img{
    position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
    display:block; opacity:0; transition:opacity .9s ease;
  }
  .ad-banner-img--visible{ opacity:1; }