/*
  ARCHIVO: estilos.css
  VERSIÓN: v0.2
  FECHA: 01/08/2026
  PROYECTO: RavenMarket — base visual compartida | RavenTechs
  CHANGELOG:
  - v0.2 (01/08/2026): Chip de sesión (login Google) compartido entre apps y pantalla de acceso.
  - v0.1 (01/08/2026): Base mobile-first. Branding por variables CSS runtime.
*/
:root{
  --c-primario:#F27B13;
  --c-secundario:#2E9FC4;
  --c-fondo:#FAF8F5;
  --c-tarjeta:#FFFFFF;
  --c-texto:#26221D;
  --c-suave:#7A7268;
  --c-borde:#EAE4DC;
  --c-ok:#3D9B4F;
  --radio:14px;
  --sombra:0 2px 10px rgba(38,34,29,.07);
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{font-size:16px}
body{background:var(--c-fondo);color:var(--c-texto);font-family:'Manrope',system-ui,sans-serif;line-height:1.5;padding-bottom:88px}
button{font-family:inherit;cursor:pointer;border:none;background:none}
input,textarea{font-family:inherit;font-size:16px}
a{color:var(--c-secundario)}

/* ---- Banner demo ---- */
.demo-banner{background:#26221D;color:#FFD9AE;font-size:12.5px;text-align:center;padding:7px 12px;font-weight:600;letter-spacing:.02em}

/* ---- Header ---- */
header.app{background:var(--c-tarjeta);padding:16px 18px 14px;border-bottom:1px solid var(--c-borde);position:sticky;top:0;z-index:20}
.brand{display:flex;align-items:center;gap:10px}
.brand .logo{width:42px;height:42px;border-radius:12px;background:var(--c-primario);color:#fff;display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0}
.brand h1{font-size:19px;font-weight:800;line-height:1.15}
.brand .lema{font-size:12.5px;color:var(--c-suave);font-weight:500}
.zona{font-size:12px;color:var(--c-suave);margin-top:8px;display:flex;align-items:center;gap:5px}

/* ---- Contenedor ---- */
main{max-width:560px;margin:0 auto;padding:16px}
.vista{display:none}
.vista.activa{display:block;animation:aparecer .18s ease}
@keyframes aparecer{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:reduce){.vista.activa{animation:none}}

/* ---- Buscador ---- */
.buscador{display:flex;gap:8px;margin-bottom:18px}
.buscador input{flex:1;padding:13px 16px;border:1.5px solid var(--c-borde);border-radius:var(--radio);background:var(--c-tarjeta);outline:none}
.buscador input:focus{border-color:var(--c-primario)}
.buscador button{background:var(--c-primario);color:#fff;padding:0 18px;border-radius:var(--radio);font-weight:700;font-size:15px}

/* ---- Grilla de categorías ---- */
.seccion-titulo{font-size:14px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--c-suave);margin:4px 0 10px}
.cat-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:22px}
.cat-btn{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);border-radius:var(--radio);padding:20px 14px;text-align:center;box-shadow:var(--sombra);transition:transform .1s}
.cat-btn:active{transform:scale(.97)}
.cat-btn .ico{font-size:34px;display:block;margin-bottom:8px}
.cat-btn .nom{font-weight:800;font-size:16px}

/* ---- Tarjeta empresa ---- */
.volver{display:inline-flex;align-items:center;gap:6px;font-weight:700;color:var(--c-suave);font-size:14px;margin-bottom:12px;padding:6px 2px}
.emp-card{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);border-radius:var(--radio);box-shadow:var(--sombra);padding:15px;margin-bottom:12px;width:100%;text-align:left;display:block}
.emp-card:active{transform:scale(.99)}
.emp-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.emp-nombre{font-weight:800;font-size:16.5px}
.emp-dir{font-size:12.5px;color:var(--c-suave);margin-top:2px}
.emp-estado{font-size:11.5px;font-weight:700;padding:3px 9px;border-radius:20px;white-space:nowrap}
.emp-estado.abierta{background:#E7F4EA;color:var(--c-ok)}
.emp-estado.cerrada{background:#F6EAE6;color:#B4553B}
.emp-datos{display:flex;flex-wrap:wrap;gap:10px;margin-top:9px;font-size:13px;color:var(--c-suave);font-weight:600}
.emp-precio{color:var(--c-texto);font-weight:800}
.badges{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.badge{font-size:11.5px;font-weight:700;padding:4px 9px;border-radius:20px;background:#FFF2E3;color:#A85B12;border:1px solid #F5DFC4}
.badge.b-sec{background:#E7F3F8;color:#1E6E8C;border-color:#CBE5EF}

/* ---- Detalle empresa / productos ---- */
.detalle-head{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);border-radius:var(--radio);padding:16px;margin-bottom:14px;box-shadow:var(--sombra)}
.prod{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);border-radius:var(--radio);padding:13px 15px;margin-bottom:10px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.prod .info{flex:1}
.prod .nom{font-weight:700;font-size:14.5px}
.prod .pre{font-weight:800;font-size:15px;margin-top:2px;color:var(--c-primario)}
.stepper{display:flex;align-items:center;gap:2px;background:var(--c-fondo);border-radius:12px;border:1.5px solid var(--c-borde)}
.stepper button{width:38px;height:38px;font-size:19px;font-weight:800;color:var(--c-primario)}
.stepper .cant{min-width:26px;text-align:center;font-weight:800;font-size:15px}

/* ---- Barra carrito ---- */
.carrito-bar{position:fixed;left:0;right:0;bottom:0;z-index:30;background:var(--c-tarjeta);border-top:1.5px solid var(--c-borde);padding:12px 16px calc(12px + env(safe-area-inset-bottom))}
.carrito-bar .inner{max-width:560px;margin:0 auto;display:flex;align-items:center;gap:12px}
.carrito-bar .total{flex:1}
.carrito-bar .total .t1{font-size:12px;color:var(--c-suave);font-weight:600}
.carrito-bar .total .t2{font-size:18px;font-weight:800}
.btn-principal{background:var(--c-primario);color:#fff;font-weight:800;font-size:15.5px;padding:14px 22px;border-radius:var(--radio);box-shadow:0 3px 10px rgba(242,123,19,.3)}
.btn-principal:disabled{opacity:.45;box-shadow:none}
.btn-sec{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);color:var(--c-texto);font-weight:700;font-size:14.5px;padding:12px 18px;border-radius:var(--radio);width:100%;margin-top:10px}

/* ---- Confirmación ---- */
.campo{margin-bottom:14px}
.campo label{display:block;font-size:13px;font-weight:800;margin-bottom:6px}
.campo input,.campo textarea{width:100%;padding:12px 14px;border:1.5px solid var(--c-borde);border-radius:var(--radio);background:var(--c-tarjeta);outline:none}
.campo input:focus,.campo textarea:focus{border-color:var(--c-primario)}
.resumen{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);border-radius:var(--radio);padding:15px;margin-bottom:14px}
.resumen .linea{display:flex;justify-content:space-between;font-size:14px;margin-bottom:6px}
.resumen .linea.total{font-weight:800;font-size:16px;border-top:1.5px solid var(--c-borde);padding-top:8px;margin-top:8px}

/* ---- Historial ---- */
.ped-card{background:var(--c-tarjeta);border:1.5px solid var(--c-borde);border-radius:var(--radio);padding:14px;margin-bottom:11px;box-shadow:var(--sombra)}
.ped-top{display:flex;justify-content:space-between;font-size:13px;color:var(--c-suave);font-weight:600;margin-bottom:6px}
.ped-emp{font-weight:800;font-size:15px}
.ped-items{font-size:13.5px;color:var(--c-suave);margin:5px 0}
.ped-total{font-weight:800}
.vacio{text-align:center;color:var(--c-suave);padding:40px 20px;font-size:14.5px}
.vacio .ico{font-size:40px;display:block;margin-bottom:10px}

/* ---- Modal ---- */
.modal-fondo{position:fixed;inset:0;background:rgba(38,34,29,.45);z-index:40;display:none;align-items:flex-end;justify-content:center}
.modal-fondo.abierto{display:flex}
.modal{background:var(--c-tarjeta);border-radius:20px 20px 0 0;padding:22px 18px calc(22px + env(safe-area-inset-bottom));width:100%;max-width:560px;max-height:85vh;overflow-y:auto}
.modal h3{font-size:17px;font-weight:800;margin-bottom:10px}
.modal .wa-preview{background:#EFEAE3;border-radius:12px;padding:14px;font-size:13.5px;white-space:pre-wrap;font-family:ui-monospace,monospace;margin:10px 0 14px;line-height:1.55}

/* ---- Bottom nav ---- */
.nav-inferior{position:fixed;left:0;right:0;bottom:0;z-index:25;background:var(--c-tarjeta);border-top:1.5px solid var(--c-borde);display:flex;padding-bottom:env(safe-area-inset-bottom)}
.nav-inferior button{flex:1;padding:10px 0 9px;text-align:center;font-size:11.5px;font-weight:700;color:var(--c-suave)}
.nav-inferior button .ni{display:block;font-size:21px;margin-bottom:1px}
.nav-inferior button.activo{color:var(--c-primario)}

/* ---- Sesión (v0.2) ---- */
.fila-header{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.sesion-chip{border:1.5px solid var(--c-borde);background:var(--c-fondo);border-radius:20px;padding:7px 13px;font-size:12.5px;font-weight:800;color:var(--c-texto);white-space:nowrap}
.sesion-chip.entrar{border-color:var(--c-primario);color:var(--c-primario);background:#FFF2E3}
.pantalla-acceso{max-width:560px;margin:0 auto;padding:60px 24px;text-align:center}
.pantalla-acceso .ico{font-size:52px;display:block;margin-bottom:14px}
.pantalla-acceso h2{font-size:20px;font-weight:800;margin-bottom:8px}
.pantalla-acceso p{color:var(--c-suave);font-size:14.5px;margin-bottom:22px}