/* KenedyCar · Sistema de gestión — tema glassmorphism esmeralda/azul (v1.2) */
:root{
  --primario:#10b981; --primario-osc:#059669; --acento:#22d3ee; --acento-osc:#0284c7;
  --fondo:#0a1622; --texto:#eaf2f5; --texto-suave:#9fb4c7;
  --borde:rgba(255,255,255,.12); --vidrio:rgba(255,255,255,.06);
  --ok:#22c55e; --error:#f87171; --aviso:#fbbf24;
  --rojo:#f87171; --naranja:#fb923c; --amarillo:#fbbf24; --verde:#34d399; --gris:#8aa0b4;
  --sombra:0 8px 32px rgba(0,0,0,.35);
}
*{box-sizing:border-box}
html{scrollbar-color:#1f6f5c #0a1622}
body{
  margin:0;color:var(--texto);font-size:15px;
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(34,211,238,.16), transparent 60%),
    radial-gradient(800px 500px at 8% 0%, rgba(16,185,129,.20), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(2,132,199,.14), transparent 60%),
    linear-gradient(160deg,#0a1622 0%,#0c1f2e 55%,#0a1a26 100%);
  background-attachment:fixed;min-height:100vh;
}
::selection{background:rgba(16,185,129,.4)}
a{color:var(--acento)}
::-webkit-scrollbar{width:10px;height:10px}
::-webkit-scrollbar-track{background:#0a1622}
::-webkit-scrollbar-thumb{background:linear-gradient(#10b981,#0284c7);border-radius:8px}

/* Barra superior en vidrio */
.topbar{
  display:flex;align-items:center;gap:.6rem;color:#fff;
  padding:.55rem .9rem;position:sticky;top:0;z-index:50;
  background:rgba(10,22,34,.72);
  -webkit-backdrop-filter:blur(16px) saturate(1.3);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--borde);
  box-shadow:0 4px 24px rgba(0,0,0,.35);
}
.brand{color:#fff;text-decoration:none;font-weight:800;display:flex;align-items:center;gap:.6rem;flex:1;
  font-size:1.05rem;letter-spacing:.5px}
.brand span{background:linear-gradient(90deg,#a7f3d0,#67e8f9);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.brand-logo{height:40px;width:40px;object-fit:cover;border-radius:12px;
  box-shadow:0 0 14px rgba(16,185,129,.55);border:1px solid rgba(255,255,255,.25)}
.menu-btn{background:rgba(255,255,255,.08);border:1px solid var(--borde);color:#fff;font-size:1.25rem;
  border-radius:10px;padding:.25rem .65rem;cursor:pointer;transition:.2s}
.menu-btn:hover{background:rgba(16,185,129,.25);transform:scale(1.06)}
.userbox{margin-left:auto;display:flex;align-items:center;gap:.55rem;font-size:.85rem;position:relative}
.user-nombre{color:#d7e6ee}
.user-rol{background:linear-gradient(135deg,rgba(16,185,129,.35),rgba(34,211,238,.25));
  border:1px solid rgba(16,185,129,.5);border-radius:20px;padding:.15rem .7rem;font-size:.72rem;font-weight:700}
.salir{color:#a7f3d0;text-decoration:none;font-weight:600}
.salir:hover{color:#fff;text-decoration:underline}
/* Chip de usuario con foto + menú desplegable */
.user-chip{display:flex;align-items:center;gap:.55rem;background:transparent;border:1px solid transparent;
  border-radius:30px;padding:.2rem .7rem .2rem .2rem;cursor:pointer;color:inherit;font:inherit;transition:.18s}
.user-chip:hover{background:rgba(16,185,129,.14);border-color:rgba(16,185,129,.35)}
.user-chip-tx{display:flex;flex-direction:column;align-items:flex-start;line-height:1.25}
.foto-user{height:36px;width:36px}
.foto-inicial{display:inline-flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;
  background:linear-gradient(135deg,#10b981,#0284c7);color:#fff}
.user-menu{position:absolute;top:calc(100% + .5rem);right:0;min-width:230px;z-index:60;
  background:rgba(13,28,42,.96);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border:1px solid var(--borde);border-radius:14px;padding:.5rem;box-shadow:0 14px 40px rgba(0,0,0,.45)}
.user-menu-cab{display:flex;align-items:center;gap:.6rem;padding:.4rem .5rem .7rem;border-bottom:1px solid var(--borde);margin-bottom:.4rem}
.user-menu a{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:10px;color:#d7e6ee;text-decoration:none;font-size:.9rem}
.user-menu a:hover{background:rgba(16,185,129,.16);color:#fff}
body.modo-claro .user-chip:hover{background:rgba(16,185,129,.14)}
body.modo-claro .user-menu{background:rgba(255,255,255,.97)}
body.modo-claro .user-menu a{color:#33475b}
body.modo-claro .user-menu a:hover{background:rgba(16,185,129,.14);color:#0b3b2e}
@media(max-width:640px){ .user-chip-tx{display:none} .user-chip{padding:.2rem} }

.envoltura{display:flex;min-height:calc(100vh - 130px)}
/* Menú lateral en vidrio */
.menu{background:rgba(13,28,42,.66);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-right:1px solid var(--borde);width:235px;padding:.7rem;display:none;flex-shrink:0}
.menu.abierto{display:block;position:fixed;top:57px;bottom:0;left:0;z-index:40;overflow:auto;
  box-shadow:4px 0 24px rgba(0,0,0,.5)}
.menu-sec{font-size:.72rem;text-transform:uppercase;color:var(--texto-suave);margin:.9rem .3rem .35rem;
  font-weight:800;letter-spacing:1.2px}
.menu-item{display:flex;align-items:center;gap:.5rem;padding:.55rem .7rem;border-radius:10px;color:#cfe0ec;
  text-decoration:none;margin-bottom:.15rem;border:1px solid transparent;transition:.18s;cursor:pointer}
.menu-item:hover{background:linear-gradient(135deg,rgba(16,185,129,.32),rgba(2,132,199,.26));border-color:rgba(16,185,129,.5);transform:translateX(4px);color:#fff}
.menu-item.activo{background:linear-gradient(135deg,rgba(16,185,129,.85),rgba(2,132,199,.85));color:#fff;
  font-weight:700;box-shadow:0 4px 16px rgba(16,185,129,.35)}

.contenido{flex:1;padding:1.1rem;max-width:1150px;width:100%}
.titulo{font-size:1.45rem;margin:.2rem 0 1.1rem;font-weight:800;
  background:linear-gradient(90deg,#fff,#a7f3d0);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.pie{text-align:center;color:var(--texto-suave);font-size:.8rem;padding:1.2rem}

/* Mensajes */
.flash{padding:.75rem 1rem;border-radius:12px;margin-bottom:.9rem;border:1px solid;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.flash-ok{background:rgba(34,197,94,.14);color:#bbf7d0;border-color:rgba(34,197,94,.4)}
.flash-error{background:rgba(248,113,113,.14);color:#fecaca;border-color:rgba(248,113,113,.4)}
.alerta-aviso{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.45);color:#fde68a;
  padding:.75rem 1rem;border-radius:12px;margin-bottom:.9rem}
.aviso-fase2{background:rgba(34,211,238,.10);border:1px solid rgba(34,211,238,.4);color:#a5f3fc;
  padding:.75rem 1rem;border-radius:12px;margin-bottom:1rem}

/* Tarjetas del panel */
.tarjetas{display:grid;grid-template-columns:repeat(auto-fill,minmax(165px,1fr));gap:.8rem;margin-bottom:1.3rem}
.tarjeta{position:relative;overflow:hidden;background:var(--vidrio);border:1px solid var(--borde);
  border-radius:16px;padding:.95rem;box-shadow:var(--sombra);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .2s,box-shadow .2s}
.tarjeta::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primario),var(--acento))}
.tarjeta:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(16,185,129,.25)}
.tarjeta .num{font-size:1.55rem;font-weight:800;
  background:linear-gradient(135deg,#6ee7b7,#22d3ee);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.tarjeta .et{font-size:.8rem;color:var(--texto-suave);margin-top:.15rem}
.tarjeta.roja .num{background:linear-gradient(135deg,#fca5a5,#f87171);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}

/* Tablas */
.tabla-resp{overflow-x:auto;background:var(--vidrio);border:1px solid var(--borde);border-radius:16px;
  margin-bottom:1.3rem;box-shadow:var(--sombra);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{padding:.6rem .7rem;text-align:left;border-bottom:1px solid rgba(255,255,255,.07);white-space:nowrap}
th{background:rgba(16,185,129,.12);font-size:.75rem;text-transform:uppercase;letter-spacing:.8px;color:#a7f3d0;
  position:sticky;top:0;z-index:2}
tbody tr:nth-child(odd) td{background:rgba(255,255,255,.025)}
tbody tr:nth-child(even) td{background:rgba(255,255,255,.065)}
tbody tr{transition:background .15s}
tbody tr:hover td{background:rgba(16,185,129,.16);box-shadow:inset 3px 0 0 var(--primario)}
tbody tr:last-child td{border-bottom:0}
td.num,th.num{text-align:right}
td a{color:#7dd3fc;font-weight:600}
td a:hover{color:#fff}

/* Formularios */
.form{background:var(--vidrio);border:1px solid var(--borde);border-radius:16px;padding:1.1rem;margin-bottom:1.3rem;
  box-shadow:var(--sombra);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.fila{display:grid;grid-template-columns:1fr;gap:.75rem;margin-bottom:.75rem}
.campo label{display:block;font-size:.82rem;font-weight:700;margin-bottom:.3rem;color:#c9dcea}
.campo input,.campo select,.campo textarea{width:100%;padding:.6rem .7rem;color:var(--texto);
  background:rgba(6,14,22,.55);border:1px solid rgba(255,255,255,.16);border-radius:10px;font-size:1rem;transition:.18s}
.campo select option{background:#0d1c2a}
.campo textarea{resize:vertical}
.campo input:focus,.campo select:focus,.campo textarea:focus{outline:none;border-color:var(--primario);
  box-shadow:0 0 0 3px rgba(16,185,129,.25);background:rgba(6,14,22,.8)}

/* Botones interactivos */
.btn{display:inline-flex;align-items:center;gap:.4rem;background:linear-gradient(135deg,var(--primario),#0d9488);
  color:#fff;border:0;border-radius:10px;padding:.62rem 1.15rem;font-size:1rem;font-weight:700;cursor:pointer;
  text-decoration:none;transition:transform .15s,box-shadow .15s,filter .15s;
  box-shadow:0 4px 14px rgba(16,185,129,.35)}
.btn:hover{transform:translateY(-2px);filter:brightness(1.1);box-shadow:0 8px 22px rgba(16,185,129,.5);color:#fff}
.btn:active{transform:translateY(0) scale(.98);box-shadow:0 2px 8px rgba(16,185,129,.35)}
.btn-sec{background:linear-gradient(135deg,#475569,#1e293b);box-shadow:0 4px 14px rgba(0,0,0,.4)}
.btn-sec:hover{box-shadow:0 8px 22px rgba(71,85,105,.55)}
.btn-ok{background:linear-gradient(135deg,#22c55e,#15803d);box-shadow:0 4px 14px rgba(34,197,94,.35)}
.btn-ok:hover{box-shadow:0 8px 22px rgba(34,197,94,.5)}
.btn-peligro{background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:0 4px 14px rgba(244,63,94,.35)}
.btn-peligro:hover{box-shadow:0 8px 22px rgba(244,63,94,.5)}
.btn-peq{padding:.38rem .75rem;font-size:.85rem;border-radius:8px}
.acciones{display:flex;gap:.45rem;flex-wrap:wrap;margin:.9rem 0}
.barra{display:flex;gap:.65rem;flex-wrap:wrap;align-items:end;margin-bottom:1rem;
  background:var(--vidrio);border:1px solid var(--borde);border-radius:14px;padding:.8rem;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.barra .campo{min-width:150px}

/* Badges y semáforo con brillo */
.badge{display:inline-block;padding:.2rem .7rem;border-radius:20px;font-size:.74rem;font-weight:800;color:#fff;
  background:var(--gris);box-shadow:0 2px 8px rgba(0,0,0,.35);letter-spacing:.3px}
.b-rojo{background:linear-gradient(135deg,#f43f5e,#be123c);box-shadow:0 0 10px rgba(244,63,94,.55)}
.b-naranja{background:linear-gradient(135deg,#fb923c,#ea580c);color:#fff;box-shadow:0 0 10px rgba(251,146,60,.5)}
.b-amarillo{background:linear-gradient(135deg,#fbbf24,#d97706);color:#1c1005;box-shadow:0 0 10px rgba(251,191,36,.5)}
.b-verde{background:linear-gradient(135deg,#34d399,#059669);box-shadow:0 0 10px rgba(52,211,153,.5)}
.b-azul{background:linear-gradient(135deg,#38bdf8,#0284c7);box-shadow:0 0 10px rgba(56,189,248,.5)}
.dot{display:inline-block;width:.85rem;height:.85rem;border-radius:50%;vertical-align:middle}
.dot.rojo{background:var(--rojo);box-shadow:0 0 8px var(--rojo)}
.dot.naranja{background:var(--naranja);box-shadow:0 0 8px var(--naranja)}
.dot.amarillo{background:var(--amarillo);box-shadow:0 0 8px var(--amarillo)}
.dot.verde{background:var(--verde);box-shadow:0 0 8px var(--verde)}

/* Login */
.login-caja{max-width:400px;margin:7vh auto;background:rgba(13,28,42,.6);border:1px solid var(--borde);
  border-radius:20px;padding:2rem;box-shadow:0 20px 60px rgba(0,0,0,.5);
  -webkit-backdrop-filter:blur(20px) saturate(1.2);backdrop-filter:blur(20px) saturate(1.2)}
.login-caja h1{text-align:center;font-size:1.35rem;
  background:linear-gradient(90deg,#a7f3d0,#67e8f9);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.login-logo{display:block;margin:0 auto .8rem;height:86px;width:86px;object-fit:cover;border-radius:22px;
  box-shadow:0 0 26px rgba(16,185,129,.6);border:1px solid rgba(255,255,255,.25)}

/* Tiquete térmico 80mm (siempre claro para impresión) */
.tiquete{width:72mm;margin:0 auto;font-family:monospace;font-size:12px;color:#000;background:#fff;
  padding:6px;border-radius:4px}
.tiquete h2{text-align:center;font-size:15px;margin:.3rem 0}
.tiquete .linea{border-top:1px dashed #000;margin:.4rem 0}
.tiquete table{font-size:12px}
.tiquete th,.tiquete td{color:#000;border-bottom:1px solid #ddd;background:#fff!important}
@media print{
  .topbar,.menu,.pie,.no-imprimir{display:none!important}
  .contenido{max-width:none;padding:0}
  body{background:#fff}
  .form,.tabla-resp,.tarjeta{background:#fff!important}
  th,td{color:#000}
}

/* Foco visible accesible */
a:focus-visible,button:focus-visible,.btn:focus-visible,.menu-item:focus-visible{
  outline:2px solid var(--acento);outline-offset:2px}

/* Escritorio */
@media(min-width:900px){
  .menu{display:block;position:static;box-shadow:none}
  .menu-btn{display:none}
  .fila{grid-template-columns:repeat(2,1fr)}
  .fila.f3{grid-template-columns:repeat(3,1fr)}
  .fila.f4{grid-template-columns:repeat(4,1fr)}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important}
}

/* ==================== v1.3: login dividido, fotos, dashboard y modo claro === */

/* Fondo previo al primer pintado (evita parpadeo de tema) */
html{background:#0a1622}
html.pre-claro{background:#e9eff4}

/* Botón de tema en la topbar */
.tema-btn{background:rgba(255,255,255,.08);border:1px solid var(--borde);color:#fff;font-size:1.1rem;
  border-radius:10px;padding:.28rem .6rem;cursor:pointer;transition:.2s;line-height:1}
.tema-btn:hover{background:rgba(16,185,129,.25);transform:scale(1.08)}

/* ---------- Login en pantalla dividida ---------- */
.login-pagina{min-height:100vh}
.login-split{display:flex;min-height:100vh}
.login-marca{flex:1.1;display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;padding:3rem 2rem;color:#fff;position:relative;overflow:hidden;
  background:
    radial-gradient(600px 400px at 20% 10%, rgba(16,185,129,.25), transparent 60%),
    radial-gradient(500px 400px at 90% 90%, rgba(34,211,238,.18), transparent 60%),
    linear-gradient(150deg,#0a1a26,#0d2836)}
.login-marca-logo{height:110px;width:110px;object-fit:cover;border-radius:28px;margin-bottom:1.2rem;
  box-shadow:0 0 40px rgba(16,185,129,.65);border:1px solid rgba(255,255,255,.3)}
.login-marca h1{font-size:2.4rem;margin:.2rem 0 .4rem;font-weight:800;letter-spacing:1px;
  background:linear-gradient(90deg,#a7f3d0,#67e8f9);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.login-eslogan{color:#9fd8c8;font-size:1.05rem;letter-spacing:3px;text-transform:uppercase;margin:.2rem 0 2rem}
.login-destacados{list-style:none;margin:0 0 2rem;padding:0;max-width:420px;text-align:left}
.login-destacados li{display:flex;gap:.7rem;align-items:flex-start;margin-bottom:1rem;color:#d7e6ee;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.7rem .9rem;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.login-destacados li span{font-size:1.3rem}
.login-pie-marca{color:#6f8b9e;font-size:.85rem}
.login-formwrap{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem}
.login-formwrap .login-caja{margin:0;width:100%;max-width:400px}
.login-caja h2{text-align:center;margin:.2rem 0 .3rem;font-size:1.5rem}
.login-sub{text-align:center;color:var(--texto-suave);margin:0 0 1.2rem;font-size:.9rem}
@media(max-width:899px){
  .login-marca{display:none}
}

/* ---------- Fotos ---------- */
.foto-mini{height:42px;width:42px;object-fit:cover;border-radius:50%;border:2px solid rgba(16,185,129,.6);
  box-shadow:0 2px 8px rgba(0,0,0,.4);vertical-align:middle;cursor:pointer;transition:transform .15s}
a .foto-mini:hover,.foto-mini:hover{transform:scale(1.12)}
.foto-grande{max-height:150px;max-width:100%;object-fit:cover;border-radius:14px;
  border:1px solid var(--borde);box-shadow:var(--sombra)}
.foto-vacia{display:inline-flex;align-items:center;justify-content:center;background:rgba(255,255,255,.07);
  border:1px dashed rgba(255,255,255,.25);color:var(--texto-suave);font-size:1.1rem}
.foto-mini.foto-vacia{height:42px;width:42px;border-radius:50%}
.foto-grande.foto-vacia{min-height:90px;min-width:140px;border-radius:14px}
.taxi-ficha{display:flex;gap:1rem;align-items:flex-start;margin-bottom:.6rem;flex-wrap:wrap}

/* Galería de evidencias por etapa */
.galeria-etapa-titulo{font-size:1.05rem;margin:1rem 0 .6rem;color:#a7f3d0}
.galeria{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:.7rem;margin-bottom:.4rem}
.galeria-item{position:relative;display:block;border-radius:12px;overflow:hidden;border:1px solid var(--borde);
  background:rgba(255,255,255,.04);text-decoration:none;transition:transform .15s,box-shadow .15s;cursor:zoom-in}
.galeria-item:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(16,185,129,.3)}
.foto-galeria{width:100%;height:110px;object-fit:cover;display:block}
.galeria-pie{display:block;padding:.35rem .5rem;font-size:.72rem;color:var(--texto-suave);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.galeria-vacia{color:var(--texto-suave);font-size:.85rem;margin:.2rem 0 1rem}

/* Lightbox */
.lightbox{position:fixed;inset:0;z-index:200;background:rgba(4,10,16,.92);display:flex;flex-direction:column;
  align-items:center;justify-content:center;padding:2rem;cursor:zoom-out}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:80vh;border-radius:12px;box-shadow:0 20px 80px rgba(0,0,0,.7);
  border:1px solid rgba(255,255,255,.2);cursor:default}
.lightbox-cerrar{position:absolute;top:1rem;right:1.4rem;font-size:1.8rem;color:#fff;cursor:pointer;
  background:rgba(255,255,255,.1);border-radius:50%;width:44px;height:44px;display:flex;align-items:center;
  justify-content:center;border:1px solid rgba(255,255,255,.25)}
.lightbox-cerrar:hover{background:rgba(244,63,94,.5)}
.lightbox-pie{color:#cfe0ec;margin-top:.8rem;font-size:.9rem;text-align:center;max-width:90vw}

/* ---------- Dashboard enriquecido ---------- */
.tiles{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:.8rem;margin-bottom:1.3rem}
.tile{display:flex;gap:.8rem;align-items:center;background:var(--vidrio);border:1px solid var(--borde);
  border-radius:16px;padding:.95rem;box-shadow:var(--sombra);position:relative;overflow:hidden;
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);transition:transform .2s,box-shadow .2s}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
  background:linear-gradient(90deg,var(--primario),var(--acento))}
.tile:hover{transform:translateY(-3px);box-shadow:0 12px 36px rgba(16,185,129,.25)}
.tile.roja::before{background:linear-gradient(90deg,#f43f5e,#fb923c)}
.tile-icono{font-size:1.9rem;background:rgba(16,185,129,.14);border:1px solid rgba(16,185,129,.35);
  border-radius:14px;min-width:52px;height:52px;display:flex;align-items:center;justify-content:center}
.tile .num{font-size:1.35rem;font-weight:800;
  background:linear-gradient(135deg,#6ee7b7,#22d3ee);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
.tile .et{font-size:.8rem;color:var(--texto-suave)}
.tile .sub{font-size:.72rem;margin-top:.15rem;color:var(--texto-suave)}
.tend{font-weight:700}
.tend.buena{color:#34d399}.tend.mala{color:#f87171}.tend.neutra{color:var(--texto-suave)}

.panel-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:.9rem;margin-bottom:1.3rem}
.panel-grafico{background:var(--vidrio);border:1px solid var(--borde);border-radius:16px;padding:1rem;
  box-shadow:var(--sombra);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.panel-grafico h3{margin:.1rem 0 .8rem;font-size:1rem;color:#a7f3d0}
.grafico-svg{width:100%;height:auto;display:block}
.grafico-svg text{fill:#9fb4c7;font-size:11px;font-family:inherit}
.grafico-svg .eje{fill:#9fb4c7}
.grafico-svg .rejilla{stroke:rgba(255,255,255,.08);stroke-width:1}
.grafico-svg .leyenda text{fill:#cfe0ec;font-size:12px;font-weight:600}
.grafico-svg .dona-num{fill:#fff;font-size:30px;font-weight:800}
.dona-leyenda{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin-top:.6rem;font-size:.78rem;color:var(--texto-suave)}
.dona-leyenda i{display:inline-block;width:.7rem;height:.7rem;border-radius:3px;margin-right:.3rem}
.dona-leyenda b{color:var(--texto)}

.dos-col{display:grid;grid-template-columns:1fr;gap:1rem;margin-bottom:.4rem}
@media(min-width:900px){.dos-col{grid-template-columns:1fr 1fr}}
.actividad{display:flex;flex-direction:column;gap:.55rem}
.actividad-item{display:flex;gap:.7rem;background:var(--vidrio);border:1px solid var(--borde);border-radius:12px;
  padding:.65rem .8rem;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.actividad-icono{font-size:1.2rem}
.actividad-texto{font-size:.85rem}
.actividad-detalle{font-size:.78rem;color:var(--texto-suave)}
.actividad-fecha{font-size:.72rem;color:var(--texto-suave);margin-top:.15rem}

/* ==================== Modo claro ==================== */
body.modo-claro{
  --texto:#1f2d3d; --texto-suave:#5b7290;
  --borde:rgba(15,45,70,.14); --vidrio:rgba(255,255,255,.62);
  --gris:#64748b;
  background:
    radial-gradient(900px 500px at 85% -5%, rgba(34,211,238,.14), transparent 60%),
    radial-gradient(800px 500px at 8% 0%, rgba(16,185,129,.16), transparent 60%),
    radial-gradient(700px 600px at 50% 110%, rgba(59,130,246,.10), transparent 60%),
    linear-gradient(160deg,#eef3f7 0%,#e4edf3 55%,#dfe9f1 100%);
  color:var(--texto);
}
html.pre-claro{background:#e9eff4}
body.modo-claro a{color:#0284c7}
body.modo-claro .topbar{background:rgba(255,255,255,.78);color:#1f2d3d;border-bottom:1px solid var(--borde)}
body.modo-claro .brand span{background:linear-gradient(90deg,#059669,#0284c7);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.modo-claro .menu-btn{background:rgba(15,45,70,.06);color:#1f2d3d;border-color:var(--borde)}
body.modo-claro .tema-btn{background:rgba(15,45,70,.06);color:#1f2d3d;border-color:var(--borde)}
body.modo-claro .user-nombre{color:#33475b}
body.modo-claro .user-rol{color:#065f46}
body.modo-claro .salir{color:#059669}
body.modo-claro .menu{background:rgba(255,255,255,.72)}
body.modo-claro .menu-item{color:#33475b}
body.modo-claro .menu-item:hover{background:rgba(16,185,129,.20);color:#0b3b2e;border-color:rgba(16,185,129,.45)}
body.modo-claro .menu-item.activo{color:#fff}
body.modo-claro .menu-item.activo:hover{color:#fff;background:linear-gradient(135deg,rgba(16,185,129,.85),rgba(2,132,199,.85))}
/* Los botones-enlace (<a class="btn">) deben mantener texto blanco en modo claro */
body.modo-claro .btn{color:#fff}
body.modo-claro .btn:hover{color:#fff}
body.modo-claro .pestanas a{color:#33475b}
body.modo-claro .titulo{background:linear-gradient(90deg,#0f3b2e,#059669);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.modo-claro .pie{color:#7d93a8}
body.modo-claro .tarjeta .num,body.modo-claro .tile .num{
  background:linear-gradient(135deg,#059669,#0284c7);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.modo-claro .tile.roja .num,body.modo-claro .tarjeta.roja .num{
  background:linear-gradient(135deg,#e11d48,#ea580c);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.modo-claro th{background:rgba(16,185,129,.10);color:#0b6b4f}
body.modo-claro tbody tr:nth-child(odd) td{background:rgba(255,255,255,.55)}
body.modo-claro tbody tr:nth-child(even) td{background:rgba(15,45,70,.045)}
body.modo-claro tbody tr:hover td{background:rgba(16,185,129,.14)}
body.modo-claro th,body.modo-claro td{border-bottom:1px solid rgba(15,45,70,.08)}
body.modo-claro td a{color:#0284c7}
body.modo-claro td a:hover{color:#0b3b2e}
body.modo-claro .campo label{color:#33475b}
body.modo-claro .campo input,body.modo-claro .campo select,body.modo-claro .campo textarea{
  background:#fff;color:#1f2d3d;border-color:rgba(15,45,70,.2)}
body.modo-claro .campo select option{background:#fff}
body.modo-claro .campo input:focus,body.modo-claro .campo select:focus,body.modo-claro .campo textarea:focus{
  background:#fff}
body.modo-claro .flash-ok{background:rgba(34,197,94,.16);color:#166534}
body.modo-claro .flash-error{background:rgba(244,63,94,.12);color:#9f1239}
body.modo-claro .alerta-aviso{color:#92400e}
body.modo-claro .aviso-fase2{color:#0c4a6e}
body.modo-claro .login-caja{background:rgba(255,255,255,.75)}
body.modo-claro .login-caja h2{color:#0f3b2e}
body.modo-claro .login-sub{color:#5b7290}
body.modo-claro .login-marca h1{background:linear-gradient(90deg,#a7f3d0,#67e8f9);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
body.modo-claro .galeria-etapa-titulo{color:#0b6b4f}
body.modo-claro .galeria-item{background:rgba(255,255,255,.6)}
body.modo-claro .panel-grafico h3{color:#0b6b4f}
body.modo-claro .grafico-svg text{fill:#5b7290}
body.modo-claro .grafico-svg .eje{fill:#5b7290}
body.modo-claro .grafico-svg .rejilla{stroke:rgba(15,45,70,.10)}
body.modo-claro .grafico-svg .leyenda text{fill:#33475b}
body.modo-claro .grafico-svg .dona-num{fill:#1f2d3d}
body.modo-claro .dona-leyenda b{color:#1f2d3d}
body.modo-claro .foto-vacia{background:rgba(15,45,70,.06);border-color:rgba(15,45,70,.25)}
body.modo-claro ::-webkit-scrollbar-track{background:#e4edf3}
body.modo-claro .tend.buena{color:#059669}body.modo-claro .tend.mala{color:#e11d48}

/* ==================== v1.4: roles configurables, UX, almacén, cotizaciones ==================== */

/* Menú lateral colapsable */
.menu-sec{cursor:pointer;user-select:none;display:flex;align-items:center;gap:.4rem}
.menu-sec:hover{color:#fff}
body.modo-claro .menu-sec:hover{color:#0b3b2e}
.menu-sec-flecha{font-size:.65rem;color:var(--primario);min-width:.8rem;display:inline-block;transition:transform .15s}
.menu-items{display:block}
.menu-items.colapsada{display:none}

/* Barra de acciones fija al pie del formulario (botón Guardar siempre visible) */
.barra-acciones{position:sticky;bottom:0;z-index:20;display:flex;gap:.6rem;align-items:center;
  padding:.7rem .2rem;margin:1rem -1.1rem -1.1rem;border-top:1px solid var(--borde);
  background:rgba(10,22,34,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
body.modo-claro .barra-acciones{background:rgba(255,255,255,.85)}

/* Pestañas (módulo Almacén: compras / vales) */
.pestanas{display:flex;gap:.4rem;margin-bottom:1rem;flex-wrap:wrap}
.pestanas a{padding:.55rem 1.1rem;border-radius:10px;text-decoration:none;font-weight:700;color:#cfe0ec;
  background:var(--vidrio);border:1px solid var(--borde);transition:.15s}
.pestanas a:hover{color:#fff;border-color:var(--primario)}
.pestanas a.activa{background:linear-gradient(135deg,rgba(16,185,129,.85),rgba(2,132,199,.85));color:#fff;
  box-shadow:0 4px 16px rgba(16,185,129,.35)}
body.modo-claro .pestanas a{color:#33475b}
body.modo-claro .pestanas a.activa{color:#fff}

/* Encabezado solo para impresión */
.solo-impresion{display:none}
.imp-encabezado{display:flex;align-items:center;gap:1rem;border-bottom:3px solid #10b981;
  padding-bottom:.7rem;margin-bottom:1rem}
.imp-encabezado img{height:64px;width:64px;object-fit:cover;border-radius:14px}
.imp-empresa-bloque{flex:1}
.imp-empresa{font-size:1.5rem;font-weight:800;color:#0b3b2e}
.imp-titulo{font-size:1.05rem;color:#33475b;font-weight:600}
.imp-meta{text-align:right;font-size:.8rem;color:#5b7290}

/* Documento imprimible elegante (facturas y cotizaciones) */
.doc-imprimible{background:#fff;color:#1f2d3d;border-radius:14px;padding:1.6rem;max-width:800px;margin:0 auto 1.2rem;
  box-shadow:var(--sombra);border:1px solid var(--borde)}
.doc-imprimible .imp-encabezado{margin-bottom:1.2rem}
.doc-imprimible table{font-size:.88rem}
.doc-imprimible th{background:#0b3b2e;color:#fff;font-size:.74rem}
.doc-imprimible th,.doc-imprimible td{color:#1f2d3d;border-bottom:1px solid #e2e8f0;background:#fff!important}
.doc-imprimible tbody tr:nth-child(even) td{background:#f8fafc!important}
.doc-imprimible tbody tr:hover td{background:#f8fafc!important;box-shadow:none}
.doc-datos{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.2rem;font-size:.88rem}
.doc-datos .et{font-size:.72rem;text-transform:uppercase;letter-spacing:.8px;color:#64748b;font-weight:700}
.doc-totales{margin-left:auto;max-width:320px;width:100%;margin-top:1rem}
.doc-totales .fila-t{display:flex;justify-content:space-between;padding:.35rem 0;border-bottom:1px solid #e2e8f0;font-size:.9rem}
.doc-totales .fila-t.total{font-size:1.15rem;font-weight:800;border-bottom:0;border-top:2px solid #0b3b2e;padding-top:.6rem}
.doc-nota{margin-top:1.2rem;padding:.8rem 1rem;background:#f1f5f9;border-left:4px solid #10b981;border-radius:0 8px 8px 0;
  font-size:.82rem;color:#475569}
.doc-firmas{display:grid;grid-template-columns:1fr 1fr;gap:2rem;margin-top:2.5rem;font-size:.82rem;color:#64748b}
.doc-firmas div{border-top:1px solid #94a3b8;padding-top:.4rem;text-align:center}

@media print{
  .topbar,.menu,.pie,.no-imprimir,.barra-acciones,.acciones,.lightbox{display:none!important}
  .contenido{max-width:none;padding:0}
  body{background:#fff!important}
  body.modo-claro{background:#fff!important}
  .solo-impresion{display:block!important}
  .form,.tabla-resp,.tarjeta,.tile,.panel-grafico,.doc-imprimible{background:#fff!important;
    box-shadow:none!important;border:1px solid #ddd!important}
  th,td{color:#000!important}
  .titulo{display:none}
  .doc-imprimible{border:0!important;padding:0;max-width:none}
}
.badge.b-gris{background:#6c757d}.badge.b-morado{background:#7c3aed}

/* ==================== v1.5: tarifas por tipo, salida profesional, sidebar a iconos ==================== */

/* Iconos del menú */
.menu-ic{font-size:1.05rem;min-width:1.5rem;text-align:center;flex-shrink:0}
.menu-tx{flex:1}
.menu-sec-tx{flex:1}
#sideBtn{display:none}
@media(min-width:900px){
  #sideBtn{display:inline-block}
  body.side-colapsado .menu{width:64px;padding:.7rem .4rem}
  body.side-colapsado .menu-sec{display:none}
  body.side-colapsado .menu-tx{display:none}
  body.side-colapsado .menu-item{justify-content:center;padding:.55rem .2rem}
  body.side-colapsado .menu-items{display:block!important}
}

/* Pantalla de salida: resumen profesional de la transacción */
.total-grande{font-size:2rem;font-weight:800;text-align:center;margin:1rem 0 .4rem;
  background:linear-gradient(135deg,#10b981,#22d3ee);-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent}
body.modo-claro .total-grande{background:linear-gradient(135deg,#059669,#0284c7);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}

/* ---------- Auditoría de contraste en modo claro ---------- */
body.modo-claro .pestanas a:hover{color:#0b3b2e}
body.modo-claro .salir:hover{color:#065f46}
body.modo-claro .menu-btn:hover,body.modo-claro .tema-btn:hover{background:rgba(16,185,129,.18)}
body.modo-claro .menu-sec{color:#5b7290}
body.modo-claro .menu-ic{filter:saturate(1.1)}