/* ═══════════════════════════════════════════════════════════════════════════
   Ruta 12 Suite · suite.ruta12.com.ar
   Identidad: topbar azul marino + lienzo claro (estética del sistema Stock)
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --navy-900:#0a1f3a; --navy-800:#0f2d52; --navy-700:#16406f;
  --accion:#1a7aff; --accion-suave:#e8f1ff;
  --lienzo:#f6f8fb; --carta:#ffffff; --borde:#e5eaf1;
  --texto:#1c2b3a; --texto-suave:#64748b; --texto-tenue:#94a3b8;
  --ok:#16a34a; --alerta:#d97706; --peligro:#dc2626;
  --radio:14px; --sombra:0 1px 2px rgba(15,45,82,.06),0 8px 24px -12px rgba(15,45,82,.18);
}

*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  background:var(--lienzo); color:var(--texto);
  font-size:14px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
a{color:var(--accion);text-decoration:none}
button{font:inherit;cursor:pointer}
.num{font-variant-numeric:tabular-nums}

/* ── Login ──────────────────────────────────────────────────────────────── */
.login-fondo{
  min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:16px;
  background:linear-gradient(180deg,var(--lienzo) 0%,var(--lienzo) 55%,var(--accion-suave) 100%);
}
.login-carta{
  width:100%;max-width:400px;background:var(--carta);
  border-radius:18px;box-shadow:var(--sombra);padding:34px 30px;
  animation:subir .45s cubic-bezier(.22,1,.36,1);
}
@keyframes subir{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.login-logo{display:block;margin:0 auto;height:38px;width:auto;border-radius:4px}
.login-titulo{margin:20px 0 2px;text-align:center;font-size:20px;font-weight:800;
  letter-spacing:-.02em;color:var(--navy-900)}
.login-sub{margin:0 0 24px;text-align:center;color:var(--texto-suave);font-size:13px}
.login-google{display:flex;justify-content:center;min-height:44px}
.login-error{margin:0 0 16px;padding:11px 14px;border-radius:10px;font-size:13px;
  background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.login-nota{margin-top:18px;text-align:center;font-size:11.5px;color:var(--texto-tenue)}
.login-sep{margin:22px 0 14px;border-top:1px solid var(--borde);position:relative}
.login-admin-toggle{display:block;margin:0 auto;background:none;border:none;
  font-size:12px;color:var(--texto-tenue);text-decoration:underline;text-underline-offset:3px}
.login-admin-toggle:hover{color:var(--navy-800)}
.form-campo{width:100%;margin-top:10px;padding:11px 13px;border:1px solid var(--borde);
  border-radius:10px;font:inherit;color:var(--texto);background:#fff;outline:none;transition:.15s}
.form-campo:focus{border-color:var(--accion);box-shadow:0 0 0 3px rgba(26,122,255,.15)}
.boton{display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 18px;border-radius:10px;border:none;font-weight:600;font-size:13.5px;transition:.15s}
.boton-primario{background:var(--navy-800);color:#fff}
.boton-primario:hover{background:var(--navy-700)}
.boton-borde{background:#fff;color:var(--navy-800);border:1px solid rgba(15,45,82,.18)}
.boton-borde:hover{background:var(--navy-800);color:#fff}
.boton-bloque{width:100%;margin-top:12px}
.boton:disabled{opacity:.6;cursor:default}
.chips-modulos{margin:22px auto 0;padding:0;max-width:340px;list-style:none;
  display:flex;flex-wrap:wrap;justify-content:center;gap:5px 14px}
.chips-modulos li{display:flex;align-items:center;gap:6px;font-size:11px;
  font-weight:600;color:rgba(15,45,82,.55)}
.chips-modulos .punto{width:6px;height:6px;border-radius:50%}

/* ── Shell de la aplicación (pantalla completa estilo F11) ─────────────── */
.shell{display:flex;flex-direction:column;height:100dvh;overflow:hidden}
.topbar{
  flex:0 0 auto;display:flex;align-items:center;gap:14px;height:54px;padding:0 16px;
  background:var(--navy-800);color:#fff;box-shadow:0 1px 0 rgba(255,255,255,.06)}
.topbar-logo{height:26px;width:auto;border-radius:3px}
.topbar-titulo{font-weight:700;font-size:14.5px;letter-spacing:-.01em}
.topbar-badge{font-size:10px;font-weight:700;letter-spacing:.08em;padding:3px 8px;
  border-radius:99px;background:rgba(255,255,255,.14)}
.topbar-derecha{margin-left:auto;display:flex;align-items:center;gap:10px}
.topbar-usuario{display:flex;align-items:center;gap:9px;font-size:12.5px}
.topbar-usuario img{width:28px;height:28px;border-radius:50%;border:2px solid rgba(255,255,255,.25)}
.topbar-boton{background:rgba(255,255,255,.12);border:none;color:#fff;border-radius:8px;
  padding:7px 12px;font-size:12px;font-weight:600}
.topbar-boton:hover{background:rgba(255,255,255,.22)}
.cuerpo{flex:1 1 auto;display:flex;min-height:0}

/* ── Sidebar: menú ÚNICO colapsable de los 6 módulos ───────────────────── */
.sidebar{
  flex:0 0 248px;background:var(--carta);border-right:1px solid var(--borde);
  overflow-y:auto;padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.sidebar-seccion{font-size:10.5px;font-weight:700;letter-spacing:.09em;
  color:var(--texto-tenue);padding:10px 10px 5px}
.nav-item{display:flex;align-items:center;gap:10px;width:100%;padding:9px 10px;
  border:none;background:none;border-radius:10px;color:var(--texto);
  font-size:13px;font-weight:600;text-align:left}
.nav-item:hover{background:var(--lienzo)}
.nav-item.activo{background:var(--accion-suave);color:var(--accion)}
.nav-item .icono{width:20px;text-align:center;flex:0 0 auto}
.nav-item .flecha{margin-left:auto;font-size:10px;color:var(--texto-tenue);transition:transform .18s}
.nav-grupo.abierto>.nav-item .flecha{transform:rotate(90deg)}
.nav-sub{display:none;padding:2px 0 4px 22px}
.nav-grupo.abierto .nav-sub{display:block}
.nav-sub a{display:block;padding:6px 12px;border-radius:8px;font-size:12.5px;
  color:var(--texto-suave);border-left:2px solid var(--borde)}
.nav-sub a:hover{color:var(--texto);background:var(--lienzo)}
.nav-sub a.activo{color:var(--accion);border-left-color:var(--accion);font-weight:600}
.punto-modulo{width:8px;height:8px;border-radius:50%;flex:0 0 auto}

/* Módulos SIN acceso: se ven APAGADOS con candado, no ejecutables */
.nav-grupo.bloqueado .nav-item{
  color:var(--texto-tenue);cursor:not-allowed;filter:grayscale(1);opacity:.62}
.nav-grupo.bloqueado .nav-item:hover{background:none}
.nav-grupo.bloqueado .candado{margin-left:auto;font-size:12px}

/* ── Contenido (iframe: mantiene la pantalla completa al navegar) ──────── */
.contenido{flex:1 1 auto;min-width:0;background:var(--lienzo)}
.contenido iframe{display:block;width:100%;height:100%;border:0}

/* ── Páginas de módulo (dentro del iframe) ─────────────────────────────── */
.pagina-modulo{padding:22px 26px 40px;max-width:1200px;margin:0 auto}
.pagina-cabecera{margin-bottom:18px}
.pagina-cabecera h1{margin:0;font-size:19px;font-weight:800;letter-spacing:-.02em;
  color:var(--navy-900);display:flex;align-items:center;gap:10px}
.pagina-cabecera p{margin:4px 0 0;color:var(--texto-suave);font-size:12.5px}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));
  gap:12px;margin-bottom:18px}
.kpi{background:var(--carta);border:1px solid var(--borde);border-radius:var(--radio);
  padding:14px 16px;box-shadow:0 1px 2px rgba(15,45,82,.04)}
.kpi .kpi-etq{font-size:11px;font-weight:700;letter-spacing:.05em;color:var(--texto-tenue);
  text-transform:uppercase}
.kpi .kpi-valor{margin-top:3px;font-size:22px;font-weight:800;letter-spacing:-.02em;color:var(--navy-900)}
.kpi .kpi-extra{font-size:11.5px;color:var(--texto-suave)}
.kpi.k-peligro .kpi-valor{color:var(--peligro)}
.kpi.k-alerta .kpi-valor{color:var(--alerta)}
.kpi.k-ok .kpi-valor{color:var(--ok)}
.tabs{display:flex;gap:4px;margin-bottom:14px;border-bottom:1px solid var(--borde)}
.tabs a{padding:8px 14px;font-size:12.5px;font-weight:600;color:var(--texto-suave);
  border-bottom:2px solid transparent;margin-bottom:-1px}
.tabs a.activo{color:var(--accion);border-bottom-color:var(--accion)}
.carta{background:var(--carta);border:1px solid var(--borde);border-radius:var(--radio);
  box-shadow:0 1px 2px rgba(15,45,82,.04);overflow:hidden}
table.datos{width:100%;border-collapse:collapse;font-size:12.8px}
table.datos th{background:#fafbfd;text-align:left;font-size:10.5px;font-weight:700;
  letter-spacing:.06em;text-transform:uppercase;color:var(--texto-tenue);
  padding:10px 14px;border-bottom:1px solid var(--borde)}
table.datos td{padding:10px 14px;border-bottom:1px solid #f0f3f8}
table.datos tr:last-child td{border-bottom:none}
table.datos tr:hover td{background:#fafcff}
.badge{display:inline-block;padding:3px 9px;border-radius:99px;font-size:11px;font-weight:700}
.b-ok{background:#f0fdf4;color:#15803d}.b-alerta{background:#fffbeb;color:#b45309}
.b-peligro{background:#fef2f2;color:#b91c1c}.b-gris{background:#f1f5f9;color:#475569}
.b-info{background:var(--accion-suave);color:var(--accion)}
.vacio{padding:34px;text-align:center;color:var(--texto-tenue);font-size:13px}
.barra-vida{height:6px;background:#eef2f7;border-radius:99px;overflow:hidden;min-width:70px}
.barra-vida i{display:block;height:100%;border-radius:99px}

/* ── Pantallas especiales ──────────────────────────────────────────────── */
.bloqueado{max-width:430px;margin:12vh auto;text-align:center;background:var(--carta);
  border:1px solid var(--borde);border-radius:18px;padding:42px 34px;box-shadow:var(--sombra)}
.bloqueado-candado{font-size:40px}
.bloqueado h1{font-size:17px;margin:14px 0 6px;color:var(--navy-900)}
.bloqueado p{color:var(--texto-suave);font-size:13px;margin:0}

.pendiente-fondo{min-height:100dvh;display:flex;align-items:center;justify-content:center;
  padding:16px;background:linear-gradient(180deg,var(--lienzo),var(--accion-suave))}
.pendiente-carta{width:100%;max-width:440px;background:var(--carta);border-radius:18px;
  box-shadow:var(--sombra);padding:36px 32px;text-align:center;animation:subir .45s cubic-bezier(.22,1,.36,1)}
.pendiente-icono{width:64px;height:64px;margin:0 auto 16px;border-radius:50%;
  background:var(--accion-suave);display:flex;align-items:center;justify-content:center;font-size:28px}
.pendiente-carta h1{font-size:18px;margin:0 0 6px;color:var(--navy-900);letter-spacing:-.02em}
.pendiente-carta>p{color:var(--texto-suave);font-size:13px;margin:0 0 20px}
.pendiente-form{text-align:left}
.pendiente-form label{display:block;margin-top:12px;font-size:12px;font-weight:700;color:var(--texto-suave)}
.aviso-ok{margin-top:14px;padding:10px 14px;border-radius:10px;font-size:12.5px;
  background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}

/* ── Panel de usuarios (supersys) ──────────────────────────────────────── */
.usuarios-grid{display:grid;gap:14px}
.usuario-fila{display:flex;flex-wrap:wrap;align-items:center;gap:14px;padding:14px 16px}
.usuario-fila+.usuario-fila{border-top:1px solid var(--borde)}
.usuario-avatar{width:38px;height:38px;border-radius:50%;object-fit:cover;background:var(--accion-suave)}
.usuario-datos{min-width:210px}
.usuario-nombre{font-weight:700;font-size:13.5px}
.usuario-contacto{font-size:12px;color:var(--texto-suave)}
.usuario-acciones{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
.boton-ok{background:var(--ok);color:#fff}.boton-ok:hover{filter:brightness(1.08)}
.boton-peligro{background:#fff;color:var(--peligro);border:1px solid #fecaca}
.boton-peligro:hover{background:var(--peligro);color:#fff;border-color:var(--peligro)}
.boton-mini{padding:7px 13px;font-size:12px;border-radius:8px}
.accesos-editor{width:100%;background:#fafbfd;border:1px solid var(--borde);
  border-radius:10px;padding:12px 14px;margin-top:6px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
.accesos-editor label{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;font-weight:600}

/* ── Aviso de pantalla completa ────────────────────────────────────────── */
.fs-toast{position:fixed;left:50%;bottom:22px;transform:translateX(-50%) translateY(8px);
  background:var(--navy-800);color:#fff;font-size:12px;font-weight:600;
  padding:9px 16px;border-radius:99px;box-shadow:var(--sombra);opacity:0;
  pointer-events:none;transition:.3s;z-index:60}
.fs-toast.visible{opacity:1;transform:translateX(-50%)}

@media (max-width:840px){
  .sidebar{position:fixed;inset:54px auto 0 0;z-index:50;transform:translateX(-100%);
    transition:transform .22s;box-shadow:var(--sombra)}
  .sidebar.abierta{transform:none}
  .topbar-menu{display:inline-flex}
}
@media (min-width:841px){.topbar-menu{display:none}}