/* =====================================================================
   Patitas a Casa · Sistema de diseño
   Paleta extraída del logo oficial "Patitas a Casa": verde bosque
   profundo (#0B3E3B), verde medalla (#215452) y dorado cálido del
   pelaje del perrito (#D0AD70). Mobile-first: base = celular.
===================================================================== */
:root{
  --petrol:#215452; --petrol-osc:#0B3E3B; --petrol-cla:#3E706C;
  --petrol-suave:#E3EBE9;
  --menta:#A9C9B4; --menta-suave:#EBF3EE;
  --bronce:#D0AD70; --bronce-osc:#9C7C46; --bronce-suave:#F5EEDD;
  --dorado:#D0AD70; --dorado-osc:#9C7C46; --dorado-suave:#F5EEDD;
  --verde:#2E7D5B; --verde-suave:#E3F0EA;
  --rojo:#AE3B2C; --rojo-suave:#F8E7E4;
  --morado:#6B5B95; --morado-suave:#EDEAF3;
  --fondo:#F0F3F2; --blanco:#FFFFFF;
  --tinta:#18292A; --tinta-60:rgba(24,41,42,.64); --tinta-40:rgba(24,41,42,.40);
  --tinta-25:rgba(24,41,42,.22); --borde:#D7E0DE;
  --r:14px; --r-sm:10px; --r-lg:20px;
  --sombra:0 1px 2px rgba(11,62,59,.06),0 8px 24px rgba(11,62,59,.09);
  --sombra-alta:0 12px 40px rgba(11,62,59,.18);
  --display:"Archivo",system-ui,sans-serif;
  --cuerpo:"IBM Plex Sans",system-ui,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,monospace;
  --tap:46px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{font-family:var(--cuerpo);background:var(--fondo);color:var(--tinta);line-height:1.55;min-height:100vh;overflow-x:hidden}
button,input,select,textarea{font-family:inherit}
button{cursor:pointer;-webkit-tap-highlight-color:transparent}
img{display:block;max-width:100%}
a{color:var(--petrol)}
:focus-visible{outline:3px solid var(--menta);outline-offset:2px;border-radius:6px}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}}
.oculto{display:none!important}

/* ---------------- TOPBAR ---------------- */
.topbar{position:sticky;top:0;z-index:60;background:var(--petrol);color:#fff;
  min-height:58px;display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:8px max(14px,env(safe-area-inset-left));box-shadow:0 2px 14px rgba(11,62,59,.3)}
.logo{display:flex;align-items:center;gap:10px;color:inherit;text-decoration:none;min-width:0}
.logo-img{width:44px;height:44px;flex:0 0 44px;border-radius:50%;background:var(--petrol-osc);
  box-shadow:0 0 0 2px var(--bronce)}
.logo-txt{font-family:var(--display);font-weight:800;font-size:18px;letter-spacing:.2px;
  font-variation-settings:"wdth" 110;white-space:nowrap;display:block}
.logo-txt .alert{color:var(--menta)}
.logo-sub{display:block;font-family:var(--mono);font-size:7.5px;letter-spacing:1px;
  color:rgba(255,255,255,.62);margin-top:-2px;text-transform:uppercase;white-space:nowrap}
.top-derecha{display:flex;align-items:center;gap:6px;flex-shrink:0}
.motor-pill{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:9px;
  letter-spacing:.3px;background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);
  padding:6px 8px;border-radius:99px}
.motor-txt{display:none}
.motor-dot{width:9px;height:9px;border-radius:50%;background:#A9C9B4;animation:latido 2.4s infinite}
@keyframes latido{0%{box-shadow:0 0 0 0 rgba(169,201,180,.5)}70%{box-shadow:0 0 0 8px rgba(169,201,180,0)}100%{box-shadow:0 0 0 0 rgba(169,201,180,0)}}
.motor-dot.pensando{background:var(--dorado);animation:latido .8s infinite}
.chip-modo{font-family:var(--mono);font-size:8px;letter-spacing:.5px;padding:4px 8px;border-radius:99px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.2);text-transform:uppercase;white-space:nowrap}
.chip-modo.bd{background:var(--menta);color:var(--petrol-osc);border-color:var(--menta)}

/* ---------------- NAV DE MÓDULOS ---------------- */
.nav-modulos{background:var(--petrol-osc);display:flex;gap:2px;overflow-x:auto;
  scrollbar-width:none;padding:0 8px;position:sticky;top:58px;z-index:55}
.nav-modulos::-webkit-scrollbar{display:none}
.nav-modulos a{flex-shrink:0;color:rgba(255,255,255,.72);text-decoration:none;
  font-size:12.5px;font-weight:600;padding:11px 13px;border-bottom:3px solid transparent;
  display:flex;align-items:center;gap:6px;white-space:nowrap;transition:.15s}
