/* ===========================================================================
   Ferreco Contigo — sistema visual
   Tokens y componentes tomados de demo-ferreco-contigo.html (referencia aprobada).
   Sin frameworks, sin fuentes externas: system font stack = rápido en 3G.
   =========================================================================== */

:root{
  --navy:#0C2448; --lime:#78B400; --bg:#F8F9FA; --text:#212529;
  --danger:#DC3545; --warn:#FFC107; --info:#0D6EFD; --muted:#6C757D;
  --border:#DEE2E6; --card:#FFFFFF;
  --lime-soft:#eef7e0; --lime-dark:#4c7300;
  --warn-soft:#fff4d6; --warn-dark:#8a6d00;
  --danger-soft:#fdeaec; --danger-dark:#a71d2a;
  --font:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --nav-h:60px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--text);
  min-height:100dvh;display:flex;flex-direction:column;
  overscroll-behavior-y:none;
}
img{max-width:100%;display:block}
button,input,select,textarea{font-family:inherit;font-size:1rem}
a{color:var(--info)}

/* --- app shell ----------------------------------------------------------- */
#app{flex:1;display:flex;flex-direction:column;max-width:560px;width:100%;margin:0 auto;
     background:var(--bg);position:relative}
.screen{display:none;flex-direction:column;flex:1;padding-bottom:calc(var(--nav-h) + 16px)}
.screen.act{display:flex}

