/* ═══════════════════════════════════════════════════════════
   EL RANCHO DIGITAL · design system del portal nuevo
   Tokens del rediseño Élite Pecuario (mismo sistema que club.html)
   ═══════════════════════════════════════════════════════════ */
:root{
  --crema:#F5EFE4; --crema-2:#EFE8DA; --panel:#FCFAF4;
  --tinta:#33352D; --tinta-2:#6E6759; --tinta-3:#9C9484;
  --verde:#4E8B3E; --verde-hi:#5B9E49; --verde-bg:rgba(78,139,62,.12);
  --verde-hondo:#2E4A2A;
  --naranja:#D06E2C; --naranja-bg:rgba(208,110,44,.12);
  --miel:#D49A2E;
  --salvia-bg:#DEE8CF; --salvia-fg:#4E7A34;
  --miel-bg:#F6E7C0;  --miel-fg:#A67A1F;
  --coral-bg:#F7DDC8; --coral-fg:#C15E28;
  --cielo-bg:#D3E1E8; --cielo-fg:#4E7488;
  --teal-bg:#CFE6DD;  --teal-fg:#3E7B6A;
  --lila-bg:#E7D9E2;  --lila-fg:#74586E;
  --r-lg:24px; --r-md:18px;
  --font-display:"Bricolage Grotesque", system-ui, sans-serif;
  --font-body:"Hanken Grotesk", system-ui, sans-serif;
  --shadow-card:0 2px 6px rgba(51,53,45,.05), 0 16px 40px -18px rgba(51,53,45,.18);
  --sidebar-w:264px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *,*::before,*::after{animation:none!important;transition:none!important} }
body{font-family:var(--font-body);background:var(--crema);color:var(--tinta);line-height:1.55;font-size:16px;-webkit-font-smoothing:antialiased}
h1,h2,h3,h4{font-family:var(--font-display);line-height:1.15;letter-spacing:-.01em}
img{max-width:100%;display:block}
button{font-family:var(--font-body)}
:focus-visible{outline:3px solid var(--naranja);outline-offset:2px;border-radius:6px}

/* ═══ BOOT SCREEN ═══ */
.boot{position:fixed;inset:0;z-index:1000;background:var(--crema);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;transition:opacity .4s ease,visibility .4s}
.boot.hide{opacity:0;visibility:hidden}
.boot-logo{width:148px;background:transparent;border-radius:0;padding:0;box-shadow:none}
.boot-logo img{width:100%;height:auto;border-radius:28%}
.boot-status{color:var(--tinta-2);font-size:.95rem}
.boot-bar{width:180px;height:6px;border-radius:99px;background:var(--crema-2);overflow:hidden}
.boot-bar::after{content:"";display:block;width:40%;height:100%;border-radius:99px;background:var(--verde);animation:bootslide 1.1s ease-in-out infinite alternate}
@keyframes bootslide{from{transform:translateX(-30%)}to{transform:translateX(280%)}}

/* ═══ LAYOUT ═══ */
.app{display:flex;min-height:100vh}
.main{flex:1;min-width:0;display:flex;flex-direction:column}

/* ═══ SIDEBAR (verde hondo) ═══ */
.sidebar{width:var(--sidebar-w);flex-shrink:0;background:var(--verde-hondo);color:var(--crema);display:flex;flex-direction:column;position:sticky;top:0;height:100vh;overflow-y:auto;scrollbar-width:thin;scrollbar-color:rgba(245,239,228,.25) transparent}
.sb-brand{display:flex;align-items:center;gap:10px;padding:18px 18px 14px}
.sb-brand-chip{background:var(--panel);border-radius:12px;padding:6px 10px}
.sb-brand-chip img{height:26px}
.sb-brand small{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:rgba(245,239,228,.6)}