.nav-modulos a:hover{color:#fff;background:rgba(255,255,255,.06)}
.nav-modulos a.activo{color:#fff;border-bottom-color:var(--dorado)}
.nav-modulos a .ico{font-size:14px}

/* ---------------- LAYOUT ---------------- */
.contenedor{max-width:1280px;margin:0 auto;padding:16px 14px calc(80px + env(safe-area-inset-bottom))}
.grid-2{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
.grid-auto{display:grid;grid-template-columns:1fr;gap:14px}
.pila{display:flex;flex-direction:column;gap:16px;min-width:0}

.tarjeta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);padding:18px}
.tarjeta.plano{padding:0;overflow:hidden}
.tarjeta h2,.titulo-seccion{font-family:var(--display);font-weight:700;font-size:12.5px;
  text-transform:uppercase;letter-spacing:1.4px;color:var(--petrol);margin-bottom:12px;
  font-variation-settings:"wdth" 112;display:flex;align-items:center;gap:8px}
.cab-modulo{background:var(--petrol);color:#fff;padding:14px 18px;display:flex;
  justify-content:space-between;align-items:center;flex-wrap:wrap;gap:6px}
.cab-modulo h2{font-family:var(--display);font-weight:700;font-size:16px;color:#fff;
  margin:0;text-transform:none;letter-spacing:0;font-variation-settings:"wdth" 108}
.cab-modulo span{font-family:var(--mono);font-size:9px;letter-spacing:.6px;
  color:rgba(255,255,255,.68);text-transform:uppercase}

/* hero */
.hero{display:flex;gap:14px;align-items:center}
.hero-logo{width:82px;height:82px;flex:0 0 82px;border-radius:50%;box-shadow:var(--sombra)}
.hero h1{font-family:var(--display);font-weight:800;font-size:clamp(19px,5vw,25px);
  line-height:1.14;letter-spacing:-.3px;font-variation-settings:"wdth" 105}
.hero h1 em{font-style:normal;color:var(--dorado-osc)}
.hero p{margin-top:7px;color:var(--tinta-60);font-size:13.5px}

/* franja de datos */
.franja{background:var(--petrol-osc);color:rgba(255,255,255,.85);font-family:var(--mono);
  font-size:10.5px;letter-spacing:.3px;padding:8px 14px;display:flex;gap:22px;
  overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.franja::-webkit-scrollbar{display:none}
.franja b{color:var(--menta);font-weight:600}

/* ---------------- FORMULARIOS ---------------- */
.form-grid{display:grid;grid-template-columns:1fr;gap:14px;padding:18px}
.campo{display:flex;flex-direction:column;gap:6px;min-width:0}
.campo label{font-size:12.5px;font-weight:600;color:var(--petrol);letter-spacing:.2px}
.campo label .req{color:var(--rojo)}
.campo input,.campo select,.campo textarea{border:1.5px solid var(--borde);border-radius:var(--r-sm);
  padding:12px 13px;font-size:16px;background:var(--fondo);color:var(--tinta);width:100%;min-height:var(--tap)}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--petrol);background:#fff}
.campo textarea{resize:vertical;min-height:92px}
.campo small{font-size:11.5px;color:var(--tinta-60)}
.campo.ancho{grid-column:1/-1}
.fila-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.segmento{display:flex;border:1.5px solid var(--borde);border-radius:var(--r-sm);overflow:hidden}
.segmento button{flex:1;border:none;background:var(--fondo);padding:12px 8px;font-weight:600;
  font-size:13.5px;color:var(--tinta-60);transition:.15s;min-height:var(--tap)}
.segmento button.on-perdido{background:var(--dorado);color:var(--petrol-osc)}
.segmento button.on-encontrado{background:var(--verde);color:#fff}
.segmento button.on{background:var(--petrol);color:#fff}

/* botones */
.btn{border:none;border-radius:var(--r-sm);padding:13px 20px;font-weight:600;font-size:14.5px;
  min-height:var(--tap);transition:transform .12s,filter .15s,box-shadow .15s;width:100%;
  display:inline-flex;align-items:center;justify-content:center;gap:7px;text-decoration:none}
.btn:active{transform:scale(.98)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn-petrol{background:var(--petrol);color:#fff}
.btn-petrol:hover:not(:disabled){background:var(--petrol-osc);box-shadow:0 5px 14px rgba(11,62,59,.3)}
.btn-dorado{background:var(--dorado);color:var(--petrol-osc)}
.btn-dorado:hover:not(:disabled){filter:brightness(.95)}
.btn-verde{background:var(--verde);color:#fff}
.btn-linea{background:transparent;border:1.5px solid var(--borde);color:var(--tinta-60)}
.btn-linea:hover{border-color:var(--petrol);color:var(--petrol)}
.btn-sm{padding:9px 14px;font-size:12.5px;min-height:38px;width:auto}
.acciones{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--borde);padding-top:14px}
.nota-ia{font-family:var(--mono);font-size:10px;color:var(--tinta-60);display:flex;align-items:center;gap:6px}
.pensando::after{content:"";animation:puntos 1.2s steps(4) infinite}
@keyframes puntos{0%{content:""}25%{content:"."}50%{content:".."}75%{content:"..."}}

/* ---------------- MOTOR VISIÓN: dropzone, preview, ficha ---------------- */
.zona-foto{border:2px dashed var(--tinta-25);border-radius:var(--r-sm);padding:22px 14px;
  text-align:center;cursor:pointer;transition:.2s;background:var(--fondo)}
.zona-foto:hover,.zona-foto.encima{border-color:var(--petrol);background:var(--menta-suave)}
.zona-foto p{font-family:var(--display);font-weight:700;font-size:15px;margin-top:4px}
.zona-foto small{color:var(--tinta-60);font-size:12px}
.preview-marco{position:relative;border-radius:var(--r-sm);overflow:hidden;background:var(--petrol-osc);max-height:340px}
.preview-marco img{width:100%;max-height:340px;object-fit:contain}
.scanner{position:absolute;inset:0;display:none;background:rgba(11,62,59,.5)}
.scanner.activo{display:block}
.linea-scan{position:absolute;left:0;right:0;height:3px;background:var(--menta);
  box-shadow:0 0 20px 4px rgba(169,201,180,.85);animation:barrido 1.6s ease-in-out infinite}
@keyframes barrido{0%{top:2%}50%{top:96%}100%{top:2%}}
.scanner-txt{position:absolute;bottom:10px;left:10px;right:10px;font-family:var(--mono);font-size:10px;
  color:var(--menta);background:rgba(11,62,59,.9);padding:6px 9px;border-radius:6px;line-height:1.5}
.retro-scan{position:absolute;top:10px;left:10px;font-family:var(--mono);font-size:9px;color:#fff;
  background:rgba(11,62,59,.85);padding:4px 8px;border-radius:99px}
.ficha-ia{border-radius:var(--r-sm);padding:15px 16px;font-size:13.5px;animation:entra .35s ease}
.ficha-ia.ok{background:var(--verde-suave);border:1.5px solid var(--verde)}
.ficha-ia.no{background:var(--rojo-suave);border:1.5px solid var(--rojo)}
.ficha-ia.duda{background:var(--dorado-suave);border:1.5px solid var(--dorado-osc)}
.ficha-ia b.titulo{font-family:var(--display);font-size:14.5px;display:block;margin-bottom:8px;
  font-variation-settings:"wdth" 106}
.ficha-ia.ok b.titulo{color:var(--verde)}
.ficha-ia.no b.titulo{color:var(--rojo)}
.ficha-ia.duda b.titulo{color:var(--dorado-osc)}
.ficha-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px 14px;margin-top:4px}
.ficha-grid .dato b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tinta-60);font-weight:600}
.ficha-ia .meta{font-family:var(--mono);font-size:9.5px;color:var(--tinta-60);margin-top:10px;letter-spacing:.3px}
.barra-conf{height:6px;background:rgba(0,0,0,.09);border-radius:99px;overflow:hidden;margin-top:8px}
.barra-conf i{display:block;height:100%;background:var(--verde);border-radius:99px;transition:width .6s ease}
.barra-conf i.medio{background:var(--dorado)} .barra-conf i.bajo{background:var(--rojo)}
@keyframes entra{from{opacity:0;transform:translateY(8px)}to{opacity:1}}

/* ---------------- BADGES / CHIPS ---------------- */
.badge{font-family:var(--display);font-weight:800;font-size:11px;letter-spacing:1.1px;padding:6px 12px;
  border-radius:6px;text-transform:uppercase;font-variation-settings:"wdth" 115;display:inline-block}
.badge.perdido{background:var(--dorado);color:var(--petrol-osc)}
.badge.encontrado{background:var(--verde);color:#fff}
.badge.activo{background:var(--verde);color:#fff}
.badge.inactivo{background:var(--tinta-40);color:#fff}
.badge.alerta{background:var(--rojo);color:#fff}
.etiqueta{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;
  padding:4px 10px;border-radius:99px;background:var(--petrol-suave);color:var(--petrol)}
.etiqueta.rojo{background:var(--rojo-suave);color:var(--rojo)}
.etiqueta.dorado{background:var(--dorado-suave);color:var(--dorado-osc)}
.etiqueta.verde{background:var(--verde-suave);color:var(--verde)}
.etiqueta.morado{background:var(--morado-suave);color:var(--morado)}
.sello-ia{font-family:var(--mono);font-size:9px;letter-spacing:.4px;color:var(--verde);
  background:var(--verde-suave);border:1px solid rgba(46,125,91,.3);padding:4px 8px;
  border-radius:99px;white-space:nowrap}

/* ---------------- CONTADORES / BITÁCORA ---------------- */
.contadores{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;text-align:center}
.contador{background:var(--fondo);border:1px solid var(--borde);border-radius:var(--r-sm);padding:12px 4px}
.contador .num{font-family:var(--display);font-weight:800;font-size:23px;line-height:1;font-variation-settings:"wdth" 110}
.num.verde{color:var(--verde)} .num.rojo{color:var(--rojo)} .num.azul{color:var(--petrol)} .num.dorado{color:var(--dorado-osc)}
.contador .lbl{font-family:var(--mono);font-size:8.5px;letter-spacing:.3px;color:var(--tinta-60);
  display:block;margin-top:5px;text-transform:uppercase}
.bitacora{font-family:var(--mono);font-size:10.5px;line-height:1.75;max-height:130px;overflow-y:auto;color:var(--tinta-60)}
.bitacora .ok{color:var(--verde)} .bitacora .no{color:var(--rojo)}
.bitacora div{border-bottom:1px dotted var(--borde);padding:3px 0}

/* ---------------- FILTROS ---------------- */
.filtros{display:flex;gap:8px;align-items:center;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.filtros::-webkit-scrollbar{display:none}
.chip{flex-shrink:0;border:1.5px solid var(--borde);background:var(--blanco);border-radius:99px;
  padding:10px 16px;font-size:13px;font-weight:600;color:var(--tinta-60);transition:.15s;min-height:42px}
.chip:hover{border-color:var(--petrol);color:var(--petrol)}
.chip.activo{background:var(--petrol);border-color:var(--petrol);color:#fff}
.filtros select,.filtros input{flex-shrink:0;border:1.5px solid var(--borde);border-radius:99px;
  padding:10px 14px;font-size:14px;background:var(--blanco);min-height:42px}

/* ---------------- TARJETA DE ALERTA ---------------- */
.alerta{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;animation:entra .4s ease}
.alerta-cab{display:flex;align-items:center;gap:10px;padding:12px 16px;flex-wrap:wrap}
.alerta-cab .tit{min-width:0}
.alerta-cab .tit b{font-family:var(--display);font-size:16px;font-variation-settings:"wdth" 105}
.alerta-cab .tit span{display:block;font-size:11.5px;color:var(--tinta-60)}
.alerta-cab .sello-ia{margin-left:auto}
.alerta-media{background:var(--petrol-osc)}
.alerta-media img{width:100%;max-height:340px;object-fit:cover}
.alerta-datos{padding:12px 16px;display:grid;grid-template-columns:1fr 1fr;gap:10px 14px;border-bottom:1px solid var(--borde)}
.alerta-datos .dato b{display:block;font-size:10px;text-transform:uppercase;letter-spacing:.5px;
  color:var(--tinta-60);font-weight:600}
.alerta-datos .dato span{font-size:13px;font-weight:500;word-break:break-word}
.alerta-desc{padding:12px 16px 6px;font-size:14px}
.alerta-acciones{display:flex;gap:6px;padding:8px 12px 10px;flex-wrap:wrap}
.accion{background:none;border:none;border-radius:99px;padding:10px 14px;font-size:13px;font-weight:600;
  color:var(--tinta-60);display:flex;align-items:center;gap:6px;transition:.15s;min-height:42px}
.accion:hover{background:var(--fondo);color:var(--petrol)}
.accion.activo{color:var(--petrol);font-weight:700}
.avistamientos{border-top:1px solid var(--borde);padding:12px 16px 14px}
.avistamientos h3{font-family:var(--mono);font-size:10px;text-transform:uppercase;letter-spacing:.8px;
  color:var(--tinta-60);margin-bottom:6px}
.comentario{display:flex;gap:10px;padding:7px 0;font-size:13.5px}
.com-avatar{flex:0 0 30px;width:30px;height:30px;border-radius:50%;background:var(--menta-suave);
  display:grid;place-items:center;font-size:13px}
.comentario b{font-size:13px;margin-right:5px}
.caja-comentario{display:flex;gap:8px;margin-top:10px}
.caja-comentario input{flex:1;min-width:0;border:1.5px solid var(--borde);border-radius:99px;
  padding:11px 16px;font-size:16px;background:var(--fondo);min-height:var(--tap)}
.caja-comentario input:focus{outline:none;border-color:var(--petrol);background:#fff}
.btn-enviar{background:var(--petrol);color:#fff;border:none;border-radius:99px;width:var(--tap);
  height:var(--tap);flex:0 0 var(--tap);display:grid;place-items:center;font-size:15px}
.btn-enviar:disabled{opacity:.4}
.aviso{margin-top:10px;padding:12px 14px;border-radius:var(--r-sm);font-size:13px;animation:entra .3s ease}
.aviso.bloqueado{background:var(--rojo-suave);border:1.5px solid var(--rojo)}
.aviso.bloqueado b{color:var(--rojo)}
.aviso.ok{background:var(--verde-suave);border:1.5px solid var(--verde)}
.aviso .sugerencia{margin-top:8px;background:#fff;border:1.5px dashed var(--verde);border-radius:8px;
  padding:9px 12px;font-style:italic}
.aviso .btn{margin-top:8px;width:auto}

/* ---------------- MAPA ---------------- */
.mapa-marco{position:relative;background:linear-gradient(180deg,#DCE9EA,#EAF1F0);
  border-radius:var(--r);overflow:hidden;border:1px solid var(--borde);touch-action:manipulation}
.mapa-marco svg{display:block;width:100%;height:auto}
.pin{cursor:pointer;transition:transform .15s}
.pin:hover{transform:scale(1.12)}
.pin-halo{animation:pulso 2.2s infinite}
@keyframes pulso{0%{r:9;opacity:.55}70%{r:22;opacity:0}100%{r:9;opacity:0}}
.leyenda{display:flex;gap:12px;flex-wrap:wrap;padding:10px 14px;font-size:11.5px;
  border-top:1px solid var(--borde);background:var(--blanco)}
.leyenda span{display:flex;align-items:center;gap:6px;color:var(--tinta-60)}
.leyenda i{width:10px;height:10px;border-radius:50%;display:block}
.lista-dispositivos{display:flex;flex-direction:column;gap:8px;max-height:420px;overflow-y:auto}
.disp-item{display:flex;gap:10px;align-items:center;padding:10px;border:1px solid var(--borde);
  border-radius:var(--r-sm);background:var(--blanco);cursor:pointer;transition:.15s}
.disp-item:hover,.disp-item.sel{border-color:var(--petrol);background:var(--petrol-suave)}
.disp-foto{width:42px;height:42px;flex:0 0 42px;border-radius:10px;object-fit:cover;background:var(--fondo)}
.disp-item .info{min-width:0;flex:1}
.disp-item .info b{font-size:13.5px;display:block}
.disp-item .info span{font-size:11px;color:var(--tinta-60);display:block;font-family:var(--mono)}
.bateria{display:flex;align-items:center;gap:4px;font-family:var(--mono);font-size:10.5px;color:var(--tinta-60)}
.bateria i{width:22px;height:10px;border:1.5px solid var(--tinta-40);border-radius:3px;position:relative;display:block}
.bateria i::after{content:"";position:absolute;inset:1.5px;width:var(--nivel,50%);background:var(--verde);border-radius:1px}
.bateria.baja i::after{background:var(--rojo)}
.bateria.media i::after{background:var(--dorado)}

/* ---------------- TIENDA ---------------- */
.grid-productos{display:grid;grid-template-columns:1fr;gap:14px}
.producto{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column}
.producto.destacado{border:2px solid var(--dorado);position:relative}
.producto.destacado::before{content:"MÁS VENDIDO";position:absolute;top:12px;right:-30px;
  background:var(--dorado);color:var(--petrol-osc);font-family:var(--display);font-weight:800;
  font-size:9.5px;letter-spacing:1px;padding:4px 34px;transform:rotate(38deg);z-index:2}
.producto-img{background:var(--petrol-suave);display:grid;place-items:center;padding:22px}
.producto-img svg{width:130px;height:130px}
.producto-cuerpo{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.producto-cuerpo h3{font-family:var(--display);font-weight:800;font-size:18px;font-variation-settings:"wdth" 105}
.precio{font-family:var(--display);font-weight:800;font-size:26px;color:var(--petrol);font-variation-settings:"wdth" 108}
.precio small{font-size:12px;font-weight:400;color:var(--tinta-60);font-family:var(--cuerpo)}
.lista-check{list-style:none;display:flex;flex-direction:column;gap:5px;font-size:13px}
.lista-check li{display:flex;gap:7px;align-items:flex-start}
.lista-check li::before{content:"✓";color:var(--verde);font-weight:700;flex-shrink:0}

/* ---------------- HISTORIA CLÍNICA ---------------- */
.perfil-mascota{display:flex;gap:14px;align-items:center;flex-wrap:wrap}
.perfil-foto{width:88px;height:88px;flex:0 0 88px;border-radius:var(--r);object-fit:cover;
  background:var(--fondo);border:2px solid var(--menta)}
.perfil-datos h2{font-family:var(--display);font-weight:800;font-size:22px;color:var(--tinta);
  text-transform:none;letter-spacing:0;margin:0;font-variation-settings:"wdth" 105}
.perfil-datos .sub{font-size:13px;color:var(--tinta-60)}
.qr-caja{display:flex;gap:12px;align-items:center;background:var(--petrol-suave);
  border-radius:var(--r-sm);padding:12px;flex-wrap:wrap}
.qr-caja svg{width:74px;height:74px;flex:0 0 74px;background:#fff;border-radius:8px;padding:5px}
.linea-tiempo{position:relative;padding-left:26px}
.linea-tiempo::before{content:"";position:absolute;left:8px;top:6px;bottom:6px;width:2px;background:var(--borde)}
.evento{position:relative;padding:0 0 16px 0}
.evento::before{content:"";position:absolute;left:-22px;top:5px;width:12px;height:12px;border-radius:50%;
  background:var(--petrol);border:2px solid #fff;box-shadow:0 0 0 2px var(--borde)}
.evento.vacuna::before{background:var(--verde)}
.evento.cirugia::before{background:var(--rojo)}
.evento.alergia::before{background:var(--dorado)}
.evento.consulta::before{background:var(--petrol)}
.evento.desparasitacion::before{background:var(--morado)}
.evento .fecha{font-family:var(--mono);font-size:10.5px;color:var(--tinta-60);letter-spacing:.4px}
.evento h4{font-family:var(--display);font-weight:700;font-size:14.5px;margin-top:2px}
.evento p{font-size:13px;color:var(--tinta-60);margin-top:2px}
.evento .vet{font-size:11.5px;color:var(--petrol);font-weight:600;margin-top:3px}
.alerta-medica{background:var(--rojo-suave);border-left:4px solid var(--rojo);border-radius:var(--r-sm);
  padding:12px 14px;font-size:13px}
.alerta-medica b{color:var(--rojo);display:block;font-size:12px;text-transform:uppercase;letter-spacing:.6px}

/* ---------------- TABLA ---------------- */
.tabla-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table.datos{width:100%;border-collapse:collapse;font-size:13px;min-width:520px}
table.datos th{text-align:left;font-family:var(--mono);font-size:10px;text-transform:uppercase;
  letter-spacing:.6px;color:var(--tinta-60);padding:9px 10px;border-bottom:2px solid var(--borde)}
table.datos td{padding:10px;border-bottom:1px solid var(--borde)}
table.datos tr:hover td{background:var(--fondo)}

/* ---------------- VARIOS ---------------- */
.vacio{text-align:center;padding:36px 20px;color:var(--tinta-60);font-size:14px;background:var(--blanco);
  border:1px dashed var(--borde);border-radius:var(--r)}
.pie-app{text-align:center;padding:22px 14px;font-family:var(--mono);font-size:9.5px;
  color:var(--tinta-60);letter-spacing:.5px}
.barra-movil{position:fixed;bottom:0;left:0;right:0;z-index:56;background:rgba(255,255,255,.96);
  backdrop-filter:blur(8px);border-top:1px solid var(--borde);display:flex;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom))}
.barra-movil .btn{flex:1}
.toast{position:fixed;left:50%;bottom:78px;transform:translateX(-50%);z-index:90;background:var(--petrol-osc);
  color:#fff;padding:12px 18px;border-radius:99px;font-size:13.5px;box-shadow:var(--sombra-alta);
  animation:entra .3s ease;max-width:92vw;text-align:center}
.pasos-mini{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px}
.pasos-mini::-webkit-scrollbar{display:none}
.paso-mini{flex-shrink:0;display:flex;align-items:center;gap:7px;font-size:12px;font-weight:600;
  color:var(--tinta-40);padding:8px 12px;border-radius:99px;background:var(--blanco);border:1.5px solid var(--borde)}
.paso-mini.on{color:var(--petrol);border-color:var(--petrol);background:var(--petrol-suave)}
.paso-mini.hecho{color:var(--verde);border-color:var(--verde);background:var(--verde-suave)}
.paso-mini i{width:20px;height:20px;border-radius:50%;background:currentColor;color:#fff;
  display:grid;place-items:center;font-size:10px;font-style:normal;font-weight:800}
.paso-mini.hecho i::after{content:"✓"}
.paso-mini:not(.hecho) i::after{content:attr(data-n)}

/* =====================================================================
   TABLET ≥720px
===================================================================== */
@media (min-width:720px){
  .topbar{min-height:64px;padding:8px 24px}
  .logo-img{width:46px;height:46px;flex-basis:46px}
  .logo-txt{font-size:20px}.logo-sub{font-size:8px}
  .motor-txt{display:inline}
  .nav-modulos{top:64px;padding:0 20px}
  .nav-modulos a{font-size:13px;padding:12px 16px}
  .franja{font-size:11px;padding:9px 24px}
  .contenedor{padding:22px 24px calc(84px + env(safe-area-inset-bottom))}
  .form-grid{grid-template-columns:1fr 1fr;padding:22px;gap:16px}
  .acciones{flex-direction:row;flex-wrap:wrap;align-items:center;grid-column:1/-1}
  .acciones .btn{width:auto}
  .nota-ia{margin-left:auto}
  .ficha-grid,.alerta-datos{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
  .grid-auto{grid-template-columns:1fr 1fr}
  .grid-productos{grid-template-columns:repeat(2,1fr)}
  .preview-marco,.preview-marco img,.alerta-media img{max-height:420px}
  .hero-logo{width:96px;height:96px;flex-basis:96px}
  .contadores{grid-template-columns:repeat(4,1fr)}
}

/* =====================================================================
   ESCRITORIO ≥1024px
===================================================================== */
@media (min-width:1024px){
  .grid-2{grid-template-columns:340px 1fr;gap:22px}
  .grid-2.invertido{grid-template-columns:1fr 360px}
  .lateral{position:sticky;top:120px;display:flex;flex-direction:column;gap:16px}
  .barra-movil{display:none}
  .contenedor{padding-bottom:70px}
  .franja,.filtros{overflow:visible;white-space:normal;flex-wrap:wrap}
  .grid-productos{grid-template-columns:repeat(3,1fr)}
  .grid-auto.tres{grid-template-columns:repeat(3,1fr)}
}


/* ---------------- SESIÓN DE USUARIO ---------------- */
.usuario-chip{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:4px 10px 4px 4px;
  color:#fff;font-size:12px;font-weight:600;cursor:pointer;max-width:170px}
.usuario-chip:hover{background:rgba(255,255,255,.2)}
.usuario-ini{width:26px;height:26px;flex:0 0 26px;border-radius:50%;background:var(--bronce);
  color:var(--petrol-osc);display:grid;place-items:center;font-family:var(--display);
  font-weight:800;font-size:12px}
.usuario-chip span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:none}
.menu-usuario{position:absolute;top:56px;right:12px;z-index:80;background:var(--blanco);
  border:1px solid var(--borde);border-radius:var(--r);box-shadow:var(--sombra-alta);
  min-width:230px;overflow:hidden}
.menu-usuario .cab{padding:14px;background:var(--petrol-suave);border-bottom:1px solid var(--borde)}
.menu-usuario .cab b{display:block;font-size:14px}
.menu-usuario .cab small{color:var(--tinta-60);font-size:11.5px;word-break:break-all}
.menu-usuario a,.menu-usuario button{display:flex;align-items:center;gap:9px;width:100%;
  padding:12px 14px;background:none;border:none;text-align:left;font-size:13.5px;
  color:var(--tinta);text-decoration:none;border-bottom:1px solid var(--borde)}
.menu-usuario a:hover,.menu-usuario button:hover{background:var(--fondo)}
.menu-usuario button:last-child{border-bottom:none;color:var(--rojo)}
.caja-auth{max-width:460px;margin:0 auto}
.tabs-auth{display:flex;border-bottom:1px solid var(--borde)}
.tabs-auth button{flex:1;background:none;border:none;padding:14px;font-weight:700;font-size:14px;
  color:var(--tinta-40);border-bottom:3px solid transparent;font-family:var(--display)}
.tabs-auth button.on{color:var(--petrol);border-bottom-color:var(--bronce)}
.marca-auth{text-align:center;padding:22px 20px 6px}
.marca-auth img{width:120px;height:120px;margin:0 auto;border-radius:50%}
.marca-auth h1{font-family:var(--display);font-weight:800;font-size:22px;margin-top:10px;
  font-variation-settings:"wdth" 106}
.marca-auth p{font-size:13px;color:var(--tinta-60);margin-top:4px}
.aviso-radio{display:flex;gap:10px;align-items:flex-start;background:var(--menta-suave);
  border:1.5px solid var(--menta);border-radius:var(--r-sm);padding:12px 14px;font-size:13px}
.aviso-radio .ico{font-size:20px;flex-shrink:0}
.mapa-mini{border:1px solid var(--borde);border-radius:var(--r-sm);overflow:hidden;background:var(--petrol-suave)}
.mapa-mini svg{display:block;width:100%;height:auto}
.chip-notif{display:inline-flex;align-items:center;gap:6px;background:var(--bronce-suave);
  border:1px solid var(--bronce);color:var(--bronce-osc);border-radius:99px;
  padding:5px 11px;font-size:11.5px;font-weight:600}
@media (min-width:720px){ .usuario-chip span{display:inline} }

/* =====================================================================
   v5 · MODAL genérico
===================================================================== */
.overlay-modal{position:fixed;inset:0;z-index:100;background:rgba(24,41,42,.55);
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:entra .2s ease;backdrop-filter:blur(2px)}
.caja-modal{position:relative;background:var(--blanco);border-radius:var(--r-lg);
  max-width:460px;width:100%;max-height:88vh;overflow-y:auto;box-shadow:var(--sombra-alta)}
.cerrar-modal{position:absolute;top:12px;right:12px;background:rgba(24,41,42,.06);border:none;
  width:36px;height:36px;border-radius:50%;font-size:16px;color:var(--tinta-60);z-index:2;cursor:pointer}
.cerrar-modal:hover{background:rgba(24,41,42,.12)}
.cuerpo-modal{padding:26px 22px 22px;text-align:center}
.cuerpo-modal .emoji-modal{font-size:48px;line-height:1}
.cuerpo-modal h2{font-family:var(--display);font-size:21px;margin-top:10px;color:var(--tinta);
  text-transform:none;letter-spacing:0;justify-content:center}
.cuerpo-modal p{font-size:13.5px;color:var(--tinta-60);margin-top:8px;text-align:left}
.tarjeta-donar{margin-top:16px;background:var(--bronce-suave,#F3E9E1);border:1.5px solid var(--bronce,#AE896D);
  border-radius:var(--r-sm);padding:14px;text-align:left}
.tarjeta-donar b{font-family:var(--display);font-size:14px;color:var(--bronce-osc,#8A6A52);display:block}
.tarjeta-donar .medios{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.tarjeta-donar .medio{flex:1;min-width:120px;background:#fff;border:1px solid var(--borde);
  border-radius:8px;padding:9px 10px;text-align:center;cursor:pointer}
.tarjeta-donar .medio:hover{border-color:var(--bronce,#AE896D)}
.tarjeta-donar .medio b{font-size:15px;color:var(--tinta);font-family:var(--mono)}
.tarjeta-donar .medio span{font-size:10.5px;color:var(--tinta-60);display:block}
.fila-modal-botones{display:flex;gap:8px;margin-top:18px;flex-wrap:wrap}
.fila-modal-botones .btn{flex:1;min-width:130px}

/* =====================================================================
   v5 · BANDEJA Y CHAT (mensajería privada)
===================================================================== */
.bandeja{display:flex;flex-direction:column;gap:8px}
.conv-item{display:flex;gap:11px;align-items:center;padding:12px;border:1px solid var(--borde);
  border-radius:var(--r-sm);background:var(--blanco);cursor:pointer;transition:.15s}
.conv-item:hover,.conv-item.sel{border-color:var(--petrol);background:var(--petrol-suave)}
.conv-foto{width:46px;height:46px;flex:0 0 46px;border-radius:10px;object-fit:cover;background:var(--fondo)}
.conv-info{min-width:0;flex:1}
.conv-info .fila-top{display:flex;justify-content:space-between;gap:8px;align-items:baseline}
.conv-info b{font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-info .hora{font-size:10.5px;color:var(--tinta-60);flex-shrink:0;font-family:var(--mono)}
.conv-info .previo{font-size:12px;color:var(--tinta-60);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv-badges{display:flex;gap:4px;margin-top:3px;flex-wrap:wrap}

.hilo-chat{display:flex;flex-direction:column;height:min(72vh,640px)}
.hilo-cab{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--borde);
  background:var(--petrol-suave);flex-wrap:wrap}
.hilo-cab img{width:38px;height:38px;border-radius:8px;object-fit:cover}
.hilo-cab .info b{display:block;font-size:14px}
.hilo-cab .info span{font-size:11.5px;color:var(--tinta-60)}
.hilo-mensajes{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:8px;background:var(--fondo)}
.burbuja{max-width:78%;padding:9px 13px;border-radius:14px;font-size:13.5px;line-height:1.45;
  box-shadow:0 1px 2px rgba(24,41,42,.06)}
.burbuja.mia{align-self:flex-end;background:var(--petrol);color:#fff;border-bottom-right-radius:3px}
.burbuja.otro{align-self:flex-start;background:#fff;border:1px solid var(--borde);border-bottom-left-radius:3px}
.burbuja.sistema{align-self:center;background:var(--menta-suave);color:var(--petrol);
  border:1px dashed var(--menta);font-size:12px;text-align:center;max-width:90%}
.burbuja .hora-msj{display:block;font-size:9.5px;opacity:.7;margin-top:3px;font-family:var(--mono)}
.hilo-pie{border-top:1px solid var(--borde);padding:12px 14px;display:flex;flex-direction:column;gap:8px}
.hilo-pie .fila-envio{display:flex;gap:8px}
.hilo-pie input{flex:1;border:1.5px solid var(--borde);border-radius:99px;padding:11px 16px;
  font-size:16px;background:var(--fondo);min-height:var(--tap)}
.hilo-pie input:focus{outline:none;border-color:var(--petrol);background:#fff}

.tarjeta-confirmar{margin:0 16px 12px;background:var(--dorado-suave);border:1.5px solid var(--dorado-osc);
  border-radius:var(--r-sm);padding:13px}
.tarjeta-confirmar b{font-family:var(--display);font-size:13.5px;color:var(--dorado-osc);display:block}
.tarjeta-confirmar p{font-size:12px;color:var(--tinta-60);margin-top:4px}
.tarjeta-confirmar .estado-confirma{display:flex;gap:10px;margin-top:8px;font-size:12px}
.tarjeta-confirmar .estado-confirma span{display:flex;align-items:center;gap:5px}

.tarjeta-revelada{margin:0 16px 12px;background:var(--verde-suave);border:1.5px solid var(--verde);
  border-radius:var(--r-sm);padding:14px}
.tarjeta-revelada b.tit{font-family:var(--display);font-size:14px;color:var(--verde);display:block;margin-bottom:8px}
.contacto-revelado{display:flex;align-items:center;gap:10px;background:#fff;border-radius:8px;
  padding:10px 12px;flex-wrap:wrap}
.contacto-revelado .num{font-family:var(--mono);font-size:15px;font-weight:600;flex:1}
.wa-link{background:#25D366;color:#fff;border-radius:8px;padding:8px 14px;font-size:12.5px;
  font-weight:700;text-decoration:none;display:flex;align-items:center;gap:6px;white-space:nowrap}

@media (min-width:1024px){
  .layout-mensajes{display:grid;grid-template-columns:340px 1fr;gap:16px;align-items:start}
}

/* =====================================================================
   v5 · CONTACTO EN LA TARJETA DE ALERTA
===================================================================== */
.reportado-por{padding:9px 16px;font-size:12.5px;color:var(--tinta-60);
  background:var(--fondo);border-bottom:1px solid var(--borde)}
.reportado-por b{color:var(--tinta)}
.caja-contacto{padding:12px 16px;display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  border-bottom:1px solid var(--borde);background:var(--menta-suave)}
.btn-whatsapp{background:#25D366;color:#fff;border:none;border-radius:var(--r-sm);
  padding:11px 18px;font-weight:700;font-size:14px;text-decoration:none;
  display:inline-flex;align-items:center;gap:7px;min-height:var(--tap)}
.btn-whatsapp:hover{filter:brightness(.94)}

/* =====================================================================
   v5 · PIE DE PÁGINA GLOBAL
===================================================================== */
.pie-global{text-align:center;padding:18px 14px 90px;background:var(--petrol-osc);color:rgba(255,255,255,.7)}
.pie-global .marca{font-family:var(--display);font-weight:700;font-size:13px;color:#fff;letter-spacing:.3px}
.pie-global .creditos{font-family:var(--mono);font-size:10.5px;margin-top:6px;letter-spacing:.3px}
.pie-global .creditos b{color:var(--menta)}
@media (min-width:1024px){ .pie-global{padding-bottom:24px} }

/* =====================================================================
   v5 · CONTROL DE ACCESIBILIDAD (tamaño de texto para todas las edades)
===================================================================== */
.control-accesible{display:flex;align-items:center;gap:2px;background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2);border-radius:99px;padding:2px}
.control-accesible button{background:none;border:none;color:#fff;width:28px;height:28px;
  border-radius:50%;font-size:13px;font-weight:800;cursor:pointer;display:grid;place-items:center}
.control-accesible button:hover{background:rgba(255,255,255,.18)}
.control-accesible button:active{transform:scale(.92)}

/* =====================================================================
   v5 · PETSHOP
===================================================================== */
.ps-filtros{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none}
.ps-filtros::-webkit-scrollbar{display:none}
.ps-grid{display:grid;grid-template-columns:1fr;gap:14px}
.ps-card{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);overflow:hidden;display:flex;flex-direction:column}
.ps-img{background:var(--petrol-suave);display:grid;place-items:center;padding:24px;position:relative}
.ps-img svg{width:110px;height:110px}
.ps-descuento{position:absolute;top:10px;left:10px;background:var(--rojo);color:#fff;font-family:var(--display);
  font-weight:800;font-size:11px;padding:4px 9px;border-radius:6px}
.ps-envio-gratis{position:absolute;top:10px;right:10px;background:var(--verde);color:#fff;
  font-family:var(--mono);font-size:9.5px;padding:4px 8px;border-radius:99px;font-weight:700}
.ps-cuerpo{padding:14px 16px 16px;display:flex;flex-direction:column;gap:6px;flex:1}
.ps-marca{font-family:var(--mono);font-size:10px;color:var(--tinta-60);text-transform:uppercase;letter-spacing:.5px}
.ps-cuerpo h3{font-family:var(--display);font-weight:700;font-size:15.5px;line-height:1.25;min-height:38px}
.ps-precios{display:flex;align-items:baseline;gap:8px;margin-top:2px}
.ps-precio{font-family:var(--display);font-weight:800;font-size:21px;color:var(--petrol)}
.ps-precio-antes{font-size:12.5px;color:var(--tinta-60);text-decoration:line-through}
.ps-stock{font-size:11px;color:var(--tinta-60)}
.ps-acciones-card{margin-top:auto;display:flex;gap:8px;align-items:center;padding-top:8px}
.ps-cant{display:flex;align-items:center;border:1.5px solid var(--borde);border-radius:99px;overflow:hidden}
.ps-cant button{background:none;border:none;width:32px;height:36px;font-size:16px;font-weight:700;color:var(--petrol)}
.ps-cant span{width:26px;text-align:center;font-weight:700;font-size:13px}

.ps-carrito-flotante{position:fixed;right:16px;bottom:82px;z-index:50;background:var(--petrol);
  color:#fff;border:none;border-radius:99px;padding:13px 20px;font-weight:700;font-size:14px;
  box-shadow:var(--sombra-alta);display:flex;align-items:center;gap:8px;cursor:pointer}
.ps-carrito-flotante .contador{background:var(--bronce,#AE896D);color:var(--petrol-osc);
  border-radius:50%;width:22px;height:22px;display:grid;place-items:center;font-size:11px;font-weight:800}
@media (min-width:1024px){ .ps-carrito-flotante{bottom:24px} }

.ps-fila-item{display:flex;gap:10px;align-items:center;padding:10px 0;border-bottom:1px solid var(--borde)}
.ps-fila-item img,.ps-fila-item svg{width:44px;height:44px;flex:0 0 44px;background:var(--petrol-suave);
  border-radius:8px;padding:6px}
.ps-fila-item .info{flex:1;min-width:0}
.ps-fila-item .info b{font-size:13px;display:block}
.ps-fila-item .info span{font-size:11.5px;color:var(--tinta-60)}
.ps-quitar{background:none;border:none;color:var(--rojo);font-size:12px;cursor:pointer;white-space:nowrap}

.ps-pasos{display:flex;gap:6px;margin-bottom:16px}
.ps-pasos span{flex:1;height:4px;border-radius:99px;background:var(--borde)}
.ps-pasos span.on{background:var(--petrol)}
.ps-resumen{background:var(--fondo);border-radius:var(--r-sm);padding:14px;font-size:13.5px}
.ps-resumen .fila{display:flex;justify-content:space-between;padding:4px 0}
.ps-resumen .fila.total{border-top:1px solid var(--borde);margin-top:6px;padding-top:10px;
  font-weight:800;font-size:16px;font-family:var(--display)}
.ps-metodo{border:1.5px solid var(--borde);border-radius:var(--r-sm);padding:12px 14px;display:flex;
  gap:10px;align-items:flex-start;cursor:pointer}
.ps-metodo.sel{border-color:var(--petrol);background:var(--petrol-suave)}
.ps-metodo input{margin-top:3px}
.ps-metodo b{display:block;font-size:14px}
.ps-metodo span{font-size:12px;color:var(--tinta-60)}
.ps-boleta{background:var(--blanco);border:1.5px dashed var(--borde);border-radius:var(--r);
  padding:22px;text-align:center}
.ps-boleta .num{font-family:var(--mono);font-size:13px;color:var(--tinta-60);letter-spacing:.5px}
.ps-modo-prueba{display:inline-flex;align-items:center;gap:6px;background:var(--dorado-suave);
  color:var(--dorado-osc);border:1px solid var(--dorado-osc);border-radius:99px;padding:5px 12px;
  font-size:11px;font-weight:700;margin-bottom:10px}
#culqi-tarjeta-frame{border:1.5px solid var(--borde);border-radius:var(--r-sm);padding:14px;min-height:60px}

@media (min-width:720px){
  .ps-grid{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:1024px){
  .ps-grid{grid-template-columns:repeat(3,1fr)}
  .ps-layout{display:grid;grid-template-columns:1fr 340px;gap:20px;align-items:start}
}

/* =====================================================================
   v5 · CENTRO DE IMPORTACIÓN (admin)
===================================================================== */
.fb-borrador{background:var(--blanco);border:1px solid var(--borde);border-radius:var(--r);
  box-shadow:var(--sombra);padding:16px;display:flex;flex-direction:column;gap:10px}
.fb-borrador .original{background:var(--fondo);border-radius:var(--r-sm);padding:10px 12px;
  font-size:12.5px;color:var(--tinta-60);max-height:120px;overflow-y:auto;white-space:pre-wrap}
.fb-grid-campos{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.fb-grid-campos .campo.ancho{grid-column:1/-1}

/* =====================================================================
   v5 · ACCESIBILIDAD GENERAL: tamaños mínimos legibles para todas las
   edades, sin importar el nivel de "modo texto grande" activado
===================================================================== */
html{ font-size: var(--escala-texto, 100%); }
body{ -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
input,select,textarea,button{ font-size: max(15px, 1em); }

/* ============================================================
   AJUSTE MOVIL PETALERT — MENU PRINCIPAL
   Solo afecta pantallas menores de 720px.
   ============================================================ */
@media (max-width:719px){

  /* Encabezado móvil */
  .topbar{
    min-height:58px;
    height:58px;
    padding:6px 10px;
    gap:6px;
    overflow:hidden;
  }

  .logo{
    min-width:0;
    flex:1 1 auto;
    gap:7px;
    overflow:hidden;
  }

  .logo-img{
    width:40px;
    height:40px;
    flex:0 0 40px;
  }

  .logo-txt{
    min-width:0;
    font-size:16px;
    line-height:1.05;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .logo-sub{
    font-size:6.5px;
    letter-spacing:.7px;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .top-derecha{
    flex:0 0 auto;
    gap:4px;
  }

  .motor-pill{
    padding:5px 6px;
    gap:4px;
    font-size:8px;
  }

  .motor-dot{
    width:8px;
    height:8px;
  }

  .chip-modo{
    font-size:7px;
    padding:3px 6px;
  }

  /* Menú principal móvil:
     3 elementos en la primera fila + 2 en la segunda */
  .nav-modulos{
    position:sticky;
    top:58px;
    z-index:55;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1px;

    padding:0;
    overflow:visible;
    background:var(--petrol-osc);
  }

  .nav-modulos a{
    min-width:0;
    width:100%;
    box-sizing:border-box;

    justify-content:center;
    text-align:center;

    font-size:11px;
    line-height:1.15;
    font-weight:700;

    padding:9px 4px 8px;

    gap:4px;
    border-bottom:3px solid transparent;

    white-space:normal;
  }

  .nav-modulos a .ico{
    font-size:14px;
    flex:0 0 auto;
  }

  .nav-modulos a.activo{
    border-bottom-color:var(--dorado);
    background:rgba(255,255,255,.035);
  }

  .nav-modulos a:hover{
    background:rgba(255,255,255,.06);
  }

  /* Nunca mostrar accidentalmente elementos
     marcados como hidden */
  .nav-modulos a[hidden]{
    display:none !important;
  }
}


/* ============================================================
   PETALERT · HEADER Y MENU MOVIL · AJUSTE FINAL
   Solo pantallas menores de 720px.
   ============================================================ */

@media (max-width:719px){

  /* ----------------------------------------------------------
     HEADER
     ---------------------------------------------------------- */

  .topbar{
    min-height:60px;
    height:60px;
    box-sizing:border-box;
    padding:6px 10px;
    gap:6px;
    overflow:hidden;
  }

  /* Logo con prioridad visual */
  .logo{
    flex:1 1 auto;
    min-width:0;
    width:auto;
    gap:8px;
    overflow:hidden;
  }

  .logo-img{
    width:44px;
    height:44px;
    flex:0 0 44px;
    border-radius:50%;
  }

  .logo > span{
    min-width:0;
    overflow:hidden;
  }

  .logo-txt{
    display:block;
    font-size:17px;
    line-height:18px;
    letter-spacing:0;
    white-space:nowrap;
    overflow:visible;
  }

  .logo-sub{
    display:block;
    max-width:170px;
    margin-top:1px;
    font-size:6.5px;
    line-height:8px;
    letter-spacing:.55px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  /* Zona derecha mucho más limpia */
  .top-derecha{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:3px;
    max-width:118px;
    overflow:hidden;
  }

  /*
     En móvil no necesitamos mostrar los tres indicadores
     individuales de los motores IA.
     La información sigue existiendo internamente.
  */
  .top-derecha .motor-pill{
    display:none;
  }

  /* Estado general compacto */
  .chip-modo{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    max-width:82px;
    overflow:hidden;
    text-overflow:ellipsis;

    font-size:7px;
    line-height:10px;
    letter-spacing:.3px;
    padding:4px 6px;
    border-radius:99px;
    white-space:nowrap;
  }

  /* Si aparece la sesión, que no destruya el header */
  #zonaSesion{
    flex:0 0 auto;
    max-width:30px;
    overflow:hidden;
  }

  /* ----------------------------------------------------------
     MENU PRINCIPAL
     ---------------------------------------------------------- */

  .nav-modulos{
    position:sticky;
    top:60px;
    z-index:55;

    display:grid;
    grid-template-columns:repeat(3, minmax(0, 1fr));
    gap:1px;

    width:100%;
    padding:0;
    overflow:visible;

    background:var(--petrol-osc);
  }

  .nav-modulos a{
    min-width:0;
    width:100%;
    min-height:48px;
    box-sizing:border-box;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    gap:3px;

    padding:5px 3px 6px;

    font-size:10px;
    line-height:11px;
    font-weight:700;

    text-align:center;
    white-space:normal;

    border-bottom:3px solid transparent;
  }

  /* Iconos claramente visibles */
  .nav-modulos a .ico{
    display:block;
    font-size:18px;
    line-height:20px;
    height:20px;
  }

  .nav-modulos a.activo{
    background:rgba(255,255,255,.05);
    border-bottom-color:var(--dorado);
  }

  .nav-modulos a:hover{
    background:rgba(255,255,255,.06);
  }

  /* Elementos ocultos por lógica JS siguen sin ocupar espacio */
  .nav-modulos a[hidden]{
    display:none !important;
  }

}

/* ============================================================
   PANTALLAS MUY PEQUEÑAS
   ============================================================ */

@media (max-width:380px){

  .topbar{
    padding-left:8px;
    padding-right:8px;
  }

  .logo-img{
    width:40px;
    height:40px;
    flex-basis:40px;
  }

  .logo-txt{
    font-size:16px;
  }

  .logo-sub{
    max-width:145px;
    font-size:6px;
  }

  .top-derecha{
    max-width:95px;
  }

  .chip-modo{
    max-width:70px;
    font-size:6.5px;
    padding-left:5px;
    padding-right:5px;
  }

  .nav-modulos a{
    font-size:9px;
  }

  .nav-modulos a .ico{
    font-size:17px;
  }

}


/* ============================================================
   PETALERT · BOTON MENU MOVIL
   Corrección del botón de sesión/menu en pantallas pequeñas.
   ============================================================ */

@media (max-width:719px){

  /* Recuperar espacio real para el botón */
  #zonaSesion{
    display:flex !important;
    align-items:center;
    justify-content:center;

    flex:0 0 44px !important;
    width:44px !important;
    max-width:44px !important;
    min-width:44px !important;

    height:44px;
    overflow:visible !important;
  }

  /* Botón de menú */
  #zonaSesion .usuario-chip{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;
    max-width:42px !important;

    box-sizing:border-box;

    padding:0 !important;
    margin:0;

    border:1px solid rgba(255,255,255,.35);
    border-radius:50%;

    background:rgba(255,255,255,.14);

    color:#fff;

    cursor:pointer;

    box-shadow:0 1px 5px rgba(0,0,0,.18);
  }

  /* Ocultar nombre e iniciales y mostrar icono */
  #zonaSesion .usuario-chip .usuario-ini{
    display:grid !important;
    place-items:center;

    width:100% !important;
    height:100% !important;

    background:transparent !important;
    color:#fff !important;

    font-size:0 !important;
    border-radius:50%;
  }

  #zonaSesion .usuario-chip .usuario-ini::before{
    content:"☰";

    display:block;

    font-family:Arial,sans-serif;
    font-size:23px;
    line-height:1;
    font-weight:700;
  }

  #zonaSesion .usuario-chip > span:last-child{
    display:none !important;
  }

  /* Estado hover/touch */
  #zonaSesion .usuario-chip:hover{
    background:rgba(255,255,255,.22);
    transform:none;
  }

  #zonaSesion .usuario-chip:active{
    transform:scale(.94);
  }

  /* Si el visitante todavía no inició sesión */
  #zonaSesion > a{
    display:flex !important;
    align-items:center;
    justify-content:center;

    width:42px !important;
    height:42px !important;
    min-width:42px !important;

    padding:0 !important;

    border-radius:50% !important;

    font-size:0 !important;
    text-decoration:none;
  }

  #zonaSesion > a::before{
    content:"☰";

    font-family:Arial,sans-serif;
    font-size:23px;
    line-height:1;
    font-weight:700;
  }

}

/* ============================================================
   TELEFONOS MUY PEQUEÑOS
   ============================================================ */

@media (max-width:380px){

  #zonaSesion{
    flex-basis:42px !important;
    width:42px !important;
    min-width:42px !important;
  }

  #zonaSesion .usuario-chip{
    width:40px !important;
    height:40px !important;
    min-width:40px !important;
    max-width:40px !important;
  }

  #zonaSesion .usuario-chip .usuario-ini::before{
    font-size:22px;
  }

}