/* --- header -------------------------------------------------------------- */
.hd{background:linear-gradient(160deg,#123362,var(--navy) 60%);color:#fff;
    padding:calc(18px + env(safe-area-inset-top)) 18px 16px;flex:0 0 auto}
.brand{display:flex;align-items:center;gap:10px}
.logo-w{width:44px;height:44px;flex:0 0 auto;filter:brightness(0) invert(1)}
.logo-w img,.logo-w svg{width:100%;height:100%}
.brand b{font-size:1.22rem;font-weight:800;letter-spacing:.2px}
.brand b .dot{color:var(--lime)}
.brand small{display:block;font-size:.7rem;font-weight:600;opacity:.75;letter-spacing:.3px}

.sgc{margin-top:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.15);
     border-radius:12px;padding:8px 12px;display:flex;align-items:center;gap:10px;
     font-size:.76rem;color:#fff;text-align:left;width:100%;cursor:pointer}
.sgc .pulse{width:9px;height:9px;border-radius:50%;background:var(--warn);animation:pu 1.6s infinite;flex:0 0 auto}
@keyframes pu{0%,100%{box-shadow:0 0 0 0 rgba(255,193,7,.6)}55%{box-shadow:0 0 0 7px rgba(255,193,7,0)}}
.sgc b{font-weight:800}

/* Cabecera de pantalla interna (estilo .rev-top de la demo) */
.sub-hd{background:var(--navy);color:#fff;padding:calc(18px + env(safe-area-inset-top)) 18px 14px;
        flex:0 0 auto;display:flex;gap:12px;align-items:flex-start}
.sub-hd h2{font-size:1.05rem;font-weight:800}
.sub-hd small{font-size:.72rem;opacity:.75;display:block;margin-top:2px}
.sub-hd .volver{background:rgba(255,255,255,.15);border:0;color:#fff;border-radius:12px;
                min-width:44px;min-height:44px;font-size:1.1rem;cursor:pointer;flex:0 0 auto}

/* --- home ---------------------------------------------------------------- */
.hero-q{padding:16px 18px 6px;font-size:1.05rem;font-weight:800;color:var(--navy)}
.acciones{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding:10px 16px}
.acc{border:0;border-radius:18px;padding:18px 14px;text-align:left;cursor:pointer;
     display:flex;flex-direction:column;gap:6px;min-height:112px;
     box-shadow:0 2px 10px rgba(12,36,72,.08);transition:transform .12s}
.acc:active{transform:scale(.96)}
.acc .ic{font-size:1.7rem;line-height:1}
.acc b{font-size:.95rem;font-weight:800;line-height:1.15}
.acc small{font-size:.7rem;opacity:.85;line-height:1.25}
.acc.verde{background:var(--lime);color:#fff}
.acc.blanco{background:var(--card);color:var(--navy);border:2px solid var(--border)}
.acc.rojo{background:var(--danger);color:#fff}
.acc.navy{background:var(--navy);color:#fff}

/* --- tarjetas ------------------------------------------------------------ */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;
      margin:8px 16px;padding:14px;box-shadow:0 1px 6px rgba(12,36,72,.05)}
.card.tap{cursor:pointer;text-align:left;width:calc(100% - 32px);display:block}
.card h4{font-size:.8rem;color:var(--muted);font-weight:800;text-transform:uppercase;
         letter-spacing:.5px;display:flex;align-items:center;gap:6px;margin-bottom:8px;flex-wrap:wrap}
.card p{font-size:.82rem;line-height:1.45}
.card p b{color:var(--navy)}
.ia-chip{background:var(--lime-soft);color:var(--lime-dark);font-size:.62rem;font-weight:800;
         border-radius:20px;padding:2px 8px;letter-spacing:.4px}

/* --- estados / semáforo -------------------------------------------------- */
.est{font-size:.6rem;font-weight:800;border-radius:20px;padding:3px 8px;white-space:nowrap;
     display:inline-block}
.est.v{background:var(--lime-soft);color:var(--lime-dark)}
.est.sv{background:var(--warn-soft);color:var(--warn-dark)}
.est.rojo{background:var(--danger-soft);color:var(--danger-dark)}
.est.info{background:#e7f0ff;color:#0a58ca}
.est.gris{background:#eceef0;color:var(--muted)}

/* --- listas -------------------------------------------------------------- */
.rep{display:flex;gap:10px;align-items:flex-start}
/* `.card.tap` fija display:block y gana por especificidad: sin esto, en una
   tarjeta que además es enlace, el chevron se cae a la línea de abajo. */
.card.tap.rep{display:flex;align-items:center}
.rep .tx{flex:1}
.rep b{font-size:.83rem;color:var(--navy)}
.rep small{display:block;font-size:.7rem;color:var(--muted);margin-top:2px;line-height:1.35}
.per{display:flex;gap:12px;align-items:center}
.ava{width:46px;height:46px;border-radius:50%;background:var(--navy);color:#fff;display:flex;
     align-items:center;justify-content:center;font-weight:800;font-size:1rem;flex:0 0 auto;
     overflow:hidden}
.ava.ok{background:var(--lime)}
.ava img{width:100%;height:100%;object-fit:cover}

/* --- filtros / chips ----------------------------------------------------- */
.filtros{display:flex;gap:8px;padding:12px 16px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch}
.ftr{border:1.5px solid var(--border);background:var(--card);border-radius:20px;padding:8px 12px;
     font-size:.72rem;font-weight:700;color:var(--muted);white-space:nowrap;cursor:pointer;
     min-height:36px}
.ftr.on{background:var(--navy);color:#fff;border-color:var(--navy)}

/* --- avisos -------------------------------------------------------------- */
.avi{margin:8px 16px;background:#fff8e1;border:1px solid #f5e1a4;border-radius:12px;
     padding:10px 12px;font-size:.72rem;color:#7a5d00;line-height:1.45}
.wa-tip{margin:8px 16px;background:#e7f6ec;border:1px solid #bfe5cc;border-radius:12px;
        padding:10px 12px;font-size:.72rem;color:#1c6b3c;line-height:1.45}
.avi-rojo{margin:8px 16px;background:var(--danger-soft);border:1px solid #f2c2c7;border-radius:12px;
          padding:10px 12px;font-size:.72rem;color:var(--danger-dark);line-height:1.45}

/* --- formularios --------------------------------------------------------- */
.form{padding:8px 16px 16px;display:flex;flex-direction:column;gap:12px}
.campo{display:flex;flex-direction:column;gap:5px}
.campo label{font-size:.75rem;font-weight:800;color:var(--navy)}
.campo .ayuda{font-size:.68rem;color:var(--muted)}
.campo input,.campo select,.campo textarea{
  border:1.5px solid var(--border);border-radius:12px;padding:12px;font-size:.9rem;
  background:var(--card);color:var(--text);min-height:44px;width:100%}
.campo textarea{min-height:88px;resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:2px solid var(--navy);border-color:var(--navy)}
.btn{border:0;border-radius:14px;min-height:48px;padding:12px 18px;font-size:.92rem;font-weight:800;
     cursor:pointer;background:var(--navy);color:#fff;display:flex;align-items:center;
     justify-content:center;gap:8px}
.btn:disabled{opacity:.55;cursor:progress}
.btn.lime{background:var(--lime)}
.btn.rojo{background:var(--danger)}
.btn.fantasma{background:transparent;color:var(--navy);border:2px solid var(--border)}
.btn.mini{min-height:38px;padding:8px 14px;font-size:.78rem;border-radius:12px}
.fila{display:flex;gap:10px;flex-wrap:wrap}
.fila>*{flex:1}
.error{color:var(--danger);font-size:.78rem;font-weight:700}

/* --- buscador ------------------------------------------------------------ */
.busca{margin:14px 16px 4px;display:flex;gap:8px}
.busca input{flex:1;border:1.5px solid var(--border);border-radius:12px;padding:12px;
             font-size:.88rem;background:var(--card);min-height:44px}
.busca button{background:var(--navy);color:#fff;border:0;border-radius:12px;padding:0 16px;
              font-weight:800;cursor:pointer;min-height:44px}

/* --- hoja modal ---------------------------------------------------------- */
.hoja-fondo{position:fixed;inset:0;background:rgba(12,36,72,.55);z-index:100;display:flex;
            align-items:flex-end;justify-content:center}
.hoja{background:var(--bg);width:100%;max-width:560px;max-height:92dvh;overflow-y:auto;
      border-radius:22px 22px 0 0;animation:sube .2s ease-out;padding-bottom:env(safe-area-inset-bottom)}
@keyframes sube{from{transform:translateY(24px);opacity:.4}to{transform:none;opacity:1}}

/* --- toast --------------------------------------------------------------- */
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(var(--nav-h) + 16px);
       background:var(--navy);color:#fff;padding:12px 18px;border-radius:14px;font-size:.82rem;
       font-weight:700;z-index:200;max-width:92vw;box-shadow:0 8px 24px rgba(0,0,0,.28);
       text-align:center;line-height:1.35}
.toast.err{background:var(--danger)}
.toast.ok{background:var(--lime-dark)}

/* --- nav inferior -------------------------------------------------------- */
.nav{position:fixed;bottom:0;left:0;right:0;z-index:60;display:flex;background:var(--card);
     border-top:1px solid var(--border);padding:6px 4px calc(6px + env(safe-area-inset-bottom));
     max-width:560px;margin:0 auto}
.nav button{flex:1;border:0;background:none;display:flex;flex-direction:column;align-items:center;
            gap:2px;font-size:.62rem;font-weight:700;color:var(--muted);cursor:pointer;
            padding:6px 0;min-height:48px}
.nav button.on{color:var(--navy)}
.nav button.on .nic{background:var(--lime-soft);color:var(--lime-dark)}
.nic{font-size:1.05rem;border-radius:10px;padding:2px 12px}

/* --- utilidades ---------------------------------------------------------- */
.sec-tit{padding:16px 16px 2px;font-size:.9rem;font-weight:800;color:var(--navy);
         display:flex;align-items:center;gap:8px}
.vacio{margin:16px;padding:24px 16px;text-align:center;color:var(--muted);font-size:.82rem;
       border:1.5px dashed var(--border);border-radius:16px}
.cargando{margin:16px;text-align:center;color:var(--muted);font-size:.8rem}
.oculto{display:none !important}
.offline-bar{background:var(--warn);color:#3d2f00;font-size:.72rem;font-weight:800;
             padding:6px 12px;text-align:center}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* Pie discreto con los accesos del equipo (piden clave para mostrar algo). */
.pie-equipo{padding:18px 16px 8px;text-align:center;font-size:.7rem;color:var(--muted)}
.pie-equipo button{background:none;border:0;color:var(--muted);font-size:.7rem;
                   text-decoration:underline;cursor:pointer;padding:8px 4px;min-height:44px}

@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important}}

/* ===========================================================================
   ESCRITORIO Y TABLET
   Es la MISMA app, no una versión aparte: solo cambia la distribución. En una
   emergencia mantener dos códigos es un lujo que se paga con errores.
   El diseño móvil aprobado en la demo no se toca por debajo de 760 px.
   =========================================================================== */

/* --- Tablet: la columna se ensancha y las 4 acciones caben en fila --------- */
@media (min-width:760px){
  #app{max-width:720px}
  .nav{max-width:720px}
  .acciones{grid-template-columns:repeat(4,1fr);padding:12px 20px}
  .acc{min-height:132px}
  .acc b{font-size:1rem}
  .acc small{font-size:.74rem}
  .card{margin:10px 20px;padding:16px}
  .card p{font-size:.88rem}
  .hero-q{padding:20px 20px 4px;font-size:1.2rem}
  .form,.busca{max-width:560px}
  .hoja{border-radius:22px;margin-bottom:24px}
  .hoja-fondo{align-items:center}
}

/* --- Escritorio: nav lateral fija y la app como panel --------------------- */
@media (min-width:1024px){
  :root{--nav-h:0px; --lateral:248px}

  body{background:#e9edf2;padding-left:var(--lateral)}

  /* El panel de la app deja de ser una columna flotando en el vacío. */
  #app{
    max-width:860px;margin:24px auto 40px;background:var(--bg);
    border:1px solid var(--border);border-radius:20px;overflow:hidden;
    box-shadow:0 12px 40px rgba(12,36,72,.10);min-height:calc(100dvh - 64px);
  }
  .hd{padding:24px 26px 20px}
  .brand b{font-size:1.4rem}
  .sub-hd{padding:22px 26px 18px}
  .screen{padding-bottom:24px}

  /* Barra lateral: los mismos 4 botones del nav inferior, en vertical. */
  .nav{
    top:0;bottom:0;left:0;right:auto;width:var(--lateral);max-width:none;margin:0;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:4px;
    border-top:0;border-right:1px solid var(--border);padding:20px 12px;
    background:var(--card);
  }
  .nav::before{
    content:'';display:block;height:44px;margin:0 12px 20px;
    background:url('/img/icono.svg') left center/44px 44px no-repeat;
  }
  .nav button{
    flex:0 0 auto;flex-direction:row;justify-content:flex-start;gap:12px;
    font-size:.92rem;padding:12px 14px;border-radius:12px;min-height:52px;
  }
  .nav button:hover{background:#f2f4f7}
  .nav button.on{background:var(--lime-soft);color:var(--lime-dark)}
  .nav button.on .nic{background:none}
  .nic{font-size:1.2rem;padding:0}

  .toast{left:calc(50% + var(--lateral)/2);bottom:24px}
  .hoja-fondo{padding-left:var(--lateral)}

  /* Los enlaces de "Más de Ferreco Contigo" en dos columnas: en pantalla
     ancha, una fila por tarjeta obliga a bajar el ojo sin necesidad. */
  .enlaces{display:grid;grid-template-columns:1fr 1fr;gap:4px 0;padding:0 12px}
  .enlaces .card{margin:8px;width:auto}

  /* El puntero sí tiene hover: se aprovecha para que se sienta clicable. */
  .card.tap:hover{border-color:var(--navy)}
  .acc:hover{transform:translateY(-2px)}
  .ftr:hover{border-color:var(--navy);color:var(--navy)}
}

/* --- Pantallas muy anchas: no estirar más, solo centrar mejor ------------- */
@media (min-width:1500px){
  #app{max-width:960px}
}