.sb-user{display:flex;align-items:center;gap:11px;background:rgba(245,239,228,.08);border-radius:var(--r-md);padding:12px;margin:2px 14px 14px}
.sb-avatar{width:42px;height:42px;border-radius:50%;background:var(--miel);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:700;flex-shrink:0}
.sb-user-info{min-width:0}
.sb-user-info strong{display:block;font-size:.93rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-user-info small{display:block;font-size:.76rem;color:rgba(245,239,228,.55);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sb-badge{font-size:.66rem;font-weight:800;letter-spacing:.08em;padding:4px 9px;border-radius:99px;flex-shrink:0}
.sb-badge--free{background:rgba(245,239,228,.16);color:var(--crema)}
.sb-badge--vip{background:var(--miel);color:#fff}

.sb-label{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,239,228,.45);padding:12px 20px 6px}
.sb-nav{display:flex;flex-direction:column;padding:0 10px}
.sb-group{display:flex;flex-direction:column}
.sb-group--principal{padding:2px 0 10px;margin-bottom:4px;border-bottom:1px solid rgba(245,239,228,.12)}
.sb-group--principal .sb-label{color:#F0C76C;font-weight:800}
.sb-item{display:flex;align-items:center;gap:11px;width:100%;background:none;border:none;color:rgba(245,239,228,.82);font-size:.92rem;font-weight:600;padding:9px 12px;border-radius:12px;cursor:pointer;text-align:left;text-decoration:none;transition:background .15s,color .15s}
.sb-item:hover{background:rgba(245,239,228,.1);color:#fff}
.sb-item.active{background:var(--crema);color:var(--verde-hondo)}
.sb-item .ico{width:22px;text-align:center;flex-shrink:0}
.sb-item .ext{margin-left:auto;font-size:.72rem;opacity:.5}

.sb-cta{margin:16px 14px;background:linear-gradient(135deg,var(--miel),#C08A24);border-radius:var(--r-md);padding:16px;text-align:left}
.sb-cta h4{font-size:.98rem;color:#fff;margin-bottom:4px}
.sb-cta p{font-size:.8rem;color:rgba(255,255,255,.85);margin-bottom:10px}
.sb-cta button{background:var(--panel);color:var(--verde-hondo);border:none;font-weight:700;font-size:.85rem;padding:9px 16px;border-radius:99px;cursor:pointer}
.sb-cta button:hover{background:#fff}

.sb-foot{margin-top:auto;padding:12px 14px 18px;display:flex;flex-direction:column;gap:4px}
.sb-foot .sb-item{font-size:.86rem;color:rgba(245,239,228,.6)}

/* overlay móvil */
.sb-overlay{display:none}

/* ═══ TOPBAR ═══ */
.topbar{position:sticky;top:0;z-index:50;background:rgba(245,239,228,.9);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);display:flex;align-items:center;gap:14px;padding:12px 26px;border-bottom:1px solid rgba(51,53,45,.07)}
.tb-burger{display:none;background:none;border:none;cursor:pointer;padding:6px}
.tb-burger span{display:block;width:22px;height:2.5px;background:var(--tinta);margin:4.5px 0;border-radius:2px}
.tb-search{flex:1;max-width:420px;position:relative}
.tb-search input{width:100%;border:1px solid rgba(51,53,45,.12);background:var(--panel);border-radius:99px;padding:10px 18px 10px 40px;font-family:var(--font-body);font-size:.93rem;color:var(--tinta)}
.tb-search input::placeholder{color:var(--tinta-3)}
.tb-search .lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:.9rem;opacity:.5}
.tb-actions{margin-left:auto;display:flex;align-items:center;gap:10px}
.tb-install{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:40px;border:1px solid rgba(78,139,62,.22);background:var(--miel-bg);color:var(--verde-hondo);font-weight:800;font-size:.8rem;padding:8px 13px;border-radius:99px;cursor:pointer;transition:background .15s,transform .15s;white-space:nowrap}
.tb-install:hover{background:#F0DCA8;transform:translateY(-1px)}
.tb-install[hidden]{display:none}
.tb-vip{display:inline-flex;align-items:center;gap:8px;background:var(--verde);color:#fff;font-weight:700;font-size:.88rem;padding:9px 16px;border-radius:99px;text-decoration:none;transition:background .15s}
.tb-vip:hover{background:var(--verde-hi)}
.tb-out{background:none;border:1px solid rgba(51,53,45,.14);color:var(--tinta-2);font-weight:600;font-size:.85rem;padding:9px 14px;border-radius:99px;cursor:pointer}
.tb-out:hover{border-color:var(--tinta-2);color:var(--tinta)}

/* ═══ CONTENIDO / SECCIONES ═══ */
.content{padding:26px;max-width:1180px;width:100%;margin:0 auto}
.section{display:none}
.section.active{display:block;animation:fadeUp .35s ease}
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* Banner Diagnóstico IA (la estrella) */
.ia-banner{position:relative;overflow:hidden;background:var(--coral-bg);border-radius:var(--r-lg);padding:26px 28px;display:flex;align-items:center;gap:22px;margin-bottom:24px}
.ia-banner::before{content:"";position:absolute;right:-70px;top:-70px;width:230px;height:230px;border-radius:50%;background:rgba(208,110,44,.13)}
.ia-ico{width:62px;height:62px;border-radius:18px;background:#fff;display:grid;place-items:center;font-size:1.8rem;flex-shrink:0;box-shadow:0 8px 20px -10px rgba(193,94,40,.5)}
.ia-txt{flex:1;min-width:0}
.ia-txt .star{display:inline-block;background:var(--naranja);color:#fff;font-size:.7rem;font-weight:800;letter-spacing:.08em;padding:4px 11px;border-radius:99px;margin-bottom:7px}
.ia-txt h2{font-size:1.3rem;color:var(--coral-fg);margin-bottom:4px}
.ia-txt p{font-size:.93rem;color:#7A4522}
.ia-cta{position:relative;background:var(--naranja);color:#fff;border:none;font-weight:700;font-size:.95rem;padding:13px 22px;border-radius:99px;cursor:pointer;flex-shrink:0;transition:transform .15s,background .15s}
.ia-cta:hover{background:#B95F22;transform:translateY(-2px)}

/* Saludo sobre el paisaje amanecer */
.casco-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);margin-bottom:22px;min-height:150px;display:flex;align-items:center;background:var(--crema-2)}
.casco-hero svg{position:absolute;inset:0;width:100%;height:100%}
.casco-hero .greet{position:relative;padding:26px 28px}

/* Saludo */
.greet{margin:6px 0 20px}
.greet h1{font-size:clamp(1.5rem,3vw,2.1rem);font-weight:800}
.greet h1 .greet-name{color:var(--verde)}
.greet p{color:var(--tinta-2);font-size:.98rem;margin-top:3px}

/* Stats del casco */
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:26px}
.stat-card{background:var(--panel);border-radius:var(--r-md);padding:18px 20px;box-shadow:var(--shadow-card);position:relative}
.stat-card .s-emoji{font-size:1.3rem}
.stat-card b{display:block;font-family:var(--font-display);font-size:1.7rem;font-weight:800;margin-top:6px;line-height:1.1}
.stat-card span{font-size:.83rem;color:var(--tinta-2)}
.stat-card .chip-demo{position:absolute;top:12px;right:12px;background:var(--lila-bg);color:var(--lila-fg);font-size:.64rem;font-weight:700;letter-spacing:.05em;padding:3px 8px;border-radius:99px}
.stat-card.is-demo{border:1.5px dashed var(--tinta-3)}

/* Formación principal y herramientas complementarias del Casco */
.casco-section-head{margin:28px 0 14px}
.casco-section-head--tools{margin-top:34px;padding-top:24px;border-top:1px solid rgba(51,53,45,.1)}
.casco-section-kicker{display:block;color:var(--naranja);font-size:.68rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;margin-bottom:4px}
.casco-section-head .casco-sub{font-size:1.2rem;margin:0;font-weight:800}
.casco-section-head p{color:var(--tinta-2);font-size:.88rem;margin-top:4px}
.tools-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:14px}
.tools-grid--learning{grid-template-columns:repeat(3,minmax(0,1fr))}
.tool-card{border:none;text-align:left;border-radius:var(--r-md);padding:18px;cursor:pointer;transition:transform .18s ease,box-shadow .18s ease;font-family:var(--font-body);position:relative}
.tool-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card)}
.tool-card--principal{min-height:150px;border:1px solid rgba(51,53,45,.07)}
.tool-card--cursos{grid-column:span 2;background:linear-gradient(135deg,#D3E1E8 0%,#E5EEF1 100%)}
.t-badge{position:absolute;top:14px;right:14px;background:var(--verde-hondo);color:var(--crema);font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:99px}
.tool-card .t-emoji{font-size:1.5rem;display:block;margin-bottom:9px}
.tool-card h4{font-size:.98rem;margin-bottom:3px}
.tool-card p{font-size:.82rem;line-height:1.4}
.tc--salvia{background:var(--salvia-bg)} .tc--salvia h4{color:var(--salvia-fg)} .tc--salvia p{color:#42552F}
.tc--miel{background:var(--miel-bg)}   .tc--miel h4{color:var(--miel-fg)}   .tc--miel p{color:#6E5320}
.tc--coral{background:var(--coral-bg)} .tc--coral h4{color:var(--coral-fg)} .tc--coral p{color:#7A4522}
.tc--cielo{background:var(--cielo-bg)} .tc--cielo h4{color:var(--cielo-fg)} .tc--cielo p{color:#3C596B}
.tc--teal{background:var(--teal-bg)}   .tc--teal h4{color:var(--teal-fg)}   .tc--teal p{color:#32584C}
.tc--lila{background:var(--lila-bg)}   .tc--lila h4{color:var(--lila-fg)}   .tc--lila p{color:#5C4658}

@media (max-width:760px){
  .tools-grid--learning{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
  .tools-grid--learning{grid-template-columns:1fr}
  .tool-card--cursos{grid-column:span 1}
}

/* ═══ ENCABEZADO DE SECCIÓN (la tira con el paisaje) ═══ */
.sec-hero{position:relative;overflow:hidden;border-radius:var(--r-lg);margin-bottom:22px;min-height:132px;display:flex;align-items:center;background:var(--crema-2)}
.sec-hero svg{position:absolute;inset:0;width:100%;height:100%}
.sec-hero .greet{position:relative;padding:24px 28px;margin:0}
.sec-hero .greet h1{font-size:clamp(1.4rem,2.6vw,1.9rem);font-weight:800}
.sec-hero .greet p{color:var(--tinta-2);font-size:.95rem;margin-top:3px}

/* ═══ MI HATO ═══ */
.btn-verde{background:var(--verde);color:#fff;border:none;font-weight:700;font-size:.9rem;padding:11px 18px;border-radius:99px;cursor:pointer;transition:background .15s,transform .15s;font-family:var(--font-body)}
.btn-verde:hover:not(:disabled){background:var(--verde-hi);transform:translateY(-1px)}
.btn-verde:disabled{opacity:.6;cursor:not-allowed}
.h-full{width:100%;margin-top:6px}

.stat-card--aviso{border:1.5px dashed var(--naranja)}
.stat-card--aviso b{color:var(--naranja)}
.h-nota{font-size:.78rem;color:var(--tinta-3);margin:-14px 0 18px;line-height:1.4}

.h-barra{display:flex;gap:12px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.h-buscar{flex:1;min-width:200px;position:relative}
.h-buscar input{width:100%;border:1px solid rgba(51,53,45,.12);background:var(--panel);border-radius:99px;padding:10px 16px 10px 40px;font-family:var(--font-body);font-size:.92rem;color:var(--tinta)}
.h-buscar .lupa{position:absolute;left:15px;top:50%;transform:translateY(-50%);font-size:.88rem;opacity:.5}

.h-chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:16px}
.h-chip{background:var(--panel);border:1.5px solid var(--crema-2);border-radius:99px;padding:7px 13px;font-size:.83rem;font-weight:600;color:var(--tinta-2);cursor:pointer;font-family:var(--font-body);transition:border-color .15s,background .15s}
.h-chip:hover{border-color:var(--tinta-3)}
.h-chip.active{background:var(--verde-hondo);border-color:var(--verde-hondo);color:var(--crema)}
.h-chip b{opacity:.6;margin-left:3px;font-weight:700}

.h-tabla-wrap{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden}
.h-tabla{width:100%;border-collapse:collapse;font-size:.9rem}
.h-tabla th{text-align:left;font-family:var(--font-display);font-size:.72rem;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);padding:13px 16px;border-bottom:1.5px solid var(--crema-2);white-space:nowrap}
.h-tabla td{padding:12px 16px;border-bottom:1px solid rgba(51,53,45,.06);vertical-align:middle}
.h-tabla tr:last-child td{border-bottom:none}
.h-tabla tbody tr:hover{background:var(--crema)}

.h-animal{display:flex;align-items:center;gap:11px}
.h-emoji{width:38px;height:38px;border-radius:11px;background:var(--salvia-bg);display:grid;place-items:center;font-size:1.15rem;flex-shrink:0}
.h-id{min-width:0}
.h-id strong{display:block;font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:22ch}
.h-arete{display:block;font-family:ui-monospace,monospace;font-size:.72rem;color:var(--tinta-3);letter-spacing:.03em}

.h-peso{display:flex;flex-direction:column;gap:4px;min-width:96px}
.h-peso-num{font-family:var(--font-display);font-weight:700;font-size:.9rem}
.h-peso-barra{display:block;height:5px;border-radius:99px;background:var(--crema-2);overflow:hidden}
.h-peso-barra i{display:block;height:100%;border-radius:99px;background:var(--verde);transition:width .3s}
.h-sinpeso{display:inline-block;background:var(--miel-bg);color:var(--miel-fg);font-size:.72rem;font-weight:700;padding:3px 9px;border-radius:99px}

.h-acciones{display:flex;gap:6px;justify-content:flex-end}
.h-btn{display:inline-flex;align-items:center;gap:5px;background:var(--crema);border:1px solid var(--crema-2);border-radius:10px;padding:7px 10px;font-size:.8rem;font-weight:600;color:var(--tinta-2);cursor:pointer;font-family:var(--font-body)}
.h-btn:hover{border-color:var(--verde);color:var(--verde)}
.h-btn--del:hover{border-color:#C0392B;color:#C0392B}

.h-estado{padding:52px 26px;text-align:center;max-width:460px;margin:0 auto}
.h-estado-emoji{font-size:2.4rem;display:block;margin-bottom:12px}
.h-estado h3{font-size:1.18rem;margin-bottom:6px}
.h-estado p{color:var(--tinta-2);font-size:.92rem;margin-bottom:16px}

/* ── Modales del hato ── */
.h-modal{position:fixed;inset:0;z-index:900;background:rgba(20,32,18,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px;overflow-y:auto}
.h-modal.active{display:flex}
.h-box{background:var(--panel);border-radius:var(--r-lg);max-width:520px;width:100%;padding:28px;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.5);margin:auto}
.h-box--sm{max-width:420px}
.h-box h3{font-size:1.25rem;margin-bottom:14px}
.h-close{position:absolute;top:14px;right:14px;background:var(--crema-2);border:none;width:32px;height:32px;border-radius:50%;font-size:.9rem;cursor:pointer;color:var(--tinta)}

.h-tabs{display:grid;grid-template-columns:1fr 1fr;background:var(--crema);border-radius:99px;padding:4px;margin-bottom:14px}
.h-tab{background:none;border:none;font-weight:700;font-size:.86rem;color:var(--tinta-3);padding:8px;border-radius:99px;cursor:pointer;font-family:var(--font-body)}
.h-tab[aria-selected="true"]{background:var(--panel);color:var(--verde-hondo);box-shadow:0 2px 8px rgba(51,53,45,.12)}

.h-vista{display:none}
.h-vista.active{display:block}
.h-fila{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.h-campo{margin-bottom:12px}
.h-campo label{display:block;font-size:.78rem;font-weight:700;color:var(--tinta-2);margin-bottom:5px}
.h-campo input,.h-campo select,.h-campo textarea{width:100%;border:1.5px solid var(--crema-2);background:var(--crema);border-radius:12px;padding:10px 12px;font-size:.92rem;color:var(--tinta);font-family:var(--font-body)}
.h-campo textarea{font-family:ui-monospace,monospace;font-size:.84rem;resize:vertical}
.h-campo input:focus,.h-campo select:focus,.h-campo textarea:focus{border-color:var(--verde);background:var(--panel);outline:none}
.h-contador{float:right;font-weight:600;color:var(--tinta-3)}
.h-hint{font-size:.82rem;color:var(--tinta-2);margin-bottom:12px;line-height:1.45}
.h-link{background:none;border:none;color:var(--verde);font-weight:700;font-size:.82rem;cursor:pointer;padding:6px 0;font-family:var(--font-body)}

.h-alert{display:none;border-radius:11px;padding:10px 13px;font-size:.85rem;font-weight:600;margin-bottom:12px;line-height:1.4}
.h-alert.show{display:block}
.h-alert--error{background:#F7DEDA;color:#C0392B}
.h-alert--aviso{background:var(--miel-bg);color:var(--miel-fg)}

.h-confirm-txt{font-size:.98rem;margin-bottom:8px}
.h-peligro{background:#F7DEDA;color:#8E2A20;border-radius:12px;padding:11px 13px;font-size:.86rem;line-height:1.45;margin-bottom:16px}
.h-confirm-btns{display:flex;gap:10px;justify-content:flex-end}
.h-btn-sec{background:var(--crema);border:1.5px solid var(--crema-2);color:var(--tinta-2);font-weight:700;font-size:.88rem;padding:10px 18px;border-radius:99px;cursor:pointer;font-family:var(--font-body)}
.h-btn-del{background:#C0392B;color:#fff;border:none;font-weight:700;font-size:.88rem;padding:10px 18px;border-radius:99px;cursor:pointer;font-family:var(--font-body)}
.h-btn-del:hover:not(:disabled){background:#A53226}
.h-btn-sec:disabled,.h-btn-del:disabled{opacity:.6;cursor:not-allowed}
.cl-dup{color:var(--miel-fg);font-weight:600;font-size:.86rem}

.h-prog{margin:14px 0}
.h-prog-bar{height:8px;border-radius:99px;background:var(--crema-2);overflow:hidden}
.h-prog-bar i{display:block;height:100%;width:0;border-radius:99px;background:var(--verde);transition:width .25s}
.h-prog-cnt{display:block;text-align:center;font-size:.8rem;font-weight:700;color:var(--tinta-2);margin-top:6px}

/* ═══ BITÁCORA ═══ */
.bita-filtros{display:flex;flex-direction:column;gap:8px;margin-bottom:18px}
.bita-lista{display:flex;flex-direction:column;gap:20px}
.bita-grupo-fecha{font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:9px}
.bita-grupo-eventos{display:flex;flex-direction:column;gap:10px}
.bita-evento{display:flex;gap:12px;align-items:flex-start;background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:14px 16px;border-left:4px solid var(--ev-color,var(--verde))}
.bita-ev-ico{width:36px;height:36px;border-radius:10px;background:color-mix(in srgb,var(--ev-color,var(--verde)) 16%,#fff);display:grid;place-items:center;font-size:1.05rem;flex-shrink:0}
.bita-ev-body{flex:1;min-width:0}
.bita-ev-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-bottom:3px}
.bita-ev-tipo{font-size:.86rem;font-weight:700;color:var(--tinta)}
.bita-ev-animal{font-size:.8rem;color:var(--tinta-2)}
.bita-ev-nota{font-size:.87rem;color:var(--tinta-2);line-height:1.45}
.bita-ev-nota em{color:var(--tinta-3);font-style:normal}
.bita-ev-costo{display:inline-block;margin-top:5px;font-family:var(--font-display);font-weight:700;font-size:.82rem;color:var(--verde-hondo);background:var(--salvia-bg);padding:2px 9px;border-radius:99px}
.bita-ev-del{background:none;border:none;color:var(--tinta-3);font-size:1.15rem;line-height:1;cursor:pointer;padding:4px 7px;border-radius:8px;flex-shrink:0;font-family:var(--font-body)}
.bita-ev-del:hover{background:#F7DEDA;color:#C0392B}

/* ═══ COMUNIDAD (Radar de avisos) ═══ */
.com-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:16px}
.com-card{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;display:flex;flex-direction:column}
.com-foto{position:relative;aspect-ratio:4/3;background:var(--crema-2);display:grid;place-items:center;overflow:hidden;cursor:pointer;background-size:cover;background-position:center}
.com-foto-emoji{font-size:2.2rem;opacity:.4}
.com-tipo-badge{position:absolute;top:9px;left:9px;font-size:.66rem;font-weight:800;padding:3px 9px;border-radius:99px;background:rgba(252,250,244,.94);color:var(--tinta-2)}
.com-tipo-badge.venta{color:var(--salvia-fg)}
.com-tipo-badge.compra{color:var(--cielo-fg)}
.com-tipo-badge.ofrezco{color:var(--miel-fg)}
.com-tipo-badge.busco{color:var(--lila-fg)}
.com-fotos-count{position:absolute;top:9px;right:9px;font-size:.64rem;font-weight:700;padding:3px 8px;border-radius:99px;background:rgba(31,51,25,.7);color:var(--crema)}
.com-body{padding:14px;flex:1;display:flex;flex-direction:column;gap:5px;cursor:pointer}
.com-categoria{font-size:.66rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--miel-fg)}
.com-titulo{font-size:.96rem;font-weight:700;color:var(--tinta);line-height:1.3}
.com-precio{font-family:var(--font-display);font-weight:800;font-size:1.05rem;color:var(--verde-hondo)}
.com-precio .sin-precio{font-size:.82rem;font-weight:600;color:var(--tinta-3);font-family:var(--font-body)}
.com-desc{font-size:.82rem;color:var(--tinta-2);line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.com-rancho{display:flex;align-items:center;gap:9px;margin-top:5px;padding-top:9px;border-top:1px solid var(--crema-2)}
.com-rancho-emoji{width:30px;height:30px;border-radius:50%;background:var(--crema);display:grid;place-items:center;font-size:.95rem;flex-shrink:0}
.com-rancho-info{min-width:0;flex:1;display:flex;flex-direction:column}
.com-rancho-nombre{font-size:.82rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.com-rancho-meta{font-size:.72rem;color:var(--tinta-3)}
.com-fecha{padding:0 14px;font-size:.7rem;color:var(--tinta-3)}
.com-acciones{display:flex;gap:8px;padding:12px 14px;margin-top:8px}
.com-btn-wa{flex:1;text-align:center;background:#25D366;color:#fff;font-weight:700;font-size:.83rem;padding:9px;border-radius:99px;text-decoration:none;font-family:var(--font-body)}
.com-btn-wa:hover{background:#1ebe5a}
.com-btn-del,.com-btn-reportar{background:var(--crema);border:1px solid var(--crema-2);border-radius:99px;padding:9px 12px;font-size:.85rem;cursor:pointer;color:var(--tinta-2);font-family:var(--font-body)}
.com-btn-del:hover{border-color:#C0392B;color:#C0392B}
.com-btn-reportar:hover:not(:disabled){border-color:var(--naranja);color:var(--naranja)}
.com-btn-reportar:disabled{opacity:.55;cursor:default}

/* Publicar / Detalle */
.com-tipos-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-bottom:14px}
.com-tipo-btn{background:var(--crema);border:1.5px solid var(--crema-2);border-radius:12px;padding:10px 4px;text-align:center;cursor:pointer;font-family:var(--font-body);font-size:.72rem;font-weight:700;color:var(--tinta-2)}
.com-tipo-btn span{display:block;font-size:1.1rem;margin-bottom:3px}
.com-tipo-btn.sel{background:var(--verde-hondo);border-color:var(--verde-hondo);color:var(--crema)}
.com-fotos-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.com-foto-slot{position:relative;aspect-ratio:1/1;border-radius:12px;background:var(--crema);border:1.5px dashed var(--crema-2);display:grid;place-items:center;cursor:pointer;background-size:cover;background-position:center;overflow:hidden}
.com-foto-slot.lleno{border-style:solid}
.com-foto-placeholder{font-size:1.4rem;color:var(--tinta-3)}
.com-foto-input{display:none}
.com-foto-quitar{position:absolute;top:4px;right:4px;background:rgba(31,51,25,.7);color:#fff;border:none;width:22px;height:22px;border-radius:50%;font-size:.8rem;cursor:pointer;line-height:1;font-family:var(--font-body)}

.com-det-foto{width:100%;aspect-ratio:16/9;border-radius:var(--r-md);background:var(--crema-2);background-size:cover;background-position:center;margin-bottom:10px}
.com-det-thumbs{display:flex;gap:8px;margin-bottom:14px}
.com-det-thumb{width:56px;height:56px;border-radius:10px;background-size:cover;background-position:center;cursor:pointer;border:2px solid transparent}
.com-det-thumb.activa{border-color:var(--verde)}

/* ═══ SOPORTE ═══ */
.sop-contactos{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:14px;margin-bottom:28px}
.sop-contacto{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px;text-decoration:none;transition:transform .15s}
.sop-contacto:hover{transform:translateY(-3px)}
.sop-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.4rem;flex-shrink:0}
.sop-contacto--wa .sop-ico{background:rgba(37,211,102,.15)}
.sop-contacto--mail .sop-ico{background:var(--cielo-bg)}
.sop-contacto--bug .sop-ico{background:var(--coral-bg)}
.sop-txt{flex:1;min-width:0;display:flex;flex-direction:column}
.sop-titulo{font-weight:700;font-size:.96rem;color:var(--tinta)}
.sop-sub{font-size:.81rem;color:var(--tinta-2);margin-top:2px}
.sop-meta{font-size:.77rem;color:var(--tinta-3);margin-top:4px;font-weight:600}
.sop-flecha{font-size:1.2rem;color:var(--tinta-3);flex-shrink:0}

.sop-seccion{margin-bottom:28px}
.sop-seccion-head{display:flex;align-items:center;gap:12px;margin-bottom:14px}
.sop-seccion-head span{font-size:1.4rem}
.sop-seccion-head h2{font-size:1.15rem}
.sop-seccion-head p{font-size:.85rem;color:var(--tinta-2)}

.sop-guias{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}
.sop-guia{background:var(--panel);border:1.5px solid var(--crema-2);border-radius:var(--r-md);padding:16px;cursor:pointer;text-align:left;font-family:var(--font-body);transition:border-color .15s,transform .15s;display:block;width:100%}
.sop-guia:hover{border-color:var(--verde);transform:translateY(-2px)}
.sop-guia-ico{font-size:1.6rem;margin-bottom:8px;display:block}
.sop-guia-titulo{display:block;font-size:.9rem;font-weight:700;color:var(--tinta);line-height:1.3}
.sop-guia-paso{display:block;font-size:.76rem;color:var(--tinta-3);margin-top:4px}

.sop-faq{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);margin-bottom:8px;overflow:hidden}
.sop-faq summary{padding:15px 18px;font-weight:700;font-size:.92rem;color:var(--tinta);cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:10px}
.sop-faq summary::-webkit-details-marker{display:none}
.sop-faq summary::after{content:"+";font-size:1.3rem;color:var(--tinta-3);flex-shrink:0;transition:transform .2s}
.sop-faq[open] summary::after{transform:rotate(45deg)}
.sop-faq-body{padding:0 18px 16px;font-size:.87rem;color:var(--tinta-2);line-height:1.55}
.sop-faq-body strong{color:var(--tinta)}

.sop-membresia-card{display:flex;align-items:center;justify-content:space-between;gap:18px;background:var(--panel);border:1.5px solid var(--crema-2);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px}
.sop-membresia-card strong{display:block;color:var(--tinta);font-size:.98rem}
.sop-membresia-card p{margin-top:5px;color:var(--tinta-2);font-size:.86rem;line-height:1.45}
.sop-btn-cancelar{flex:0 0 auto;border:1.5px solid #C0392B;background:#fff;color:#A52F24;border-radius:99px;padding:11px 17px;font:700 .84rem var(--font-body);cursor:pointer;transition:background .15s,color .15s,transform .15s}
.sop-btn-cancelar:hover:not(:disabled){background:#C0392B;color:#fff;transform:translateY(-1px)}
.sop-btn-cancelar:disabled{cursor:not-allowed;opacity:.68;background:var(--crema)}

.sop-salir{text-align:center;margin-top:8px}
.sop-legal{margin:0 0 14px;color:var(--tinta-3);font-size:.8rem}
.sop-legal a{color:var(--verde);text-underline-offset:3px}
.sop-btn-salir{background:none;border:1.5px solid var(--crema-2);color:var(--tinta-2);font-weight:700;font-size:.88rem;padding:11px 22px;border-radius:99px;cursor:pointer;font-family:var(--font-body)}
.sop-btn-salir:hover{border-color:#C0392B;color:#C0392B}

/* ═══ PREDICCIÓN DE VENTA ÓPTIMA ═══ */
.pr-grid{display:grid;grid-template-columns:minmax(240px,320px) 1fr;gap:18px;align-items:start}
.pr-col{min-width:0}
.pr-h{font-size:1.05rem;margin-bottom:3px}
.pr-sub{font-size:.83rem;color:var(--tinta-2);margin-bottom:12px}
.pr-hint{font-size:.75rem;color:var(--tinta-3);margin-top:5px;line-height:1.4}
.pr-nota{font-size:.75rem;color:var(--tinta-3);margin-top:10px;line-height:1.4}

.pr-animales{display:flex;flex-direction:column;gap:8px;max-height:520px;overflow-y:auto;padding-right:4px}
.pr-animal{display:flex;align-items:center;gap:11px;width:100%;background:var(--panel);border:1.5px solid var(--crema-2);border-radius:var(--r-md);padding:11px 13px;cursor:pointer;text-align:left;font-family:var(--font-body);transition:border-color .15s,transform .15s}
.pr-animal:hover{border-color:var(--verde);transform:translateX(2px)}
.pr-animal.active{border-color:var(--verde);background:var(--salvia-bg)}
.pr-a-emoji{width:36px;height:36px;border-radius:10px;background:var(--crema);display:grid;place-items:center;font-size:1.1rem;flex-shrink:0}
.pr-animal.active .pr-a-emoji{background:var(--panel)}
.pr-a-txt{min-width:0}
.pr-a-txt strong{display:block;font-size:.9rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pr-a-txt small{display:block;font-size:.75rem;color:var(--tinta-3)}
.pr-vacio{background:var(--panel);border-radius:var(--r-md);padding:20px;font-size:.88rem;color:var(--tinta-2);text-align:center}

.pr-form{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px}
.pr-resultado{margin-top:16px}

.pr-veredicto{border-radius:var(--r-lg);padding:22px 24px;margin-bottom:14px}
.pr-veredicto h2{font-size:1.3rem;margin-bottom:6px}
.pr-veredicto p{font-size:.92rem;line-height:1.5}
.pr-tag{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.07em;padding:4px 11px;border-radius:99px;margin-bottom:8px;background:rgba(255,255,255,.6)}
.pr-veredicto--vender{background:var(--salvia-bg)}
.pr-veredicto--vender h2{color:var(--salvia-fg)} .pr-veredicto--vender p{color:#42552F}
.pr-veredicto--esperar{background:var(--cielo-bg)}
.pr-veredicto--esperar h2{color:var(--cielo-fg)} .pr-veredicto--esperar p{color:#3C596B}
.pr-veredicto--alerta{background:var(--coral-bg)}
.pr-veredicto--alerta h2{color:var(--coral-fg)} .pr-veredicto--alerta p{color:#7A4522}

.pr-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin-bottom:12px}
.pr-stat{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:14px}
.pr-s-ico{font-size:1.1rem}
.pr-s-lbl{display:block;font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta-3);margin:5px 0 2px}
.pr-stat b{font-family:var(--font-display);font-size:1.25rem;font-weight:800}
.pr-stat b small{font-size:.7rem;font-weight:600;color:var(--tinta-3)}

.pr-fuente{background:var(--crema-2);border-radius:12px;padding:11px 13px;font-size:.78rem;color:var(--tinta-2);line-height:1.45}
.pr-tip{font-size:.82rem;color:var(--tinta-2);margin-top:10px;line-height:1.45}

@media(max-width:880px){
  .pr-grid{grid-template-columns:1fr}
  .pr-animales{max-height:none;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;-webkit-overflow-scrolling:touch}
  .pr-animal{flex-shrink:0;min-width:190px}
  .pr-animal:hover{transform:none}
  .pr-form{padding:18px}
}

/* ═══ DIAGNÓSTICO VETERINARIO ═══ */
.diag-form{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:24px}
.diag-cont{font-weight:700;color:var(--verde)}
.diag-especies{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px}
.diag-esp{display:flex;align-items:center;gap:7px;background:var(--crema);border:1.5px solid var(--crema-2);border-radius:99px;padding:9px 16px;font-size:.9rem;font-weight:600;color:var(--tinta-2);cursor:pointer;font-family:var(--font-body)}
.diag-esp:hover{border-color:var(--tinta-3)}
.diag-esp.active{background:var(--verde-hondo);border-color:var(--verde-hondo);color:var(--crema)}
.diag-esp span{font-size:1.05rem}

.diag-sintomas{display:flex;flex-direction:column;gap:16px;margin-bottom:20px}
.diag-cat h4{font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:8px}
.diag-chips{display:flex;gap:7px;flex-wrap:wrap}
.diag-chip{display:flex;align-items:center;gap:6px;background:var(--crema);border:1.5px solid var(--crema-2);border-radius:12px;padding:8px 12px;font-size:.84rem;font-weight:600;color:var(--tinta-2);cursor:pointer;font-family:var(--font-body);transition:border-color .15s,background .15s}
.diag-chip:hover{border-color:var(--coral-fg)}
.diag-chip.active{background:var(--coral-bg);border-color:var(--coral-fg);color:var(--coral-fg)}

.diag-acciones{display:flex;gap:10px;justify-content:flex-end;border-top:1px solid var(--crema-2);padding-top:16px}

/* El disclaimer va ARRIBA de los resultados: se lee antes que cualquier dosis */
.diag-resultados{margin-top:18px}
.diag-disc{background:#F7DEDA;border:2px solid #C0392B;border-radius:var(--r-lg);padding:18px 20px;margin-bottom:16px}
.diag-disc h3{font-size:1.05rem;color:#8E2A20;margin-bottom:8px}
.diag-disc p{font-size:.88rem;color:#8E2A20;line-height:1.5;margin-bottom:6px}
.diag-disc-tel{font-size:.9rem!important;background:rgba(255,255,255,.5);border-radius:9px;padding:8px 11px;margin-top:8px!important}

.diag-res-head{margin-bottom:10px}
.diag-res-head h2{font-size:1.3rem;margin-bottom:4px}
.diag-res-head p{font-size:.9rem;color:var(--tinta-2)}
.diag-nota-co{background:var(--cielo-bg);color:#3C596B;border-radius:12px;padding:11px 14px;font-size:.84rem;line-height:1.5;margin-bottom:16px}

.diag-card{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:20px;margin-bottom:14px;border-left:5px solid var(--sev)}
.diag-card.sev-alta{--sev:#C0392B}
.diag-card.sev-media{--sev:#D49A2E}
.diag-card.sev-baja{--sev:#4E8B3E}
/* Grave o notificable: se destaca aunque la coincidencia sea baja */
.diag-card--destacada{box-shadow:0 0 0 2px var(--sev),var(--shadow-card)}
.diag-card-head{display:flex;gap:13px;margin-bottom:12px}
.diag-rank{width:30px;height:30px;border-radius:50%;background:var(--sev);color:#fff;display:grid;place-items:center;font-family:var(--font-display);font-weight:800;font-size:.9rem;flex-shrink:0}
.diag-card-id{min-width:0}
.diag-card-id h3{font-size:1.08rem;line-height:1.25;margin-bottom:7px}
.diag-badges{display:flex;gap:6px;flex-wrap:wrap}
.diag-badge{font-size:.68rem;font-weight:800;letter-spacing:.03em;padding:4px 9px;border-radius:99px;background:var(--crema-2);color:var(--tinta-2)}
.diag-badge.co-alta{background:var(--salvia-bg);color:var(--salvia-fg)}
.diag-badge.co-media{background:var(--miel-bg);color:var(--miel-fg)}
.diag-badge.co-baja{background:var(--crema-2);color:var(--tinta-3)}
.diag-badge-sev{background:var(--sev);color:#fff}
.diag-badge-notif{background:#C0392B;color:#fff}

.diag-desc{font-size:.89rem;color:var(--tinta-2);line-height:1.55;margin-bottom:14px}
.diag-bloque{background:var(--crema);border-radius:var(--r-md);padding:13px 15px;margin-bottom:10px}
.diag-bloque h4{font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.diag-bloque p{font-size:.87rem;line-height:1.55;color:var(--tinta)}
/* Pegada al tratamiento, no al pie de la página */
.diag-aviso-dosis{background:#F7DEDA;color:#8E2A20;border-radius:9px;padding:9px 11px;margin-top:10px;font-size:.81rem!important;line-height:1.45}
.diag-aviso-notif{background:#C0392B;color:#fff;border-radius:10px;padding:11px 13px;font-size:.84rem;line-height:1.45;margin-top:4px}
.diag-fuente{font-size:.75rem;color:var(--tinta-3);margin-top:10px}

@media(max-width:880px){
  .diag-form{padding:18px 16px}
  .diag-esp{padding:8px 13px;font-size:.85rem}
  .diag-chip{font-size:.8rem;padding:7px 10px}
  .diag-acciones{flex-direction:column-reverse}
  .diag-acciones .btn-verde,.diag-acciones .h-btn{width:100%;justify-content:center}
  .diag-card{padding:16px}
}

/* ═══ CALCULADORA ═══ */
.calc-sub{font-size:.8rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);margin:16px 0 8px}
.calc-hero{border-radius:var(--r-lg);padding:24px;text-align:center;margin-bottom:14px}
.calc-hero--gana{background:var(--salvia-bg)}
.calc-hero--pierde{background:var(--coral-bg)}
.calc-hero-lbl{display:inline-block;font-size:.7rem;font-weight:800;letter-spacing:.08em;padding:4px 11px;border-radius:99px;background:rgba(255,255,255,.6);margin-bottom:8px}
.calc-hero b{display:block;font-family:var(--font-display);font-size:2.3rem;font-weight:800;line-height:1.1}
.calc-hero--gana b{color:var(--salvia-fg)} .calc-hero--pierde b{color:var(--coral-fg)}
.calc-hero-sub{display:block;font-size:.9rem;margin-top:6px;color:var(--tinta-2)}

/* ═══ BIBLIOTECA ═══ */
.bib-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:16px}
.bib-card{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);overflow:hidden;cursor:pointer;transition:transform .18s;border:none;text-align:left;padding:0}
.bib-card:hover{transform:translateY(-4px)}
.bib-card--lock{opacity:.72}
.bib-foto{position:relative;aspect-ratio:16/9;background:var(--crema-2);display:grid;place-items:center;overflow:hidden}
.bib-foto img{width:100%;height:100%;object-fit:cover}
.bib-sinfoto{font-size:2rem;opacity:.4}
.bib-lock,.bib-libre{position:absolute;top:9px;right:9px;font-size:.68rem;font-weight:800;padding:4px 9px;border-radius:99px;background:rgba(31,51,25,.82);color:var(--crema)}
.bib-libre{background:var(--verde);color:#fff}
.bib-body{padding:14px}
.bib-cat{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--miel-fg);background:var(--miel-bg);padding:3px 8px;border-radius:99px;margin-bottom:6px}
.bib-body h3{font-size:1rem;line-height:1.25;margin-bottom:4px}
.bib-body p{font-size:.8rem;color:var(--tinta-3)}
.bib-prog{height:5px;border-radius:99px;background:var(--crema-2);overflow:hidden;margin-top:9px}
.bib-prog span{display:block;height:100%;background:var(--verde);border-radius:99px}
.bib-prog-txt{font-size:.72rem;color:var(--tinta-3);margin-top:4px;display:block}

.h-box--lg{max-width:820px}
.bib-inst{font-size:.85rem;color:var(--tinta-3);margin-bottom:12px}
.bib-player{position:relative;aspect-ratio:16/9;background:#12160F;border-radius:var(--r-md);overflow:hidden;margin-bottom:12px}
.bib-player iframe,.bib-player video{position:absolute;inset:0;width:100%;height:100%;border:0}
.bib-vacio{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:rgba(245,239,228,.75);text-align:center;padding:20px}
.bib-vacio span{font-size:2.4rem}
.bib-vacio small{color:rgba(245,239,228,.45);font-size:.8rem}
.bib-desc{font-size:.88rem;color:var(--tinta-2);margin:12px 0;line-height:1.5}
.bib-clases{display:flex;flex-direction:column;gap:6px;max-height:280px;overflow-y:auto}
.bib-clase{display:flex;align-items:center;gap:11px;background:var(--crema);border:1.5px solid transparent;border-radius:12px;padding:10px 12px;cursor:pointer;text-align:left;font-family:var(--font-body);width:100%}
.bib-clase:hover{border-color:var(--crema-2)}
.bib-clase.active{background:var(--salvia-bg);border-color:var(--verde)}
.bib-clase--lock{opacity:.72;background:var(--crema);border-color:rgba(166,122,31,.12)}
.bib-clase--lock:hover{opacity:1;border-color:rgba(166,122,31,.38)}
.bib-clase--lock.active{background:var(--crema);border-color:rgba(166,122,31,.12)}
.bib-cl-num{width:26px;height:26px;border-radius:50%;background:var(--panel);display:grid;place-items:center;font-size:.78rem;font-weight:700;flex-shrink:0;color:var(--verde-hondo)}
.bib-cl-tit{font-size:.88rem;font-weight:600}
.bib-cl-plan{margin-left:auto;flex-shrink:0;background:var(--miel-bg);color:var(--miel-fg);border-radius:99px;padding:3px 8px;font-size:.65rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase}

/* ═══ MATERIAL ═══ */
.mat-lista{display:flex;flex-direction:column;gap:12px}
.mat-card{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:16px}
.mat-ico{width:44px;height:44px;border-radius:12px;background:var(--coral-bg);display:grid;place-items:center;font-size:1.3rem;flex-shrink:0}
.mat-body{flex:1;min-width:0}
.mat-body h3{font-size:.98rem}
.mat-body p{font-size:.83rem;color:var(--tinta-2);margin-top:2px}
.mat-meta{font-size:.74rem;color:var(--tinta-3)}

/* ═══ WEBINARS ═══ */
.web-lista{display:flex;flex-direction:column;gap:12px}
.web-card{display:flex;align-items:center;gap:16px;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px;flex-wrap:wrap}
.web-card--pasada{opacity:.78}
.web-fecha{display:flex;flex-direction:column;align-items:center;gap:2px;background:var(--lila-bg);border-radius:var(--r-md);padding:12px 16px;min-width:150px;text-align:center}
.web-f-ico{font-size:1.3rem}
.web-f-txt{font-size:.76rem;font-weight:700;color:var(--lila-fg);line-height:1.3}
.web-f-hora{font-size:.72rem;color:var(--tinta-3)}
.web-body{flex:1;min-width:180px}
.web-tag{display:inline-block;font-size:.64rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:4px}
.web-body h3{font-size:1.02rem;line-height:1.3}
.web-inst{font-size:.83rem;color:var(--tinta-2);margin-top:3px}
.web-acciones{display:flex;gap:8px;flex-wrap:wrap}
.web-sin{font-size:.78rem;color:var(--tinta-3);font-style:italic}

/* ═══ MI PROGRESO ═══ */
.prog-barra-box{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:16px;margin-bottom:22px}
.prog-barra-top{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;font-size:.86rem;color:var(--tinta-2)}
.prog-barra-top b{font-family:var(--font-display);font-size:1.2rem;color:var(--verde)}
.prog-barra{height:9px;border-radius:99px;background:var(--crema-2);overflow:hidden}
.prog-barra span{display:block;height:100%;background:var(--verde);border-radius:99px;transition:width .4s}
.prog-logros{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px;margin-bottom:24px}
.prog-logro{display:flex;align-items:center;gap:11px;background:var(--panel);border-radius:var(--r-md);padding:13px;opacity:.55;position:relative}
.prog-logro--ok{opacity:1;box-shadow:var(--shadow-card)}
.prog-l-emoji{font-size:1.5rem;filter:grayscale(1)}
.prog-logro--ok .prog-l-emoji{filter:none}
.prog-logro strong{display:block;font-size:.88rem}
.prog-logro small{font-size:.75rem;color:var(--tinta-3)}
.prog-l-check{position:absolute;top:10px;right:12px;color:var(--verde);font-weight:800}
.prog-cursos{display:flex;flex-direction:column;gap:12px}
.prog-curso{background:var(--panel);border-radius:var(--r-md);padding:13px 15px;box-shadow:var(--shadow-card)}
.prog-c-top{display:flex;justify-content:space-between;gap:10px;font-size:.86rem;margin-bottom:7px}
.prog-c-top b{color:var(--tinta-3);white-space:nowrap}
.prog-nota{background:var(--miel-bg);color:#6E5320;border-radius:12px;padding:12px 14px;font-size:.82rem;line-height:1.5;margin-top:22px}

/* ═══ CERTIFICADOS ═══ */
.cert-lista{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px}
.cert-card{display:flex;align-items:center;gap:14px;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:18px;border-left:4px solid var(--miel)}
.cert-sello{width:46px;height:46px;border-radius:12px;background:var(--miel-bg);display:grid;place-items:center;font-size:1.4rem;flex-shrink:0}
.cert-body{flex:1;min-width:0}
.cert-body h3{font-size:.98rem;line-height:1.3}
.cert-folio{display:inline-block;font-family:ui-monospace,monospace;font-size:.72rem;color:var(--miel-fg);background:var(--miel-bg);padding:2px 7px;border-radius:99px;margin:4px 0}
.cert-meta{font-size:.76rem;color:var(--tinta-3);line-height:1.4}
.cert-acciones{display:flex;flex-direction:column;gap:6px}
.cert-acciones .h-btn{text-decoration:none;justify-content:center}

/* Plantilla del certificado (la captura html2canvas → PDF A4 horizontal) */
.cert-tpl{background:var(--panel);border-radius:var(--r-md);padding:8px;margin-bottom:14px}
.ct-marco{border:3px double var(--miel);border-radius:10px;padding:26px 30px;text-align:center;background:linear-gradient(160deg,#FCFAF4,#F6E7C0)}
.ct-head{display:flex;align-items:center;justify-content:center;gap:12px;margin-bottom:16px}
.ct-logo{height:34px}
.ct-club{font-family:var(--font-display);font-weight:800;font-size:.8rem;letter-spacing:.16em;text-transform:uppercase;color:var(--miel-fg)}
.ct-otorga,.ct-por{font-size:.8rem;color:var(--tinta-2)}
.ct-nombre{font-family:var(--font-display);font-size:1.9rem;font-weight:800;color:var(--verde-hondo);margin:6px 0 10px;line-height:1.15}
.ct-curso{font-size:1.15rem;color:var(--tinta);margin:6px 0}
.ct-categoria{display:inline-block;font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--salvia-fg);background:var(--salvia-bg);padding:3px 10px;border-radius:99px}
.ct-pie{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;margin-top:24px}
.ct-firma,.ct-datos{flex:1;font-size:.72rem;color:var(--tinta-2)}
.ct-firma b,.ct-datos b{display:block;font-size:.82rem;color:var(--tinta)}
.ct-f-linea{display:block;height:1px;background:var(--tinta-3);margin-bottom:5px}
.ct-datos b{font-family:ui-monospace,monospace}
.ct-qr{width:82px;height:82px;flex-shrink:0;background:#fff;border-radius:8px;padding:4px;display:grid;place-items:center;font-size:.6rem;color:var(--tinta-3)}
.ct-qr img{width:100%;height:auto;image-rendering:pixelated}

@media(max-width:880px){
  .bib-grid{grid-template-columns:1fr 1fr;gap:10px}
  .bib-body{padding:11px}
  .bib-body h3{font-size:.9rem}
  .h-box--lg{padding:18px 14px}
  .cert-lista{grid-template-columns:1fr}
  .cert-acciones{flex-direction:row}
  .web-card{flex-direction:column;align-items:stretch}
  .web-fecha{flex-direction:row;justify-content:center;gap:8px;min-width:0}
  .web-acciones .btn-verde,.web-acciones .h-btn{flex:1;justify-content:center}
  .prog-logros{grid-template-columns:1fr}
  .ct-marco{padding:16px}
  .ct-nombre{font-size:1.3rem}
  .ct-pie{flex-direction:column;align-items:center;gap:12px}
  .mat-card{flex-wrap:wrap}
}
@media(max-width:420px){ .bib-grid{grid-template-columns:1fr} }

/* ═══ APOYOS DE GOBIERNO ═══ */
.apoyos-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:16px;align-items:start}

.apoyo-card{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:22px;display:flex;flex-direction:column;gap:14px;border-top:4px solid var(--ap-color,var(--verde))}
.ap-head{display:flex;align-items:flex-start;gap:13px}
.ap-ico{width:48px;height:48px;border-radius:14px;display:grid;place-items:center;font-size:1.5rem;flex-shrink:0;background:color-mix(in srgb,var(--ap-color,var(--verde)) 14%,#fff)}
.ap-id{min-width:0}
.ap-id h3{font-size:1.05rem;line-height:1.25}
.ap-inst{display:block;font-size:.78rem;font-weight:600;color:var(--tinta-3);margin-top:3px}

.ap-monto{background:var(--crema);border-radius:var(--r-md);padding:12px 14px}
.ap-monto-lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:3px}
.ap-monto strong{font-family:var(--font-display);font-size:.95rem;font-weight:700;color:var(--verde-hondo);line-height:1.3}

.ap-desc{font-size:.89rem;color:var(--tinta-2);line-height:1.5}

.ap-req-lbl{display:block;font-size:.7rem;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:var(--tinta-3);margin-bottom:6px}
.ap-req ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.ap-req li{position:relative;padding-left:16px;font-size:.85rem;color:var(--tinta-2);line-height:1.45}
.ap-req li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--ap-color,var(--verde))}

.ap-foot{margin-top:auto;padding-top:14px;border-top:1px solid rgba(51,53,45,.08);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.ap-fecha{font-size:.76rem;font-weight:600;color:var(--tinta-3);background:var(--crema);padding:5px 10px;border-radius:99px;cursor:default}
.ap-fecha--sin{color:var(--naranja)}
.ap-cta{background:var(--verde);color:#fff;font-weight:700;font-size:.85rem;padding:9px 16px;border-radius:99px;text-decoration:none;white-space:nowrap;transition:background .15s,transform .15s}
.ap-cta:hover{background:var(--verde-hi);transform:translateY(-1px)}

/* Estados: cargando / sin sesión / error / vacío — nunca datos viejos */
.ap-estado{grid-column:1/-1;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:48px 30px;text-align:center;max-width:520px;margin:20px auto}
.ap-estado-emoji{font-size:2.4rem;display:block;margin-bottom:12px}
.ap-estado h3{font-size:1.2rem;margin-bottom:6px}
.ap-estado p{color:var(--tinta-2);font-size:.93rem}
.ap-estado button{margin-top:16px;background:var(--verde);color:#fff;border:none;font-weight:700;font-size:.88rem;padding:10px 20px;border-radius:99px;cursor:pointer}
.ap-estado button:hover{background:var(--verde-hi)}

/* ═══ MERCADO PECUARIO ═══ */
/* La nota honesta: se lee antes de la primera cifra, con peso visual
   propio para que no pase por letra chica de contrato. */
.mk-nota{background:var(--lila-bg);border-left:4px solid var(--lila-fg);border-radius:var(--r-md);
  padding:13px 16px;font-size:.85rem;color:#5C4356;line-height:1.5;margin-bottom:18px;max-width:74ch}
.mk-sello{font-size:.76rem;font-weight:600;color:var(--tinta-3);background:var(--panel);
  padding:7px 13px;border-radius:99px;white-space:nowrap;box-shadow:var(--shadow-card)}

.mk-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr));gap:14px;align-items:start}

.mk-card{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);
  padding:16px 17px;display:flex;flex-direction:column;gap:12px}
.mk-top{display:flex;align-items:flex-start;gap:11px}
.mk-emoji{width:40px;height:40px;border-radius:12px;display:grid;place-items:center;
  font-size:1.25rem;flex-shrink:0;background:var(--crema)}
.mk-id{min-width:0}
.mk-id h3{font-size:.95rem;line-height:1.25}
.mk-det{display:block;font-size:.75rem;color:var(--tinta-3);margin-top:2px}

.mk-cifra{display:flex;align-items:flex-end;justify-content:space-between;gap:10px}
.mk-precio{font-family:var(--font-display);font-size:1.55rem;font-weight:800;line-height:1;
  color:var(--tinta);white-space:nowrap}
.mk-signo{font-size:.95rem;font-weight:700;color:var(--tinta-3);margin-right:1px}
.mk-unidad{font-family:var(--font-body);font-size:.72rem;font-weight:600;color:var(--tinta-3);margin-left:2px}
.mk-spark{flex-shrink:0;opacity:.9}
.mk-sin-spark{font-size:.7rem;color:var(--tinta-3);font-style:italic}

.mk-pie{display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding-top:11px;border-top:1px solid rgba(51,53,45,.08)}
.mk-delta{font-size:.82rem;font-weight:700;padding:3px 9px;border-radius:99px;cursor:default}
.mk-delta--sube{background:var(--salvia-bg);color:var(--salvia-fg)}
.mk-delta--baja{background:var(--coral-bg);color:var(--coral-fg)}
.mk-ventana{font-size:.68rem;color:var(--tinta-3);letter-spacing:.02em}

/* Estados: cargando / sin sesión / error / vacío / sin resultados */
.mk-estado{grid-column:1/-1;background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);
  padding:44px 30px;text-align:center;max-width:520px;margin:16px auto}
.mk-estado-emoji{font-size:2.3rem;display:block;margin-bottom:11px}
.mk-estado h3{font-size:1.15rem;margin-bottom:6px}
.mk-estado p{color:var(--tinta-2);font-size:.92rem}
.mk-estado button{margin-top:16px;background:var(--verde);color:#fff;border:none;font-weight:700;
  font-size:.88rem;padding:10px 20px;border-radius:99px;cursor:pointer}
.mk-estado button:hover{background:var(--verde-hi)}

/* ═══ EN CONSTRUCCIÓN ═══ */
.wip{background:var(--panel);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:56px 30px;text-align:center;max-width:560px;margin:40px auto}
.wip .w-emoji{font-size:2.6rem;display:block;margin-bottom:14px}
.wip h2{font-size:1.5rem;margin-bottom:8px}
.wip p{color:var(--tinta-2);font-size:.97rem;margin-bottom:8px}
.wip .w-tag{display:inline-block;background:var(--miel-bg);color:var(--miel-fg);font-weight:700;font-size:.78rem;letter-spacing:.06em;padding:6px 14px;border-radius:99px;margin-bottom:16px}
.wip a{color:var(--verde);font-weight:700}

/* ═══ BANNER VITRINA (modo Explorador) ═══ */
.vitrina{display:flex;align-items:center;gap:16px;background:var(--miel-bg);border:1.5px solid rgba(166,122,31,.25);border-radius:var(--r-md);padding:16px 20px;margin-bottom:20px;flex-wrap:wrap}
.vitrina .v-ico{font-size:1.6rem}
.vitrina .v-txt{flex:1;min-width:220px}
.vitrina strong{display:block;color:var(--miel-fg);font-size:.95rem}
.vitrina span{font-size:.87rem;color:#6E5320}
.vitrina button{background:var(--miel);color:#fff;border:none;font-weight:700;font-size:.88rem;padding:10px 18px;border-radius:99px;cursor:pointer}
.vitrina button:hover{background:#C08A24}

/* ═══ MODAL VIP ═══ */
.modal-vip{position:fixed;inset:0;z-index:900;background:rgba(20,32,18,.6);backdrop-filter:blur(6px);display:none;align-items:center;justify-content:center;padding:20px}
.modal-vip.active{display:flex}
.mv-box{background:var(--panel);border-radius:var(--r-lg);max-width:430px;width:100%;padding:30px 28px;position:relative;box-shadow:0 40px 90px -30px rgba(0,0,0,.5)}
.mv-close{position:absolute;top:14px;right:14px;background:var(--crema-2);border:none;width:34px;height:34px;border-radius:50%;font-size:.95rem;cursor:pointer;color:var(--tinta)}
.mv-box h3{font-size:1.35rem;margin-bottom:6px}
.mv-box .mv-sub{color:var(--tinta-2);font-size:.94rem;margin-bottom:20px}
.mv-plan{width:100%;display:flex;justify-content:space-between;align-items:center;gap:10px;border:2px solid var(--crema-2);background:var(--panel);border-radius:var(--r-md);padding:15px 18px;cursor:pointer;margin-bottom:10px;text-align:left;transition:border-color .15s}
.mv-plan:hover{border-color:var(--verde)}
.mv-plan strong{font-size:.98rem;display:block}
.mv-plan small{color:var(--tinta-2);font-size:.8rem}
.mv-plan .mv-precio{font-family:var(--font-display);font-weight:800;font-size:1.15rem;white-space:nowrap}
.mv-plan--anual{border-color:var(--miel);background:var(--miel-bg)}
.mv-plan--anual:hover{border-color:#C08A24}
.mv-plan--anual .mv-precio{color:var(--miel-fg)}
.mv-plan:disabled{opacity:.62;cursor:wait;pointer-events:none}
.mv-payment-error{display:flex;flex-direction:column;gap:7px;margin:12px 0 4px;padding:12px 14px;border:1px solid rgba(166,71,48,.2);border-radius:14px;background:#FFF2ED;color:#743522;font-size:.84rem;line-height:1.45}
.mv-payment-error[hidden]{display:none}
.mv-payment-error strong{font-size:.9rem}
.mv-payment-error a{align-self:flex-start;color:#743522;font-weight:800;text-decoration:underline;text-underline-offset:3px}
.mv-mini{text-align:center;font-size:.78rem;color:var(--tinta-3);margin-top:8px}

/* Avisos temporales. La opacidad/visibilidad evita que el contenedor vacío
   asome sobre la navegación móvil cuando no hay ningún mensaje activo. */
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(14px);opacity:0;visibility:hidden;pointer-events:none;background:var(--tinta);color:var(--crema);padding:13px 24px;border-radius:14px;font-weight:600;font-size:.92rem;z-index:9999;transition:transform .22s ease,opacity .22s ease,visibility 0s linear .22s;max-width:92vw;text-align:center}
.toast:empty{display:none}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1;visibility:visible;pointer-events:auto;transition-delay:0s}

/* ═══ RESPONSIVE ═══ */
@media(max-width:880px){
  .sidebar{position:fixed;left:0;top:0;bottom:0;z-index:200;transform:translateX(-105%);transition:transform .28s ease;box-shadow:30px 0 60px -30px rgba(0,0,0,.5)}
  .sidebar.open{transform:none}
  .sb-overlay{display:block;position:fixed;inset:0;z-index:190;background:rgba(20,32,18,.5);opacity:0;visibility:hidden;transition:.25s}
  .sb-overlay.active{opacity:1;visibility:visible}
  .tb-burger{display:block}
  .topbar{padding:10px 16px}
  .tb-vip span{display:none}
  .content{padding:18px 16px}
  .stats-row{grid-template-columns:repeat(2,1fr)}
  .ia-banner{flex-direction:column;align-items:flex-start;gap:14px}
  .ia-cta{width:100%;text-align:center}
  .sec-hero{min-height:112px}
  .sec-hero .greet{padding:18px 20px}

  /* Mi Hato en móvil: la tabla se vuelve tarjetas apiladas */
  .h-barra{flex-direction:column;align-items:stretch}
  .h-barra .btn-verde{width:100%}
  .h-chips{overflow-x:auto;flex-wrap:nowrap;padding-bottom:4px;-webkit-overflow-scrolling:touch}
  .h-chip{flex-shrink:0}
  .h-tabla-wrap{background:none;box-shadow:none;border-radius:0}
  .h-tabla,.h-tabla tbody,.h-tabla tr,.h-tabla td{display:block;width:100%}
  .h-tabla thead{display:none}
  .h-tabla tr{background:var(--panel);border-radius:var(--r-md);box-shadow:var(--shadow-card);padding:14px;margin-bottom:10px;position:relative}
  .h-tabla tbody tr:hover{background:var(--panel)}
  .h-tabla td{border:none;padding:3px 0}
  .h-animal{margin-bottom:8px;padding-right:84px}
  .h-id strong{max-width:none}
  .h-col-tipo,.h-col-raza,.h-col-edad{display:inline-block!important;width:auto;font-size:.8rem;color:var(--tinta-3)}
  .h-col-tipo::after,.h-col-raza::after{content:"·";margin:0 6px;opacity:.5}
  .h-col-peso{margin-top:8px}
  .h-peso{min-width:0}
  .h-acciones{position:absolute;top:14px;right:14px}
  .h-estado{padding:40px 20px}
  .h-box{padding:22px 18px}
  .h-fila{grid-template-columns:1fr}
  .apoyos-grid{grid-template-columns:1fr;gap:14px}
  .apoyo-card{padding:18px}
  .ap-foot{flex-direction:column;align-items:stretch}
  .ap-fecha{text-align:center}
  .ap-cta{text-align:center}
  .ap-estado{padding:36px 22px}

  .bita-evento{padding:12px 13px}
  .bita-ev-head{flex-direction:column;align-items:flex-start;gap:2px}

  .com-grid{grid-template-columns:1fr 1fr;gap:10px}
  .com-tipos-grid{grid-template-columns:repeat(3,1fr)}
  .com-acciones{flex-direction:column}

  /* Mercado: dos por fila en tablet/móvil y el sello a lo ancho */
  .mk-grid{grid-template-columns:1fr 1fr;gap:10px}
  .mk-card{padding:13px 14px;gap:10px}
  .mk-emoji{width:34px;height:34px;border-radius:10px;font-size:1.05rem}
  .mk-id h3{font-size:.88rem}
  .mk-precio{font-size:1.3rem}
  .mk-sello{width:100%;text-align:center;white-space:normal}
  .mk-estado{padding:34px 22px}

  .sop-contactos{grid-template-columns:1fr}
  .sop-guias{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){
  .com-grid{grid-template-columns:1fr}
  .sop-guias{grid-template-columns:1fr}
  /* Abajo de 520px la tarjeta de precio ya no cabe en dos columnas
     sin partir el número: una por fila, con el sparkline a la derecha. */
  .mk-grid{grid-template-columns:1fr}
  .mk-precio{font-size:1.45rem}
}

/* ═══════════════════════════════════════════════════════════
   EXPERIENCIA MÓVIL TIPO APP
   Navegación inferior, áreas seguras y controles táctiles.
   ═══════════════════════════════════════════════════════════ */
.tb-mobile-brand,
.mobile-dock{display:none}

@media(max-width:880px){
  html{scroll-padding-top:74px}
  body{
    min-width:0;
    overflow-x:hidden;
    -webkit-text-size-adjust:100%;
    overscroll-behavior-y:contain;
  }
  body.nav-open{overflow:hidden}
  .app{min-height:100dvh}
  .sidebar{
    width:min(86vw,330px);
    height:100dvh;
    padding-top:env(safe-area-inset-top);
    padding-bottom:calc(80px + env(safe-area-inset-bottom));
    overscroll-behavior:contain;
    scrollbar-width:none;
    border-radius:0 26px 26px 0;
    background:linear-gradient(180deg,#2E4A2A 0%,#294526 100%);
    box-shadow:26px 0 70px -28px rgba(13,28,14,.7);
  }
  .sidebar::-webkit-scrollbar{display:none}
  .sb-brand{padding:18px 18px 12px}
  .sb-brand-chip{border-radius:13px;padding:7px 11px;box-shadow:0 10px 24px -18px rgba(0,0,0,.8)}
  .sb-user{margin:4px 14px 12px;padding:11px;border:1px solid rgba(245,239,228,.06)}
  .sb-nav{padding:0 12px 10px}
  .sb-label{padding:16px 10px 7px;font-size:.66rem}
  .sb-item{padding:9px 11px;border-radius:14px}
  .sb-item.active{box-shadow:0 12px 28px -22px rgba(0,0,0,.8)}
  .sb-cta{margin:14px 12px 24px}
  .sb-overlay{backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
  .sb-item,
  .sb-cta button{min-height:44px;touch-action:manipulation}
  .topbar{
    min-height:64px;
    padding:
      max(10px,env(safe-area-inset-top))
      max(14px,env(safe-area-inset-right))
      10px
      max(14px,env(safe-area-inset-left));
    gap:9px;
    z-index:70;
    background:rgba(252,250,244,.96);
    border-bottom-color:rgba(46,74,42,.08);
    box-shadow:0 10px 28px -26px rgba(24,45,29,.55);
  }
  .tb-burger{
    width:44px;
    height:44px;
    padding:9px 10px;
    flex:0 0 44px;
    touch-action:manipulation;
    border-radius:14px;
    transition:background .16s,transform .16s;
  }
  .tb-burger:active{background:var(--crema-2);transform:scale(.96)}
  .tb-mobile-brand{
    display:block;
    min-width:0;
    overflow:hidden;
    text-overflow:ellipsis;
    font-family:var(--font-display);
    font-size:1rem;
    font-weight:800;
    color:var(--verde-hondo);
    letter-spacing:-.02em;
    white-space:nowrap;
  }
  .tb-search{min-width:0}
  .tb-actions{gap:7px}
  .tb-vip,
  .tb-install,
  .tb-out{
    min-height:42px;
    touch-action:manipulation;
  }
  .tb-install{padding:0 11px;font-size:.74rem}
  .tb-vip{width:42px;padding:0;justify-content:center}
  .tb-out{background:rgba(252,250,244,.72);border-color:rgba(46,74,42,.16)}
  .content{
    padding:14px max(14px,env(safe-area-inset-right))
      calc(104px + env(safe-area-inset-bottom))
      max(14px,env(safe-area-inset-left));
  }
  .section{scroll-margin-top:74px}
  .mobile-dock{
    position:fixed;
    z-index:180;
    left:max(8px,env(safe-area-inset-left));
    right:max(8px,env(safe-area-inset-right));
    bottom:max(10px,env(safe-area-inset-bottom));
    display:grid;
    grid-template-columns:repeat(5,minmax(0,1fr));
    min-height:70px;
    padding:6px;
    border:1px solid rgba(46,74,42,.1);
    border-radius:23px;
    background:rgba(252,250,244,.97);
    box-shadow:0 18px 48px rgba(24,45,29,.2),0 2px 8px rgba(24,45,29,.06);
    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);
    isolation:isolate;
  }
  .mobile-dock__item{
    min-width:0;
    min-height:56px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:1px;
    border:0;
    border-radius:17px;
    background:transparent;
    color:var(--tinta-3);
    cursor:pointer;
    touch-action:manipulation;
    transition:background .16s,color .16s,transform .16s;
  }
  .mobile-dock__item:active{transform:scale(.96)}
  .mobile-dock__item>span{font-size:1.12rem;line-height:1}
  .mobile-dock__item>small{
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    font-size:.65rem;
    font-weight:750;
    line-height:1.25;
    white-space:nowrap;
  }
  .mobile-dock__item.active{
    color:var(--verde-hondo);
    background:linear-gradient(145deg,#E1ECD4,#D5E5C5);
    box-shadow:inset 0 0 0 1px rgba(78,139,62,.05);
  }
  .mobile-dock__item.active>span{filter:drop-shadow(0 3px 5px rgba(46,74,42,.2))}

  .ia-banner{
    display:grid;
    grid-template-columns:52px minmax(0,1fr);
    align-items:start;
    gap:8px 12px;
    padding:18px;
    margin-bottom:14px;
    border:1px solid rgba(208,110,44,.08);
    border-radius:21px;
  }
  .ia-banner::before{right:-86px;top:-92px;width:220px;height:220px}
  .ia-ico{grid-column:1;grid-row:1 / span 2;width:52px;height:52px;border-radius:15px;font-size:1.55rem}
  .ia-txt{display:contents}
  .ia-txt .star{grid-column:2;grid-row:1;justify-self:start;margin:0;padding:4px 8px;font-size:.58rem;letter-spacing:.055em}
  .ia-txt h2{grid-column:2;grid-row:2;align-self:start;font-size:1.12rem;line-height:1.18;margin:0}
  .ia-txt p{grid-column:1/-1;grid-row:3;font-size:.82rem;line-height:1.45;margin-top:3px}
  .ia-cta{grid-column:1/-1;grid-row:4;width:100%;min-height:46px;margin-top:4px;text-align:center;font-size:.9rem}
  .casco-hero,
  .sec-hero{border-radius:20px}
  .casco-hero{min-height:132px;margin-bottom:16px}
  .stats-row{gap:10px;margin-bottom:20px}
  .stat-card{min-width:0;min-height:118px;padding:15px 13px;border-radius:18px}
  .stat-card b{font-size:1.34rem}
  .stat-card span:last-child{font-size:.76rem;line-height:1.35}
  .casco-section-head{margin:22px 0 12px}
  .casco-section-head--tools{margin-top:28px;padding-top:20px}
  .tools-grid,
  .tools-grid--learning{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:10px;
  }
  .tool-card{min-width:0;min-height:132px;padding:16px 14px;border-radius:18px;touch-action:manipulation}
  .tool-card--cursos{grid-column:1/-1;min-height:122px}
  .tool-card h4{font-size:.92rem;overflow-wrap:anywhere}
  .tool-card p{font-size:.76rem;line-height:1.4}
  .t-emoji{font-size:1.35rem}

  .h-campo input,
  .h-campo select,
  .h-campo textarea,
  .h-buscar input,
  .tb-search input{font-size:16px}
  .btn-verde,
  .h-btn,
  .h-btn-sec,
  .h-btn-del,
  .h-chip,
  .ap-cta,
  .com-btn-wa{min-height:44px;touch-action:manipulation}
  .h-modal,
  .modal-vip{align-items:flex-end;padding:10px 8px 0}
  .h-box,
  .mv-box{
    width:100%;
    max-height:calc(100dvh - 18px - env(safe-area-inset-top));
    overflow-y:auto;
    overscroll-behavior:contain;
    margin:0;
    padding:24px 18px max(22px,env(safe-area-inset-bottom));
    border-radius:24px 24px 0 0;
  }
  .h-close,
  .mv-close{width:42px;height:42px;touch-action:manipulation}
  .h-confirm-btns{gap:8px}
  .h-confirm-btns>*{flex:1;justify-content:center}
  .vitrina{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:start;padding:14px;gap:6px 10px;margin-bottom:14px;border-radius:20px}
  .vitrina .v-ico{grid-column:1;grid-row:1;font-size:1.45rem;text-align:center}
  .vitrina .v-txt{grid-column:2;grid-row:1;min-width:0}
  .vitrina strong{font-size:.88rem;line-height:1.3}
  .vitrina span{font-size:.8rem;line-height:1.4}
  .vitrina button{grid-column:1/-1;width:100%;min-height:44px;margin-top:6px}
  .cert-tpl{overflow-x:auto;-webkit-overflow-scrolling:touch}
  .toast{bottom:calc(94px + env(safe-area-inset-bottom));width:max-content;max-width:calc(100vw - 28px);padding:11px 17px;border-radius:13px;font-size:.84rem;box-shadow:0 12px 30px rgba(24,45,29,.24)}
}
@media(max-width:420px){
  .tb-mobile-brand{font-size:.92rem}
  .tb-vip{display:none}
  .tb-install{padding-inline:10px}
  .tb-out{padding-inline:11px}
}

@media(max-width:600px){
  .tb-search{display:none}
  .tb-mobile-brand{flex:1}
  .topbar{gap:7px}
  .content{
    padding-left:max(12px,env(safe-area-inset-left));
    padding-right:max(12px,env(safe-area-inset-right));
  }
  .casco-hero .greet,
  .sec-hero .greet{padding:17px 18px}
  .casco-hero .greet h1,
  .sec-hero .greet h1{font-size:1.35rem}
  .casco-hero .greet p,
  .sec-hero .greet p{font-size:.88rem;line-height:1.4}
  .casco-section-head p{font-size:.85rem}
  .web-acciones,
  .cert-acciones{width:100%}
  .web-acciones>*,
  .cert-acciones>*{flex:1;justify-content:center}
  .mat-card{padding:14px}
  .sop-seccion-head{align-items:flex-start}
  .sop-membresia-card{align-items:stretch;flex-direction:column;padding:16px}
  .sop-btn-cancelar{width:100%;min-height:46px}
  .mv-plan{min-height:64px}
  .mv-payment-error a{display:flex;align-items:center;min-height:44px}
}

@media(max-width:380px){
  .tb-mobile-brand{font-size:.88rem}
  .tb-out{padding-inline:11px;font-size:.78rem}
  .mobile-dock{left:6px;right:6px;padding:5px;border-radius:20px}
  .mobile-dock__item>small{font-size:.6rem}
  .content{padding-inline:10px}
  .ia-banner{grid-template-columns:48px minmax(0,1fr);padding:16px 15px;gap:7px 10px}
  .ia-ico{width:48px;height:48px}
  .ia-txt h2{font-size:1.06rem}
  .stats-row{gap:8px}
  .stat-card{min-height:114px;padding:14px 10px}
  .tool-card{padding:15px 12px}
  .com-tipos-grid{grid-template-columns:repeat(2,1fr)}
}

@media(display-mode:standalone) and (max-width:880px){
  .topbar{padding-top:max(12px,env(safe-area-inset-top))}
  .mobile-dock{bottom:max(6px,env(safe-area-inset-bottom))}
}