@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Space+Grotesk:wght@500;600;700&family=Poppins:wght@700;800&display=swap');
/* ============================================================
   BILLIA — Sistema de diseño "Aurora UI"
   Marca: BILL (naranja) + IA (azul). Fondo de auroras de color,
   superficies de vidrio (glassmorphism), gradientes y glow suave.
   Tipografía: Space Grotesk (títulos) + Inter (cuerpo).
   ============================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
    /* Marca */
    --brand-blue: #2563eb;
    --brand-blue-dark: #1d4ed8;
    --brand-blue-soft: #eef4ff;
    --brand-orange: #f97316;
    --brand-orange-dark: #ea580c;

    /* Paleta aurora (acentos) */
    --aurora-violet: #8b5cf6;
    --aurora-blue: #3b82f6;
    --aurora-teal: #14b8a6;
    --aurora-pink: #ec4899;

    /* Alias usados en toda la app */
    --color-primary: var(--brand-blue);
    --color-primary-dark: var(--brand-blue-dark);
    --color-accent: var(--brand-orange);
    --color-success: #16a34a;
    --color-danger: #dc2626;
    --color-warning: #d97706;

    --color-bg: #eaf0fb;
    --color-surface: rgba(255, 255, 255, 0.72);
    --color-card: rgba(255, 255, 255, 0.72);
    --color-border: rgba(255, 255, 255, 0.55);
    --color-text: #17203a;
    --color-text-muted: #5a6683;

    /* Vidrio */
    --glass-bg: rgba(255, 255, 255, 0.68);
    --glass-strong: rgba(255, 255, 255, 0.82);
    --glass-border: rgba(255, 255, 255, 0.6);
    --glass-blur: blur(18px) saturate(160%);

    --f-body: "Inter", 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    --f-head: "Space Grotesk", "Inter", system-ui, sans-serif;

    --radius: 18px;
    --radius-sm: 12px;
    --shadow-sm: 0 2px 10px rgba(31, 41, 90, 0.06);
    --shadow: 0 10px 30px rgba(31, 41, 90, 0.12);
    --shadow-lg: 0 24px 60px rgba(24, 30, 74, 0.28);
    --ring: 0 0 0 3px rgba(139, 92, 246, 0.28);
}

html, body { height: 100%; }
body {
    font-family: var(--f-body);
    background: var(--color-bg);
    color: var(--color-text);
    -webkit-font-smoothing: antialiased;
    position: relative;
    overflow-x: hidden;
}
/* Títulos con la fuente display */
.brand, .card h2, .home-greeting h1, .home-section-title, .pos-total,
.af-header, .login-logo .brand, h1, h2, h3 { font-family: var(--f-head); }

/* ---------- Fondo de auroras (capa fija tras todo) ---------- */
body::before {
    content: "";
    position: fixed;
    inset: -20% -10% -10% -10%;
    z-index: -2;
    background:
        radial-gradient(38vw 38vw at 12% 18%, rgba(139, 92, 246, 0.55), transparent 60%),
        radial-gradient(42vw 42vw at 88% 12%, rgba(59, 130, 246, 0.5), transparent 62%),
        radial-gradient(46vw 40vw at 78% 88%, rgba(20, 184, 166, 0.42), transparent 60%),
        radial-gradient(40vw 40vw at 18% 90%, rgba(236, 72, 153, 0.4), transparent 60%),
        radial-gradient(34vw 34vw at 50% 50%, rgba(249, 115, 22, 0.22), transparent 65%);
    filter: blur(30px);
    animation: auroraShift 26s ease-in-out infinite alternate;
}
body::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background: linear-gradient(180deg, rgba(234, 240, 251, 0.35), rgba(234, 240, 251, 0.7));
    pointer-events: none;
}
@keyframes auroraShift {
    0%   { transform: translate3d(0, 0, 0) rotate(0deg) scale(1); }
    50%  { transform: translate3d(2%, -1.5%, 0) rotate(4deg) scale(1.08); }
    100% { transform: translate3d(-2%, 2%, 0) rotate(-3deg) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) {
    body::before { animation: none; }
}

/* ---------- Logo de marca ---------- */
.brand, .login-logo .brand {
    font-family: 'Poppins', var(--f-head);
    font-weight: 800;
    letter-spacing: -0.6px;
    line-height: 1;
    white-space: nowrap;
}
.brand-bill { color: var(--brand-orange); }
.brand-ia {
    background: linear-gradient(120deg, var(--brand-blue), var(--aurora-violet));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
}
.brand-dot { color: var(--brand-orange); }

/* ---------- Login ---------- */
/* Con sesion guardada el login queda oculto hasta que la app decida mostrarlo. */
html.con-sesion #login-screen { display: none; }
#login-screen {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: calc(20px + env(safe-area-inset-top, 0px)) 20px calc(20px + env(safe-area-inset-bottom, 0px));
    position: relative;
    background:
        radial-gradient(900px 600px at 100% -10%, rgba(236, 72, 153, 0.5), transparent 60%),
        radial-gradient(1000px 700px at -10% 110%, rgba(20, 184, 166, 0.45), transparent 55%),
        radial-gradient(900px 700px at 50% 50%, rgba(139, 92, 246, 0.5), transparent 60%),
        linear-gradient(135deg, #0a1230, #17123f 55%, #0a1230);
}
.login-card {
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: 24px;
    padding: 40px 36px;
    width: 100%;
    max-width: 380px;
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: #fff;
}
.login-logo { text-align: center; margin-bottom: 28px; }
.login-logo .brand { font-size: 40px; }
.login-logo .brand-ia { -webkit-text-fill-color: #cdd7ff; }
.login-logo .brand-bill, .login-logo .brand-ia {
    border-bottom: 3px solid; padding-bottom: 4px; display: inline-block;
}
.login-logo .brand-bill { border-color: var(--brand-orange); }
.login-logo .brand-ia { border-color: #cdd7ff; }
.login-logo p { color: rgba(255, 255, 255, 0.72); font-size: 13px; margin-top: 10px; }
.login-logo .powered-by {
    margin-top: 8px; font-size: 10px; letter-spacing: .14em; text-transform: uppercase;
    color: rgba(255, 255, 255, .4); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.login-logo .powered-by b { color: rgba(205, 215, 255, .8); font-weight: 700; }
.login-form label { display: block; font-size: 13px; margin: 14px 0 6px; color: rgba(255, 255, 255, 0.8); font-weight: 500; }
.login-form input {
    width: 100%; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: var(--radius-sm); font-size: 14px; transition: border-color .15s, box-shadow .15s;
    background: rgba(255, 255, 255, 0.1); color: #fff;
}
.login-form input::placeholder { color: rgba(255, 255, 255, 0.5); }
.login-form input:focus { outline: none; border-color: var(--aurora-violet); box-shadow: var(--ring); background: rgba(255, 255, 255, 0.16); }
.btn-login {
    width: 100%; margin-top: 24px; padding: 13px; border: none; border-radius: var(--radius-sm);
    color: white; font-size: 15px; font-weight: 700; cursor: pointer; letter-spacing: .2px;
    background: linear-gradient(120deg, var(--brand-blue), var(--aurora-violet) 55%, var(--aurora-pink));
    background-size: 160% 160%;
    box-shadow: 0 10px 26px rgba(139, 92, 246, 0.5); transition: transform .12s, box-shadow .12s, background-position .4s;
}
.btn-login:hover { transform: translateY(-1px); background-position: 100% 0; box-shadow: 0 14px 32px rgba(139, 92, 246, 0.6); }
.login-error { color: #fda4af; font-size: 13px; margin-top: 12px; min-height: 18px; }

/* ---------- App Shell ---------- */
#app { display: none; height: 100vh; flex-direction: column; }
.header {
    background: var(--glass-strong);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    color: var(--color-text);
    /* padding-top con safe-area para no quedar bajo el notch/isla del iPhone */
    padding: calc(12px + env(safe-area-inset-top, 0px)) calc(22px + env(safe-area-inset-right, 0px)) 12px calc(22px + env(safe-area-inset-left, 0px));
    display: flex; align-items: center; gap: 14px;
    border-bottom: 1px solid var(--glass-border); box-shadow: var(--shadow-sm); z-index: 5;
}
.header .brand { font-size: 22px; }
.header-divider { width: 1px; height: 24px; background: rgba(90, 102, 131, 0.25); }
.header-empresa { font-size: 15px; font-weight: 700; color: var(--color-text); }
.header-user { font-size: 13px; color: var(--color-text-muted); }
.btn-logout {
    margin-left: auto; background: rgba(255, 255, 255, 0.5); color: var(--color-text); border: 1px solid var(--glass-border);
    padding: 7px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 600; transition: background .15s, transform .12s;
}
.btn-logout:hover { background: rgba(255, 255, 255, 0.8); transform: translateY(-1px); }
.body-layout { flex: 1; display: flex; overflow: hidden; }

/* ---------- Sidebar ---------- */
.sidebar {
    width: 236px;
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-right: 1px solid var(--glass-border);
    overflow-y: auto; padding: 10px;
}
.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, 0.3); border-radius: 8px; }
.nav-item {
    padding: 9px 14px; cursor: pointer; font-size: 14px; color: var(--color-text);
    border-radius: var(--radius-sm); margin: 2px 4px; transition: background .12s, color .12s, transform .1s;
    display: flex; align-items: center; gap: 8px;
}
.nav-item:hover { background: rgba(255, 255, 255, 0.55); }
.nav-item.active {
    background: linear-gradient(120deg, rgba(59, 130, 246, 0.16), rgba(139, 92, 246, 0.18));
    color: var(--brand-blue-dark); font-weight: 700;
    box-shadow: inset 3px 0 0 var(--aurora-violet);
}
.nav-item-top { font-weight: 700; margin-bottom: 2px; }

.nav-group { border-top: 1px solid rgba(255, 255, 255, 0.5); margin-top: 6px; padding-top: 4px; }
.nav-group-header {
    padding: 10px 14px; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--color-text-muted);
    display: flex; justify-content: space-between; align-items: center; text-transform: uppercase; letter-spacing: .5px;
    border-radius: var(--radius-sm);
}
.nav-group-header:hover { background: rgba(255, 255, 255, 0.5); }
.nav-chevron { transition: transform 0.18s; font-size: 11px; color: var(--color-text-muted); }
.nav-group-header.collapsed .nav-chevron { transform: rotate(-90deg); }
.nav-group-items { max-height: 800px; overflow: hidden; transition: max-height 0.22s ease; }
.nav-group-items.collapsed { max-height: 0; }
.nav-group-items .nav-item { padding-left: 22px; font-size: 13px; }

.nav-subgroup-header {
    padding: 8px 14px 8px 22px; cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--color-text-muted);
    display: flex; justify-content: space-between; align-items: center; border-radius: var(--radius-sm);
}
.nav-subgroup-header:hover { background: rgba(255, 255, 255, 0.5); }
.nav-subgroup-header .nav-chevron { font-size: 10px; }
.nav-subgroup-items { max-height: 500px; overflow: hidden; transition: max-height 0.2s ease; }
.nav-subgroup-items.collapsed { max-height: 0; }
.nav-subgroup-items .nav-item { padding-left: 34px; font-size: 12.5px; }

/* ---------- Main content ---------- */
.content { flex: 1; overflow-y: auto; padding: 28px; }
.page { display: none; }
.page.active { display: block; animation: fadeIn .25s ease; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.card {
    background: var(--glass-bg);
    backdrop-filter: var(--glass-blur);
    -webkit-backdrop-filter: var(--glass-blur);
    border-radius: var(--radius); padding: 22px;
    box-shadow: var(--shadow); margin-bottom: 22px; border: 1px solid var(--glass-border);
}
.card h2 { font-size: 17px; margin-bottom: 16px; font-weight: 800; letter-spacing: -0.2px; }

.form-row { display: flex; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.form-group { flex: 1; min-width: 160px; }
.form-group label { display: block; font-size: 12px; color: var(--color-text-muted); margin-bottom: 5px; font-weight: 500; }
.form-group input, .form-group select, .form-group textarea {
    width: 100%; padding: 9px 12px; border: 1px solid rgba(140, 152, 186, 0.35); border-radius: var(--radius-sm);
    font-size: 14px; background: rgba(255, 255, 255, 0.7); transition: border-color .15s, box-shadow .15s, background .15s;
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none; border-color: var(--aurora-violet); box-shadow: var(--ring); background: rgba(255, 255, 255, 0.95);
}

.btn {
    padding: 9px 18px; border: none; border-radius: var(--radius-sm); font-size: 14px; cursor: pointer;
    font-weight: 600; transition: transform .1s, box-shadow .12s, filter .12s; letter-spacing: .1px;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: linear-gradient(120deg, var(--brand-blue), var(--aurora-violet)); color: white; box-shadow: 0 6px 16px rgba(99, 102, 241, .38); }
.btn-primary:hover { filter: brightness(1.06); box-shadow: 0 10px 22px rgba(99, 102, 241, .5); }
.btn-accent { background: linear-gradient(120deg, var(--brand-orange), var(--aurora-pink)); color: white; box-shadow: 0 6px 16px rgba(249,115,22,.4); }
.btn-accent:hover { filter: brightness(1.06); box-shadow: 0 10px 22px rgba(236, 72, 153, .5); }
.btn-success { background: linear-gradient(120deg, #16a34a, #14b8a6); color: white; box-shadow: 0 6px 16px rgba(20,184,166,.38); }
.btn-danger { background: linear-gradient(120deg, #dc2626, #ec4899); color: white; box-shadow: 0 6px 16px rgba(220,38,38,.35); }
.btn-secondary { background: rgba(255, 255, 255, 0.6); color: var(--color-text); border: 1px solid var(--glass-border); backdrop-filter: blur(6px); }
.btn-secondary:hover { background: rgba(255, 255, 255, 0.9); }
.btn-scan { background: linear-gradient(120deg, rgba(59,130,246,.18), rgba(139,92,246,.2)); color: var(--brand-blue-dark); border: 1px solid rgba(139,92,246,.35); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; font-size: 13px; border-bottom: 1px solid rgba(140, 152, 186, 0.22); }
th { color: var(--color-text-muted); font-weight: 700; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: rgba(255, 255, 255, 0.5); }

.badge { display: inline-block; padding: 3px 11px; border-radius: 999px; font-size: 11px; font-weight: 700; }
.badge-ACEPTADO { background: #dcfce7; color: #166534; }
.badge-PENDIENTE { background: #fef3c7; color: #92400e; }
.badge-RECHAZADO { background: #fee2e2; color: #991b1b; }
.badge-OBSERVADO { background: #fef3c7; color: #92400e; }
.badge-CONTINGENCIA { background: #ffedd5; color: #9a3412; }
.badge-RECIBIDO { background: #dcfce7; color: #166534; }
.badge-EN_TRANSITO { background: #dbeafe; color: #1e40af; }
.badge-ANULADO { background: #eef1f8; color: #475569; }

.toast {
    position: fixed; bottom: 24px; right: 24px;
    background: rgba(15, 18, 45, 0.82);
    backdrop-filter: blur(10px);
    color: white; padding: 13px 20px; border-radius: 14px; font-size: 14px;
    box-shadow: var(--shadow); z-index: 1000; opacity: 0; transform: translateY(8px);
    transition: opacity .3s, transform .3s; border: 1px solid rgba(255,255,255,0.12);
}
.toast.show { opacity: 1; transform: none; }
.toast.error { background: linear-gradient(120deg, rgba(220,38,38,.92), rgba(236,72,153,.92)); }
.toast.success { background: linear-gradient(120deg, rgba(22,163,74,.92), rgba(20,184,166,.92)); }

/* ---------- Scanner modal ---------- */
.scanner-modal { position: fixed; inset: 0; background: rgba(10, 12, 30, 0.8); backdrop-filter: blur(6px); display: flex; align-items: center; justify-content: center; z-index: 2000; }
.scanner-modal-content { background: rgba(17, 17, 30, 0.9); border-radius: 18px; padding: 16px; width: 90%; max-width: 420px; border: 1px solid rgba(255,255,255,0.12); }
.scanner-header { display: flex; justify-content: space-between; align-items: center; color: white; margin-bottom: 10px; font-size: 14px; }
.scanner-close { background: none; border: none; color: white; font-size: 18px; cursor: pointer; }
.scanner-video { width: 100%; border-radius: 12px; background: black; }
.scanner-hint { color: #9ca3af; text-align: center; font-size: 12px; margin-top: 8px; }
.scanner-error { color: #fca5a5; text-align: center; font-size: 13px; margin-top: 8px; }

/* ---------- POS grid ---------- */
.pos-grid { display: grid; grid-template-columns: 1.5fr 1fr; gap: 20px; }
.pos-lineas-item { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid rgba(140,152,186,0.22); font-size: 13px; }
.pos-total { font-size: 24px; font-weight: 800; text-align: right; padding: 12px 0;
    background: linear-gradient(120deg, var(--brand-blue-dark), var(--aurora-violet));
    -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }

.stock-bajo { color: var(--color-danger); font-weight: 700; }

.upload-summary { margin-top: 16px; font-size: 13px; }
.upload-summary .error-row { color: var(--color-danger); }

/* ---------- Pestañas (tabs) ---------- */
.tabs .btn { border-radius: 999px; }

/* ---------- Inicio (Dashboard) ---------- */
.home-layout { display: block; max-width: 1200px; }
.home-greeting {
    padding: 30px 34px; border-radius: var(--radius); margin-bottom: 24px;
    background: linear-gradient(120deg, #12123a, #3b2b8f 45%, #1d4ed8 80%, #14b8a6);
    background-size: 180% 180%;
    color: white; box-shadow: var(--shadow); position: relative; overflow: hidden;
    display: flex; flex-direction: column; gap: 6px;
    animation: greetShift 18s ease-in-out infinite alternate;
}
@keyframes greetShift { from { background-position: 0 0; } to { background-position: 100% 100%; } }
.home-greeting h1 { font-size: 30px; letter-spacing: -0.5px; }
.home-greeting p { font-size: 15px; color: rgba(255,255,255,0.88); }

.home-section-title { font-size: 12px; font-weight: 700; color: var(--color-text-muted); margin-bottom: 12px; text-transform: uppercase; letter-spacing: .6px; }
.home-section { margin-bottom: 26px; }
.home-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.home-card {
    border: none; border-radius: var(--radius); padding: 20px 16px; color: white; font-size: 13.5px;
    font-weight: 700; cursor: pointer; text-align: center; display: flex; flex-direction: column;
    align-items: center; gap: 12px; transition: transform 0.15s, box-shadow 0.15s; box-shadow: var(--shadow-sm);
}
.home-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.home-card .home-card-icon { display: flex; }
.home-card .home-card-icon svg { width: 26px; height: 26px; }

.home-card-facturacion { background: linear-gradient(150deg, #fb923c, #ec4899); }
.home-card-productos { background: linear-gradient(150deg, #a78bfa, #7c3aed); }
.home-card-pos { background: linear-gradient(150deg, #3b82f6, #1d4ed8); }
.home-card-reportes { background: linear-gradient(150deg, #2dd4bf, #0d9488); }

@media (max-width: 900px) {
    .sidebar { width: 200px; }
}

/* ---------- Asistente flotante (chat) ---------- */
/* ===== Asistente flotante: Billy en cristal (liquid glass) =====
   El panel usa el mismo material de vidrio del resto de la app: tinta blanca
   translúcida, refracción y borde de luz, con un resplandor aurora suave
   derivando detrás de la conversación. */

#af-fab {
    position: fixed; right: 24px; bottom: 24px; z-index: 1500;
    width: 62px; height: 62px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-blue), var(--aurora-violet) 60%, var(--aurora-pink));
    color: #fff; box-shadow: 0 10px 26px rgba(76, 53, 173, 0.45);
    display: flex; align-items: flex-end; justify-content: center;
    transition: transform .14s ease, box-shadow .2s ease;
    overflow: hidden;
}
#af-fab:hover { transform: translateY(-2px) scale(1.05); box-shadow: 0 16px 34px rgba(76, 53, 173, 0.55); }
#af-fab:focus-visible, #af-cerrar:focus-visible, #af-enviar:focus-visible, .af-chip:focus-visible {
    outline: 2px solid var(--aurora-violet); outline-offset: 2px;
}
#af-fab .af-billy { transform: translateY(6px); }

.af-billy { display: inline-flex; pointer-events: none; }
.af-billy svg { width: 100%; height: 100%; }
.af-billy-fallback {
    width: 26px; height: 26px; border-radius: 50%; background: #fff;
    color: var(--brand-blue); font-weight: 800; align-items: center; justify-content: center;
}

#af-panel {
    position: fixed; right: 24px; bottom: 24px; z-index: 1500;
    width: 420px; max-width: calc(100vw - 24px);
    height: min(660px, calc(100dvh - 48px));
    background-color: rgba(255, 255, 255, .42);
    background-image: var(--lg-tint);
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
    border: var(--lg-border);
    color: var(--color-text);
    border-radius: 24px; overflow: hidden;
    box-shadow: var(--lg-edge), var(--lg-depth-lg);
    flex-direction: column;
    animation: af-entrar .26s cubic-bezier(.16, 1, .3, 1);
}
@keyframes af-entrar { from { opacity: 0; transform: translateY(16px) scale(.97); } }
/* Sin backdrop-filter la tinta sola es ilegible: fondo casi solido. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
    #af-panel { background-color: rgba(255, 255, 255, .95); }
}

#af-panel ::selection { background: rgba(139, 92, 246, .35); }

/* El resplandor aurora deriva muy lento detrás de la conversación. */
.af-aurora {
    position: absolute; inset: -30%; pointer-events: none;
    background:
        radial-gradient(42% 38% at 22% 12%, rgba(139, 92, 246, .20), transparent 70%),
        radial-gradient(38% 34% at 85% 30%, rgba(37, 99, 235, .16), transparent 70%),
        radial-gradient(44% 40% at 70% 95%, rgba(20, 184, 166, .14), transparent 70%),
        radial-gradient(30% 28% at 12% 80%, rgba(236, 72, 153, .12), transparent 70%);
    animation: af-deriva 26s ease-in-out infinite alternate;
}
@keyframes af-deriva {
    to { transform: translate3d(4%, -3%, 0) rotate(4deg) scale(1.06); }
}

.af-header {
    position: relative; display: flex; align-items: center; gap: 11px;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(140, 152, 186, .22);
}
.af-avatar {
    flex: 0 0 auto; display: inline-flex; align-items: flex-end; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(139, 92, 246, .18); overflow: hidden;
}
.af-avatar .af-billy { transform: translateY(3px); }
.af-avatar-head { width: 40px; height: 40px; background: rgba(139, 92, 246, .22); }
.af-avatar-head .af-billy { transform: translateY(5px); }
.af-head-txt { flex: 1; display: flex; flex-direction: column; line-height: 1.3; }
.af-head-txt b { font-family: var(--f-head); font-size: 17px; letter-spacing: -0.02em; color: var(--color-text); }
.af-head-txt small { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); }
.af-punto { width: 6px; height: 6px; border-radius: 50%; background: var(--aurora-teal); }
.af-header button {
    background: rgba(255, 255, 255, .55); border: none; color: var(--color-text-muted); cursor: pointer;
    display: flex; align-items: center; justify-content: center;
    width: 30px; height: 30px; border-radius: 50%;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
    transition: background .12s ease, color .12s ease;
}
.af-header button:hover { background: rgba(255, 255, 255, .85); color: var(--color-text); }
.af-header button svg { width: 14px; height: 14px; }

.af-hist {
    position: relative; flex: 1; overflow-y: auto;
    padding: 18px 16px 8px; display: flex; flex-direction: column; gap: 12px;
    scrollbar-width: thin; scrollbar-color: rgba(139, 92, 246, .40) transparent;
}
.af-hist::-webkit-scrollbar { width: 8px; }
.af-hist::-webkit-scrollbar-thumb { background: rgba(139, 92, 246, .40); border-radius: 999px; }
.af-hist::-webkit-scrollbar-track { background: transparent; }

.af-fila { display: flex; align-items: flex-end; gap: 8px; animation: af-msg-in .18s ease; }
.af-fila-user { justify-content: flex-end; }
@keyframes af-msg-in { from { opacity: 0; transform: translateY(6px); } }

.af-msg {
    max-width: 82%; padding: 10px 14px; border-radius: 18px;
    font-size: 13.5px; line-height: 1.55; white-space: pre-wrap; overflow-wrap: anywhere;
}
.af-msg-bot {
    background: rgba(255, 255, 255, .78); color: var(--color-text);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 2px 10px rgba(31, 41, 90, .07);
    border-bottom-left-radius: 6px;
}
.af-msg-user {
    background: linear-gradient(120deg, var(--brand-blue), var(--aurora-violet));
    color: #fff; border-bottom-right-radius: 6px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 4px 14px rgba(99, 102, 241, .28);
}

/* "Pensando": tres puntos que laten, como los chats de IA. */
.af-pensando { display: inline-flex; gap: 5px; padding: 14px 16px; }
.af-pensando i {
    width: 7px; height: 7px; border-radius: 50%; background: var(--aurora-violet);
    opacity: .35; animation: af-dot 1.1s infinite ease-in-out;
}
.af-pensando i:nth-child(2) { animation-delay: .18s; }
.af-pensando i:nth-child(3) { animation-delay: .36s; }
@keyframes af-dot { 40% { opacity: 1; transform: translateY(-3px); } }

.af-chips { position: relative; display: flex; gap: 7px; flex-wrap: wrap; padding: 4px 16px 10px; }
.af-chip {
    font-size: 12.5px; padding: 8px 13px; border-radius: 999px; border: none;
    background: rgba(255, 255, 255, .60); color: var(--color-text); cursor: pointer;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), 0 2px 8px rgba(31, 41, 90, .08);
    transition: background .12s ease, box-shadow .12s ease;
}
.af-chip:hover { background: rgba(255, 255, 255, .9); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 4px 14px rgba(31, 41, 90, .12); }

.af-input-zona { position: relative; padding: 10px 14px 10px; }
.af-capsula {
    display: flex; align-items: center; gap: 6px;
    background: rgba(255, 255, 255, .62); border-radius: 999px;
    padding: 5px 5px 5px 18px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7);
    transition: background .12s ease, box-shadow .12s ease;
}
.af-capsula:focus-within { background: rgba(255, 255, 255, .88); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .8), 0 0 0 2px rgba(139, 92, 246, .45); }
.af-capsula input {
    flex: 1; min-width: 0; background: transparent; border: none; outline: none;
    color: var(--color-text); caret-color: var(--aurora-violet);
    font-size: 13.5px; font-family: var(--f-body); padding: 8px 0;
}
.af-capsula input::placeholder { color: var(--color-text-muted); }
#af-enviar {
    flex: 0 0 auto; width: 38px; height: 38px; border-radius: 50%; border: none; cursor: pointer;
    background: linear-gradient(135deg, var(--brand-blue), var(--aurora-violet));
    color: #fff; display: flex; align-items: center; justify-content: center;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .4), 0 4px 14px rgba(99, 102, 241, .35);
    transition: transform .12s ease, opacity .12s ease;
}
#af-enviar:hover { transform: scale(1.07); }
#af-enviar:disabled { opacity: .4; cursor: default; transform: none; }
#af-enviar svg { width: 16px; height: 16px; }

.af-uso { font-size: 11px; color: var(--color-text-muted); text-align: center; padding: 7px 4px 0; }

@media (max-width: 520px) {
    #af-panel { right: 8px; left: 8px; bottom: 8px; width: auto; height: min(660px, calc(100dvh - 16px)); }
}

@media (prefers-reduced-motion: reduce) {
    #af-panel, .af-fila, .af-aurora { animation: none; }
    .af-pensando i { animation: none; opacity: .8; }
    #af-fab, #af-fab:hover, #af-enviar:hover { transform: none; }
}

/* ============================================================
   Efectos: brillo en botones, glow en cards, tilt 3D en tiles
   ============================================================ */

/* Barrido de brillo en botones con degradado */
.btn-primary, .btn-accent, .btn-success, .btn-danger, .btn-login { position: relative; overflow: hidden; }
.btn-primary::after, .btn-accent::after, .btn-success::after, .btn-danger::after, .btn-login::after {
    content: ""; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
    background: linear-gradient(100deg, transparent, rgba(255,255,255,.5), transparent);
    transform: skewX(-18deg); transition: left .55s ease; pointer-events: none;
}
.btn-primary:hover::after, .btn-accent:hover::after, .btn-success:hover::after,
.btn-danger:hover::after, .btn-login:hover::after { left: 150%; }

/* Cards: glow de borde al hover (sin moverse, para no estorbar formularios) */
.card { transition: border-color .2s ease, box-shadow .25s ease; }
.card:hover { border-color: rgba(139, 92, 246, 0.4); box-shadow: 0 16px 44px rgba(99, 102, 241, 0.16); }

/* Tiles con tilt 3D (dashboard y hub de configuración) */
.home-card, .cfg-card {
    position: relative; transform-style: preserve-3d; will-change: transform;
    transition: transform .18s ease, box-shadow .2s ease;
}
.home-card::after, .cfg-card::after {
    content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
    opacity: 0; transition: opacity .2s;
    background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.5), transparent 50%);
}
.home-card:hover::after, .cfg-card:hover::after { opacity: .9; }
.cfg-card:hover { border-color: color-mix(in srgb, var(--aurora-violet) 45%, var(--color-border)); box-shadow: var(--shadow); }

@media (prefers-reduced-motion: reduce) {
    .btn-primary::after, .btn-accent::after, .btn-success::after, .btn-danger::after, .btn-login::after { display: none; }
    .home-card, .cfg-card { transition: none; }
}

/* ============================================================
   Botón de menú (móvil), botón instalar y overlay del cajón
   ============================================================ */
.btn-menu {
    display: flex; background: rgba(255,255,255,0.5); border: 1px solid var(--glass-border);
    color: var(--color-text); width: 40px; height: 40px; border-radius: 12px; cursor: pointer;
    align-items: center; justify-content: center; flex: 0 0 auto;
}
.btn-menu:hover { background: rgba(255,255,255,0.85); }
.btn-instalar {
    background: linear-gradient(120deg, var(--brand-blue), var(--aurora-violet)); color: #fff;
    border: none; padding: 8px 16px; border-radius: 999px; cursor: pointer; font-size: 13px; font-weight: 700;
    box-shadow: 0 6px 16px rgba(99,102,241,.4); white-space: nowrap;
}
.btn-instalar:hover { filter: brightness(1.06); }
.sidebar-overlay { display: none; }

/* Menu plegado (escritorio): el panel del grupo se ve completo. */
@media (min-width: 901px) {
    .sidebar { transition: margin-left .22s ease, opacity .18s ease; }
    body.menu-plegado .sidebar { margin-left: -236px; opacity: 0; pointer-events: none; }
    body.menu-plegado .btn-mostrar-menu { display: flex; }
}
.btn-mostrar-menu {
    display: none; position: fixed; left: 0; top: 50%; transform: translateY(-50%); z-index: 60;
    width: 26px; height: 64px; border: 1px solid var(--glass-border); border-left: 0; border-radius: 0 12px 12px 0;
    background: rgba(255,255,255,.75); backdrop-filter: blur(8px); color: var(--brand-blue); cursor: pointer;
    align-items: center; justify-content: center; font-size: 18px; font-weight: 700; box-shadow: var(--shadow-sm);
}
.btn-mostrar-menu:hover { background: #fff; width: 30px; }

/* Barra de navegación inferior — oculta en escritorio */
.bottomnav { display: none; }

/* Numero de version desplegada (esquina inferior izquierda). Referencia visual
   para confirmar que el navegador ya cargo el ultimo deploy y no una copia en cache. */
.version-badge {
    position: fixed; left: 10px; bottom: 8px; z-index: 40;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px; color: rgba(148, 163, 184, .55);
    pointer-events: none; user-select: none;
}
@media (max-width: 860px) {
    .version-badge { bottom: 68px; } /* por encima de la barra de navegacion inferior movil */
}

/* ============================================================
   RESPONSIVE — versión móvil (todo cuadrado y apilado)
   ============================================================ */
@media (max-width: 860px) {
    .btn-menu { display: flex; }
    .header { gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 14px 10px 14px; position: sticky; top: 0; }
    .header .brand { font-size: 20px; }
    .header-divider, .header-user { display: none; }
    .header-empresa { font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 40vw; }
    .btn-instalar { padding: 7px 12px; font-size: 12px; }
    .btn-logout { padding: 7px 13px; }

    /* Sidebar como cajón deslizante. Cerrado con margin-left (sin transform en CSS);
       la apertura la fija app.js con un transform inline (combo robusto entre navegadores). */
    .body-layout { position: relative; }
    .sidebar {
        position: fixed; top: 0; bottom: 0; left: 0; margin-left: -290px; width: 272px; max-width: 82vw;
        z-index: 60; padding-top: 14px; box-shadow: none;
    }
    .sidebar.open { box-shadow: var(--shadow-lg); }
    .sidebar-overlay.show {
        display: block; position: fixed; inset: 0; z-index: 55;
        background: rgba(10, 14, 30, 0.45); backdrop-filter: blur(2px);
    }
    .nav-item { padding: 12px 14px; }           /* objetivos táctiles más grandes */
    .nav-group-header { padding: 12px 14px; }

    /* Contenido */
    .content { padding: 16px 14px; }
    .card { padding: 16px; overflow-x: auto; }  /* tablas anchas hacen scroll dentro de la card */
    .card h2 { font-size: 16px; }
    .form-row { gap: 10px; }
    .form-group { min-width: 100%; }            /* campos a lo ancho, uno por fila */
    .btn { padding: 11px 18px; }                /* botones más cómodos al toque */
    table { min-width: 520px; }                 /* la tabla conserva su forma y se desplaza */

    /* POS y grillas a una columna */
    .pos-grid { grid-template-columns: 1fr; gap: 14px; }
    .home-greeting { padding: 22px 20px; }
    .home-greeting h1 { font-size: 24px; }
    .home-cards { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; }

    /* Barra de navegación inferior flotante (móvil) */
    .bottomnav {
        display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 65;
        justify-content: space-around; align-items: stretch;
        background: var(--glass-strong);
        backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur);
        border-top: 1px solid var(--glass-border);
        box-shadow: 0 -8px 24px rgba(31, 41, 90, 0.12);
        padding: 6px 4px calc(6px + env(safe-area-inset-bottom, 0px));
    }
    .bn-item {
        flex: 1; background: none; border: none; cursor: pointer; color: var(--color-text-muted);
        display: flex; flex-direction: column; align-items: center; gap: 2px;
        font-size: 10.5px; font-weight: 700; padding: 4px 2px; border-radius: 12px;
        transition: color .12s, background .12s;
    }
    .bn-item svg { width: 23px; height: 23px; }
    .bn-item.active { color: var(--brand-blue); }
    .bn-item.active svg { filter: drop-shadow(0 2px 6px rgba(37,99,235,.35)); }

    /* Deja espacio para que la barra no tape el contenido / el asistente */
    .content { padding-bottom: 78px; }
    #af-fab { right: 16px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); }
    #af-panel { right: 8px; left: 8px; bottom: calc(80px + env(safe-area-inset-bottom, 0px)); width: auto; }
}

@media (max-width: 420px) {
    .home-cards { grid-template-columns: 1fr 1fr; }
    .header-empresa { max-width: 34vw; }
}

/* ============================================================
   LIQUID GLASS — material translúcido con brillo especular,
   refracción (blur + saturación) y bordes de luz. Se aplica al
   final para elevar todas las superficies del sistema.
   ============================================================ */
:root {
    --lg-blur: blur(28px) saturate(180%);
    --lg-tint: linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.20));
    --lg-tint-strong: linear-gradient(180deg, rgba(255,255,255,.74), rgba(255,255,255,.38));
    --lg-border: 1px solid rgba(255,255,255,.55);
    /* borde de luz: reflejo especular arriba + rebote sutil abajo */
    --lg-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 -1px 0 rgba(255,255,255,.18);
    --lg-depth: 0 10px 30px rgba(31,41,90,.14);
    --lg-depth-lg: 0 24px 60px rgba(24,30,74,.28);
}

/* Refracción en todas las superficies de vidrio */
.header, .sidebar, .card, .bottomnav, .login-card,
.cfg-card, .btn-secondary, .btn-menu, .btn-logout, .toast {
    -webkit-backdrop-filter: var(--lg-blur);
    backdrop-filter: var(--lg-blur);
}

.card {
    background-color: rgba(255, 255, 255, .34);
    background-image: var(--lg-tint);
    border: var(--lg-border);
    border-radius: 22px;
    box-shadow: var(--lg-edge), var(--lg-depth);
}
.card:hover {
    border-color: rgba(255, 255, 255, .8);
    box-shadow: var(--lg-edge), 0 16px 44px rgba(99, 102, 241, .18);
}

.header {
    background-color: rgba(255, 255, 255, .40);
    background-image: var(--lg-tint-strong);
    border-bottom: var(--lg-border);
    box-shadow: var(--lg-edge), 0 6px 20px rgba(31, 41, 90, .08);
}

.sidebar {
    background-color: rgba(255, 255, 255, .32);
    background-image: var(--lg-tint);
    border-right: var(--lg-border);
    box-shadow: var(--lg-edge);
}

.bottomnav {
    background-color: rgba(255, 255, 255, .44);
    background-image: var(--lg-tint-strong);
    border-top: var(--lg-border);
    box-shadow: var(--lg-edge), 0 -8px 28px rgba(31, 41, 90, .14);
}

.login-card {
    background-color: rgba(255, 255, 255, .10);
    background-image: linear-gradient(180deg, rgba(255,255,255,.24), rgba(255,255,255,.06));
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 26px;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.55), var(--lg-depth-lg);
}

/* El panel del chat de Billy NO entra al vidrio claro: es la unica
   superficie oscura de la app (ver su bloque propio mas arriba). */

/* Píldoras de vidrio (botones secundarios, chips, menú) */
.btn-secondary, .btn-menu, .btn-logout {
    background-color: rgba(255, 255, 255, .30);
    background-image: var(--lg-tint);
    border: var(--lg-border);
    box-shadow: var(--lg-edge), 0 4px 14px rgba(31, 41, 90, .10);
}
.btn-secondary:hover, .btn-menu:hover, .btn-logout:hover {
    background-color: rgba(255, 255, 255, .62);
    box-shadow: var(--lg-edge), 0 8px 22px rgba(31, 41, 90, .16);
}

/* Botones sólidos: reflejo especular sobre el degradado */
.btn-primary, .btn-accent, .btn-success, .btn-danger, .btn-instalar {
    box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 8px 22px rgba(99, 102, 241, .32);
}
.btn-login { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 12px 30px rgba(139, 92, 246, .5); }

/* Campos de vidrio */
.form-group input, .form-group select, .form-group textarea,
.login-form input {
    background-color: rgba(255, 255, 255, .45);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, .6);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .6);
}
.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    background-color: rgba(255, 255, 255, .85);
}
.login-form input { background-color: rgba(255,255,255,.12); border-color: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.25); }

/* Tiles: vidrio con luz superior (el tilt aporta el reflejo que sigue al cursor) */
.home-card, .cfg-card { box-shadow: inset 0 1px 0 rgba(255,255,255,.4), var(--lg-depth); }
.cfg-card { background-color: rgba(255,255,255,.34); background-image: var(--lg-tint); border: var(--lg-border); }

/* Ítems de menú como píldoras líquidas */
.nav-item { border-radius: 999px; }
.nav-item:hover { background-image: linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,.25)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7); }
.nav-item.active {
    background-image: linear-gradient(120deg, rgba(59,130,246,.24), rgba(139,92,246,.28));
    box-shadow: inset 0 1px 0 rgba(255,255,255,.65), 0 4px 14px rgba(99,102,241,.22);
}

/* Vidrio oscuro para avisos y modales */
.toast { border: 1px solid rgba(255,255,255,.18); box-shadow: inset 0 1px 0 rgba(255,255,255,.28), var(--lg-depth-lg); }
.scanner-modal-content { border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.22), var(--lg-depth-lg); backdrop-filter: blur(20px); }
.badge { box-shadow: inset 0 1px 0 rgba(255,255,255,.55); }

/* ============ Pulido de accesibilidad y detalle ============ */

/* Navegar con teclado era invisible: los inputs tenían su anillo de foco,
   pero botones, enlaces y filas accionables no mostraban dónde estás parado. */
.btn:focus-visible, a:focus-visible, button:focus-visible,
[role="button"]:focus-visible, .nav-item:focus-visible {
  outline: 2px solid var(--aurora-violet, #7c6cf0);
  outline-offset: 2px;
  border-radius: 8px;
}

/* Montos y cantidades alineados en columnas: con dígitos proporcionales,
   S/ 111.11 y S/ 999.99 ocupan distinto ancho y la columna "baila". */
table td, .pos-total, .amt {
  font-variant-numeric: tabular-nums;
}

/* Estado vacio de tablas: una fila muda no dice si esta cargando, fallo o
   simplemente no hay datos todavia. */
.empty-row td {
  text-align: center; padding: 28px 14px; color: #9ca3af; font-size: 13.5px;
}

/* ===== Panel de plataforma (solo superusuarios) =====
   Mismo material de la app: tarjetas de vidrio, acento por metrica y una tabla
   que se lee de un vistazo. Reemplaza al admin de Django para el dia a dia. */

.plat-kpis {
    display: grid; gap: 12px; margin: 14px 0 18px;
    grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
}
.plat-kpi {
    background: rgba(255, 255, 255, .55);
    border-radius: 14px; padding: 14px 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, .7), var(--shadow-sm);
    border-top: 3px solid var(--kpi, var(--brand-blue));
}
.plat-kpi-valor {
    font-family: var(--f-head); font-size: 26px; font-weight: 800;
    color: var(--kpi, var(--brand-blue)); letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
}
.plat-kpi-label { font-size: 12.5px; color: var(--color-text-muted); margin-top: 2px; }

.plat-barra { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.plat-barra input { flex: 1; min-width: 220px; }
.plat-barra select { min-width: 200px; }

.tabla-scroll { overflow-x: auto; }
.plat-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.plat-tabla th {
    text-align: left; font-size: 11.5px; text-transform: uppercase;
    letter-spacing: .04em; color: var(--color-text-muted);
    padding: 8px 10px; border-bottom: 1px solid rgba(140, 152, 186, .28);
    white-space: nowrap;
}
.plat-tabla td { padding: 11px 10px; border-bottom: 1px solid rgba(140, 152, 186, .16); vertical-align: middle; }
.plat-tabla .num { text-align: right; font-variant-numeric: tabular-nums; }
.plat-tabla tbody tr:hover { background: rgba(255, 255, 255, .5); }
.plat-inactiva { opacity: .55; }

.plat-nombre { font-weight: 700; }
.plat-sub { font-size: 11.5px; color: var(--color-text-muted); margin-top: 2px; }

.plat-plan {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 12px; font-weight: 700;
}
.plat-plan.pago { background: color-mix(in srgb, var(--aurora-violet) 16%, transparent); color: var(--aurora-violet); }
.plat-plan.free { background: rgba(140, 152, 186, .18); color: var(--color-text-muted); }

.plat-act { font-size: 12.5px; }
/* Una empresa sin señales hace mas de un mes es la que hay que llamar. */
.plat-act.fria { color: var(--brand-orange); font-weight: 600; }

.plat-acciones { display: flex; gap: 6px; align-items: center; }
.plat-acciones select { padding: 5px 8px; font-size: 12.5px; min-width: 130px; }
.plat-acciones .btn { padding: 5px 12px; font-size: 12.5px; white-space: nowrap; }

@media (max-width: 720px) {
    .plat-kpi-valor { font-size: 22px; }
    .plat-tabla { font-size: 12.5px; }
}

/* Carrito del POS: cantidad y precio se editan en la propia fila. */
.pos-lineas-item { gap: 10px; align-items: center; }
.pos-linea-nombre { flex: 1; min-width: 0; }
.pos-linea-campos { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.pos-linea-campos input {
    width: 62px; padding: 5px 7px; font-size: 13px; text-align: right;
    border-radius: 8px; border: 1px solid rgba(140, 152, 186, .35);
    background: rgba(255, 255, 255, .8); font-variant-numeric: tabular-nums;
}
.pos-linea-campos input[data-precio] { width: 76px; }
.pos-linea-campos input:focus { outline: none; border-color: var(--aurora-violet); box-shadow: var(--ring); }
.pos-linea-campos small { color: var(--color-text-muted); font-size: 11.5px; min-width: 18px; }
.pos-linea-campos b { min-width: 66px; text-align: right; font-variant-numeric: tabular-nums; }
.pos-linea-campos .btn { padding: 3px 9px; }

@media (max-width: 520px) {
    .pos-lineas-item { flex-wrap: wrap; }
    .pos-linea-nombre { flex: 1 0 100%; }
    .pos-linea-campos { width: 100%; justify-content: flex-end; }
}

/* ============================================================
   Panel del Grupo (dirección de varias empresas) — tema "informe de directorio"
   Banda azul marino con la cifra del periodo, paneles de papel, líneas finas,
   números tabulares. El color solo significa algo: verde/ámbar/rojo son estados,
   el azul es el grupo. Sin vidrio ni auroras dentro del panel. Prefijo gp-.
   ============================================================ */

.hdr-empresa-sel {
    font: inherit; font-size: 15px; font-weight: 700; color: var(--color-text);
    background: rgba(255, 255, 255, .55); border: 1px solid var(--glass-border);
    border-radius: 999px; padding: 5px 30px 5px 12px; max-width: 46vw; cursor: pointer;
    appearance: none; -webkit-appearance: none;
    background-image: linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%), linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
    background-position: calc(100% - 16px) 55%, calc(100% - 11px) 55%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}

.gp-tema {
    --gp-navy: #0b2a5b;
    --gp-navy-2: #123a7a;
    --gp-blue: #1d4ed8;
    --gp-blue-soft: #e8eefb;
    --gp-paper: #ffffff;
    --gp-ground: #eef2f9;
    --gp-ink: #13213f;
    --gp-muted: #5b6b8a;
    --gp-line: #dbe3f2;
    --gp-verde: #15803d;
    --gp-ambar: #b45309;
    --gp-rojo: #b91c1c;
    --gp-radio: 10px;
    color: var(--gp-ink);
    font-variant-numeric: tabular-nums;
}
.gp-tema h1, .gp-tema h2, .gp-tema h3 { font-family: var(--f-head); }
.gp { display: grid; gap: 16px; }
.gp-muted { color: var(--gp-muted); font-weight: 500; }
.gp-small { font-size: 12px; }
.gp-mal { color: var(--gp-rojo); }
.gp-warn { color: var(--gp-ambar); }
.gp-cargando, .gp-vacio { color: var(--gp-muted); font-size: 13.5px; padding: 14px 4px; }
.gp-nota { font-size: 12.5px; color: var(--gp-muted); margin: 12px 0 0; max-width: 78ch; }
.gp-mas { font-size: 12px; margin-top: 6px; }

/* Botones del panel */
.gp-btn {
    font: inherit; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 8px; cursor: pointer;
    border: 1px solid var(--gp-line); background: var(--gp-paper); color: var(--gp-ink); white-space: nowrap;
    transition: background .15s, border-color .15s, transform .1s;
}
.gp-btn:hover { background: var(--gp-blue-soft); border-color: #bfd0f2; }
.gp-btn:active { transform: translateY(1px); }
.gp-btn:focus-visible, .gp-tab:focus-visible, .gp-fila:focus-visible, .gp-alerta:focus-visible { outline: 2px solid var(--gp-blue); outline-offset: 2px; }
.gp-btn-primario { background: var(--gp-blue); border-color: var(--gp-blue); color: #fff; }
.gp-btn-primario:hover { background: #1a44c0; border-color: #1a44c0; }
.gp-btn-peligro { color: var(--gp-rojo); border-color: #f3c4c4; }
.gp-link { border: 0; background: transparent; color: var(--gp-blue); cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 600; padding: 0; }

/* Banda azul */
.gp-banda {
    background: linear-gradient(135deg, var(--gp-navy), var(--gp-navy-2)); color: #fff; border-radius: 14px;
    padding: 22px 26px 20px; display: grid; grid-template-columns: minmax(280px, 1fr) minmax(0, 1.3fr); gap: 22px; align-items: end;
}
.gp-eyebrow { font-size: 11px; letter-spacing: .12em; text-transform: uppercase; font-weight: 700; opacity: .75; }
.gp-titulo { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 4px 0 2px; line-height: 1.1; }
.gp-sub { font-size: 13.5px; opacity: .85; }
.gp-etiqueta { display: inline-block; font-size: 10.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 2px 8px; border-radius: 999px; background: rgba(255, 255, 255, .18); color: #fff; }
.gp-controles { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 16px; }
.gp-tabs { display: inline-flex; background: rgba(255, 255, 255, .12); border-radius: 8px; padding: 3px; }
.gp-tab { border: 0; background: transparent; padding: 6px 13px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; color: rgba(255, 255, 255, .8); cursor: pointer; }
.gp-tab.activa { background: #fff; color: var(--gp-navy); }
.gp-vivo { font-size: 12.5px; opacity: .85; display: inline-flex; align-items: center; gap: 6px; }
.gp-punto { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 0 rgba(74, 222, 128, .6); animation: gpPulso 2s infinite; }
.gp-punto-mal { background: #f87171; animation: none; }
@keyframes gpPulso { 0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, .5); } 70% { box-shadow: 0 0 0 7px rgba(74, 222, 128, 0); } 100% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0); } }
@media (prefers-reduced-motion: reduce) { .gp-punto { animation: none; } }

.gp-banda-der { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 20px; align-items: end; }
.gp-cifra-etq { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .75; margin-bottom: 4px; }
.gp-cifra-val { font-family: var(--f-head); font-size: 40px; font-weight: 800; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.gp-cifra-sub { font-size: 12.5px; opacity: .9; margin-top: 8px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.gp-cifra-grafico { min-width: 0; }
.gp-cifra-grafico svg { width: 100%; height: auto; display: block; }

/* Variación */
.gp-var { font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.gp-var-up { background: rgba(21, 128, 61, .12); color: var(--gp-verde); }
.gp-var-down { background: rgba(185, 28, 28, .1); color: var(--gp-rojo); }
.gp-var-na { background: rgba(91, 107, 138, .12); color: var(--gp-muted); }
.gp-var.claro.gp-var-up { background: rgba(74, 222, 128, .22); color: #bbf7d0; }
.gp-var.claro.gp-var-down { background: rgba(248, 113, 113, .22); color: #fecaca; }
.gp-var.claro.gp-var-na { background: rgba(255, 255, 255, .15); color: #e2e8f0; }

/* Gráficos */
.gp-ch { width: 100%; height: auto; display: block; }
.gp-ch-grid { stroke: var(--gp-line); stroke-width: 1; }
.gp-ch-eje { font-size: 10.5px; fill: var(--gp-muted); font-family: var(--f-body); }
.gp-ch-linea { fill: none; stroke: var(--gp-blue); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.gp-ch-punto { fill: var(--gp-blue); stroke: #fff; stroke-width: 2; }
.gp-ch-stop { stop-color: var(--gp-blue); }
.gp-ch-ult { font-size: 11px; font-weight: 700; fill: var(--gp-ink); font-family: var(--f-body); }
.gp-ch-barra { fill: #9db4e8; }
.gp-ch-barra.actual { fill: var(--gp-blue); }
.gp-ch-valor { font-size: 9.5px; fill: var(--gp-muted); font-family: var(--f-body); }
.gp-ch-claro .gp-ch-grid { stroke: rgba(255, 255, 255, .18); }
.gp-ch-claro .gp-ch-eje { fill: rgba(255, 255, 255, .7); }
.gp-ch-claro .gp-ch-linea { stroke: #fff; }
.gp-ch-claro .gp-ch-punto { fill: #fff; stroke: var(--gp-navy); }
.gp-ch-claro .gp-ch-stop { stop-color: #fff; }
.gp-ch-claro .gp-ch-ult { fill: #fff; }
.gp-spark { display: block; width: 100%; height: auto; max-width: 120px; }
.gp-ch-barra.parcial { fill: #9db4e8; }
.gp-ch-anterior { fill: none; stroke: var(--gp-ambar); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.gp-ch-anterior-punto { fill: #fff; stroke: var(--gp-ambar); stroke-width: 2; }
.gp-ch-leyenda { display: flex; gap: 12px 16px; flex-wrap: wrap; font-size: 12px; color: var(--gp-muted); margin-top: 8px; }
.gp-ley-cuadro::before { content: ""; display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; vertical-align: -1px; background: var(--c); }
.gp-ley-linea::before { content: ""; display: inline-block; width: 16px; border-top: 2px dashed var(--gp-ambar); margin-right: 6px; vertical-align: 3px; }
.gp-cols-graficos { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.gp-bullet { display: block; width: 100%; height: auto; max-width: 130px; }
.gp-bullet-fondo { fill: var(--gp-ground); }
.gp-bullet-rango { fill: var(--gp-line); }
.gp-bullet-valor { fill: var(--gp-blue); }
.gp-bullet-meta { fill: var(--gp-ink); }
.gp-aging { display: grid; gap: 8px; }
.gp-aging-fila { display: grid; grid-template-columns: 110px 1fr 96px; gap: 10px; align-items: center; font-size: 12.5px; }
.gp-aging-barra { height: 18px; background: var(--gp-ground); border-radius: 4px; overflow: hidden; }
.gp-aging-barra i { display: block; height: 100%; border-radius: 4px; }
.gp-aging-barra i.azul { background: var(--gp-blue); } .gp-aging-barra i.ambar { background: var(--gp-ambar); }
.gp-aging-barra i.rojo { background: var(--gp-rojo); } .gp-aging-barra i.rojo2 { background: #7f1d1d; }
.gp-aging-num { text-align: right; line-height: 1.15; }
.gp-aging-num small { display: block; color: var(--gp-muted); font-size: 11px; }
.gp-aging-total { border-top: 1px solid var(--gp-line); padding-top: 8px; }
.gp-tab-boton { background: rgba(255, 255, 255, .12); border-radius: 8px; color: #fff; }
.gp-tab-boton:hover { background: rgba(255, 255, 255, .22); }
.gp-oficio { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.gp-oficio-item { border: 1px solid var(--gp-line); border-radius: 8px; padding: 10px 12px; }
.gp-oficio-meta { border-left: 3px solid var(--gp-blue); }
.gp-oficio-val { font-family: var(--f-head); font-size: 22px; font-weight: 800; letter-spacing: -.02em; margin: 2px 0; }
.gp-meta-form { display: flex; gap: 6px; margin: 4px 0; }
.gp-meta-form input { font: inherit; font-size: 14px; font-weight: 700; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--gp-line); width: 120px; }
/* En el detalle, los paneles de la grilla no pueden crecer más que su columna: la
   tabla de comprobantes se salía del cuadro con los nombres largos. */
.gp-modal-grid > .gp-panel { min-width: 0; overflow-x: auto; }
.gp-modal .gp-tabla td { word-break: break-word; }
.gp-modal .gp-tabla .num { white-space: nowrap; }

/* KPIs */
.gp-kpis { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
.gp-kpis-4 { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.gp-kpi { background: var(--gp-paper); border: 1px solid var(--gp-line); border-radius: var(--gp-radio); padding: 13px 15px 11px; border-left: 3px solid var(--gp-blue); }
.gp-kpi-ambar { border-left-color: var(--gp-ambar); }
.gp-kpi-rojo { border-left-color: var(--gp-rojo); }
.gp-kpi-etq { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gp-muted); font-weight: 700; }
.gp-kpi-val { font-family: var(--f-head); font-size: 25px; font-weight: 800; letter-spacing: -.02em; color: var(--gp-ink); margin-top: 3px; line-height: 1.1; }
.gp-kpi-det { font-size: 12.5px; color: var(--gp-muted); margin-top: 4px; }

/* Paneles */
.gp-cols { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(300px, 1fr); gap: 16px; align-items: start; }
.gp-lateral { display: grid; gap: 16px; }
.gp-panel { background: var(--gp-paper); border: 1px solid var(--gp-line); border-radius: var(--gp-radio); padding: 16px 18px; }
.gp-panel-cab { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.gp-panel-cab h2 { font-size: 15.5px; font-weight: 700; margin: 0; }
.gp-panel-cab h2 .gp-muted { font-size: 13px; font-weight: 500; margin-left: 6px; }

/* Leyenda, búsqueda */
.gp-leyenda { display: flex; gap: 6px; flex-wrap: wrap; }
.gp-ley { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 12.5px; font-weight: 600; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--gp-line); background: var(--gp-paper); color: var(--gp-ink); cursor: pointer; }
.gp-ley:hover { background: var(--gp-blue-soft); }
.gp-ley.activa { background: var(--gp-ink); color: #fff; border-color: var(--gp-ink); }
.gp-buscar { font: inherit; font-size: 13px; padding: 7px 12px; border-radius: 8px; border: 1px solid var(--gp-line); background: var(--gp-ground); color: var(--gp-ink); min-width: 200px; flex: 1 1 200px; max-width: 300px; }
.gp-buscar:focus { outline: 2px solid var(--gp-blue); outline-offset: 1px; background: #fff; }

/* Semáforo, riel, chips */
.gp-sem { display: inline-block; width: 9px; height: 9px; border-radius: 50%; flex: none; }
.gp-sem.verde { background: var(--gp-verde); } .gp-sem.ambar { background: var(--gp-ambar); }
.gp-sem.rojo { background: var(--gp-rojo); } .gp-sem.gris { background: #94a3b8; }
.gp-rail { display: block; width: 4px; border-radius: 2px; align-self: stretch; background: var(--gp-verde); }
.gp-rail.ambar { background: var(--gp-ambar); } .gp-rail.rojo { background: var(--gp-rojo); } .gp-rail.neutro { background: #c7d2e6; }
.gp-chip { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; margin: 2px 4px 2px 0; white-space: nowrap; }
.gp-chip.verde { background: rgba(21, 128, 61, .1); color: var(--gp-verde); }
.gp-chip.ambar { background: rgba(180, 83, 9, .12); color: var(--gp-ambar); }
.gp-chip.rojo { background: rgba(185, 28, 28, .1); color: var(--gp-rojo); }
.gp-chip.neutro { background: var(--gp-ground); color: var(--gp-muted); font-weight: 600; }

/* Lista de empresas por división */
.gp-lista-cab, .gp-fila {
    display: grid; grid-template-columns: 4px minmax(180px, 1.5fr) 100px 165px 130px minmax(120px, 1fr) auto;
    gap: 14px; align-items: center;
}
.gp-lista-cab { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--gp-muted); font-weight: 700; padding: 6px 10px; border-bottom: 1px solid var(--gp-line); }
.gp-lista-cab .num, .gp-fila-num { text-align: left; }
.gp-division { margin-top: 10px; }
.gp-division-cab {
    display: flex; align-items: center; gap: 8px; width: 100%; border: 0; background: var(--gp-blue-soft); color: var(--gp-navy);
    font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 10px; border-radius: 6px; cursor: pointer; text-align: left;
}
.gp-division-flecha { width: 12px; color: var(--gp-blue); }
.gp-division-nombre { text-transform: uppercase; letter-spacing: .06em; font-size: 11.5px; }
.gp-division-meta { margin-left: auto; font-weight: 600; color: var(--gp-muted); font-size: 12.5px; }
.gp-lista { display: grid; }
.gp-fila { padding: 9px 10px; border-bottom: 1px solid var(--gp-line); cursor: pointer; border-radius: 6px; }
.gp-fila:hover { background: var(--gp-ground); }
.gp-fila-nombre { min-width: 0; display: grid; }
.gp-fila-nombre b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-fila-nombre span { font-size: 11.5px; color: var(--gp-muted); }
.gp-fila-nombre i { font-style: normal; color: var(--gp-ambar); font-weight: 600; }
.gp-fila-num { font-size: 14px; font-weight: 700; white-space: nowrap; display: grid; gap: 1px; }
.gp-fila-num small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--gp-muted); font-weight: 700; }
.gp-fila-num .gp-var { font-size: 11px; padding: 1px 6px; }
.gp-fila-spark { display: grid; gap: 2px; }
.gp-fila-spark small { font-size: 11px; color: var(--gp-muted); }
.gp-fila-chips { display: flex; flex-wrap: wrap; }
.gp-btn-entrar { padding: 5px 12px; font-size: 12.5px; }

/* Alertas, ranking, actividad */
.gp-alertas { display: grid; gap: 4px; }
.gp-alerta { display: grid; grid-template-columns: 9px minmax(0, 1fr) auto; gap: 10px; align-items: center; width: 100%; text-align: left; padding: 8px 10px; border-radius: 8px; border: 0; background: transparent; font: inherit; cursor: pointer; color: var(--gp-ink); }
.gp-alerta:hover { background: var(--gp-ground); }
.gp-alerta-cuerpo { display: grid; min-width: 0; }
.gp-alerta-cuerpo b { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-alerta-cuerpo span { font-size: 12px; color: var(--gp-muted); }
.gp-alerta-ir { color: var(--gp-muted); font-size: 18px; line-height: 1; }
.gp-ranking { display: grid; gap: 6px; }
.gp-rank { display: grid; grid-template-columns: 16px minmax(0, 1fr) 80px auto; gap: 8px; align-items: center; font-size: 12.5px; }
.gp-rank-pos { color: var(--gp-muted); font-weight: 700; }
.gp-rank-nombre { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-rank-barra { height: 6px; background: var(--gp-ground); border-radius: 999px; overflow: hidden; }
.gp-rank-barra i { display: block; height: 100%; background: var(--gp-blue); border-radius: 999px; }
.gp-rank-val { font-weight: 700; white-space: nowrap; }
.gp-actividad { display: grid; gap: 2px; max-height: 420px; overflow: auto; }
.gp-evento { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 8px; align-items: start; padding: 6px 6px; border-radius: 6px; font-size: 12.5px; border-bottom: 1px solid var(--gp-line); }
.gp-evento-tipo { font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700; color: var(--gp-blue); margin-top: 2px; }
.gp-evento-rojo .gp-evento-tipo { color: var(--gp-rojo); } .gp-evento-ambar .gp-evento-tipo { color: var(--gp-ambar); }
.gp-evento-cuerpo { display: grid; min-width: 0; }
.gp-evento-texto { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gp-evento-meta { font-size: 11px; color: var(--gp-muted); }
.gp-evento-monto { font-weight: 700; white-space: nowrap; }

/* Tablas del panel */
.gp-scroll { overflow-x: auto; }
.gp-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.gp-tabla th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--gp-muted); padding: 6px 8px; border-bottom: 1px solid var(--gp-line); white-space: nowrap; }
.gp-tabla td { padding: 8px 8px; border-bottom: 1px solid var(--gp-line); vertical-align: top; }
.gp-tabla .num { text-align: right; white-space: nowrap; }
.gp-tabla tbody tr:hover { background: var(--gp-ground); }

/* Modal */
.gp-modal { position: fixed; inset: 0; z-index: 900; background: rgba(11, 42, 91, .45); display: flex; align-items: flex-start; justify-content: center; padding: 28px 16px; overflow: auto; }
.gp-modal[hidden] { display: none; }
.gp-modal-caja { background: var(--gp-ground); border-radius: 14px; padding: 20px 22px; width: min(1100px, 100%); box-shadow: 0 30px 80px rgba(11, 42, 91, .35); display: grid; gap: 14px; color: var(--gp-ink); font-variant-numeric: tabular-nums; }
.gp-modal-cab { display: flex; justify-content: space-between; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.gp-modal-cab h2 { font-size: 22px; margin: 2px 0; font-weight: 800; letter-spacing: -.01em; }
.gp-modal-cab .gp-eyebrow { opacity: 1; color: var(--gp-blue); }
.gp-modal-acciones { display: flex; gap: 8px; }
.gp-modal-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; }
.gp-atajos { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.gp-proy-mini { display: grid; grid-template-columns: minmax(0, 1fr) 80px auto; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--gp-line); font-size: 12.5px; }
.gp-proy-mini b { font-size: 13px; }
.gp-avance { height: 7px; background: var(--gp-ground); border-radius: 999px; overflow: hidden; min-width: 70px; border: 1px solid var(--gp-line); }
.gp-avance i { display: block; height: 100%; background: var(--gp-blue); }
.gp-estado { display: inline-block; font-size: 11px; font-weight: 700; padding: 2px 9px; border-radius: 999px; white-space: nowrap; }
.gp-estado-PLANIFICADO, .gp-estado-PENDIENTE { background: var(--gp-ground); color: var(--gp-muted); }
.gp-estado-EN_CURSO, .gp-estado-ENVIADO { background: var(--gp-blue-soft); color: var(--gp-blue); }
.gp-estado-EN_RIESGO, .gp-estado-OBSERVADO, .gp-estado-CONTINGENCIA { background: rgba(180, 83, 9, .12); color: var(--gp-ambar); }
.gp-estado-DETENIDO, .gp-estado-RECHAZADO, .gp-estado-ANULADO { background: rgba(185, 28, 28, .1); color: var(--gp-rojo); }
.gp-estado-TERMINADO, .gp-estado-ACEPTADO { background: rgba(21, 128, 61, .1); color: var(--gp-verde); }
.gp-sel-estado { font: inherit; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 8px; border: 1px solid var(--gp-line); background: #fff; }

/* Formulario */
.gp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; background: var(--gp-paper); border: 1px solid var(--gp-line); border-radius: var(--gp-radio); padding: 16px; }
.gp-form label { display: grid; gap: 4px; font-size: 12px; font-weight: 600; color: var(--gp-muted); }
.gp-form input, .gp-form select, .gp-form textarea { font: inherit; font-size: 13.5px; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--gp-line); background: #fff; color: var(--gp-ink); }
.gp-form input:focus, .gp-form select:focus, .gp-form textarea:focus { outline: 2px solid var(--gp-blue); outline-offset: 1px; }
.gp-form-ancho, .gp-form-servicio, .gp-form-pie { grid-column: 1 / -1; }
.gp-form-servicio { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 10px 14px; padding: 12px; border-radius: 8px; background: var(--gp-blue-soft); }
.gp-form-pie { display: flex; justify-content: flex-end; gap: 8px; }

/* Ejecución */
.gp-areas { display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.gp-area { border: 1px solid var(--gp-line); border-radius: 8px; padding: 10px 12px; font-size: 12.5px; }
.gp-area-cab { display: flex; justify-content: space-between; margin-bottom: 6px; }
.gp-area-pct { font-weight: 800; }
.gp-area-pct.verde { color: var(--gp-verde); } .gp-area-pct.ambar { color: var(--gp-ambar); } .gp-area-pct.rojo { color: var(--gp-rojo); } .gp-area-pct.neutro { color: var(--gp-muted); }
.gp-area-barra { height: 7px; background: var(--gp-ground); border-radius: 999px; overflow: hidden; }
.gp-area-barra i { display: block; height: 100%; border-radius: 999px; background: var(--gp-blue); }
.gp-area-barra i.verde { background: var(--gp-verde); } .gp-area-barra i.ambar { background: var(--gp-ambar); } .gp-area-barra i.rojo { background: var(--gp-rojo); }
.gp-area-pie { color: var(--gp-muted); font-size: 11.5px; margin-top: 5px; }
.gp-filtros { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.gp-filtros select { font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--gp-line); background: #fff; max-width: 220px; }
.gp-filtro-activo { font-size: 12.5px; margin: -4px 0 10px; color: var(--gp-muted); }
.gp-tabla-proy td { vertical-align: middle; }
.gp-td-rail { display: flex; align-items: center; gap: 4px; width: 36px; }
.gp-td-rail .gp-rail { height: 28px; }
.gp-td-plazo { white-space: nowrap; }
.gp-td-plazo small { display: block; font-size: 11px; }
.gp-chevron { border: 0; background: transparent; cursor: pointer; font-size: 14px; color: var(--gp-muted); padding: 2px 4px; }
.gp-fila-tareas td { background: var(--gp-ground); }
.gp-tareas { display: grid; gap: 3px; padding: 4px 0 6px; }
.gp-tarea { display: grid; grid-template-columns: 18px minmax(0, 1fr) auto; gap: 8px; align-items: center; font-size: 12.5px; padding: 5px 6px; border-radius: 6px; cursor: pointer; }
.gp-tarea:hover { background: #fff; }
.gp-tarea.hecha .gp-tarea-titulo { text-decoration: line-through; color: var(--gp-muted); }
.gp-tarea.vencida .gp-tarea-titulo { color: var(--gp-rojo); font-weight: 600; }
.gp-tarea-meta { color: var(--gp-muted); font-size: 11.5px; white-space: nowrap; }
.gp-nueva-tarea { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.gp-nueva-tarea input { font: inherit; font-size: 12.5px; padding: 6px 9px; border-radius: 8px; border: 1px solid var(--gp-line); background: #fff; }
.gp-nueva-tarea input[name=titulo] { flex: 2 1 220px; }

@media (max-width: 1100px) {
    .gp-lista-cab { display: none; }
    .gp-fila { grid-template-columns: 4px minmax(0, 1fr) auto; grid-template-areas: "rail nombre entrar" "rail nums nums" "rail chips chips"; row-gap: 6px; }
    .gp-rail { grid-area: rail; }
    .gp-fila-nombre { grid-area: nombre; }
    .gp-fila-num:nth-of-type(1), .gp-fila-num:nth-of-type(2), .gp-fila-spark { grid-area: nums; }
    .gp-fila-num { display: inline-grid; margin-right: 18px; }
    .gp-fila-spark { display: none; }
    .gp-fila-chips { grid-area: chips; }
    .gp-btn-entrar { grid-area: entrar; }
}
@media (max-width: 900px) {
    .gp-banda { grid-template-columns: 1fr; padding: 18px; }
    .gp-banda-der { grid-template-columns: 1fr; }
    .gp-cifra-val { font-size: 32px; }
    .gp-cols, .gp-cols-graficos { grid-template-columns: 1fr; }
    .gp-titulo { font-size: 24px; }
    .gp-kpi-val { font-size: 22px; }
    .gp-tarea { grid-template-columns: 18px minmax(0, 1fr); }
    .gp-tarea-meta { grid-column: 2; white-space: normal; }
    /* Proyectos como tarjetas: nueve columnas no caben en un teléfono. */
    .gp-tabla-proy thead { display: none; }
    .gp-tabla-proy, .gp-tabla-proy tbody, .gp-tabla-proy tr, .gp-tabla-proy td { display: block; width: 100%; min-width: 0; }
    .gp-tabla-proy tr[hidden] { display: none; }   /* display:block le ganaba al atributo hidden */
    .gp-tabla-proy tr.gp-fila-proy { border: 1px solid var(--gp-line); border-radius: 10px; padding: 8px 10px; margin-bottom: 8px; position: relative; }
    .gp-tabla-proy tr.gp-fila-proy td { border: 0; padding: 2px 0; }
    .gp-tabla-proy tr.gp-fila-proy td:nth-child(3)::before { content: "Empresa · "; color: var(--gp-muted); font-size: 11px; }
    .gp-tabla-proy tr.gp-fila-proy td:nth-child(4)::before { content: "Área · "; color: var(--gp-muted); font-size: 11px; }
    .gp-tabla-proy tr.gp-fila-proy td:nth-child(5)::before { content: "Responsable · "; color: var(--gp-muted); font-size: 11px; }
    .gp-tabla-proy tr.gp-fila-proy td:nth-child(6)::before { content: "Plazo · "; color: var(--gp-muted); font-size: 11px; }
    .gp-tabla-proy tr.gp-fila-proy td:nth-child(8)::before { content: "Tareas · "; color: var(--gp-muted); font-size: 11px; }
    .gp-tabla-proy .gp-td-rail { position: absolute; left: 6px; top: 8px; width: auto; }
    .gp-tabla-proy tr.gp-fila-proy td:nth-child(2) { padding-left: 34px; }
    .gp-tabla-proy .gp-td-plazo small { display: inline; margin-left: 4px; }
    .gp-tabla-proy tr.gp-fila-tareas td { padding: 0; }
    .gp-areas { grid-template-columns: 1fr; }
    .gp-filtros select { max-width: 100%; flex: 1 1 45%; }
    .gp-cabecera, .gp-controles { gap: 8px; }
    /* Un hijo de grilla con min-width:auto se ensancha hasta su contenido y
       arrastra la pagina entera; en la vista Ejecucion las cuatro tarjetas de
       indicadores estiraban el panel a 558px en un telefono de 375. */
    #page-grupo { overflow-x: hidden; }
    .gp, .gp > *, .gp-panel, .gp-kpis, .gp-cols > *, .gp-lateral > * { min-width: 0; max-width: 100%; }
    .gp-kpis, .gp-kpis-4 { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    /* Filtros de Ejecucion apilados: en una fila se cortaba el tercero. */
    .gp-filtros-fila { flex-direction: column; align-items: stretch; }
    .gp-filtros { width: 100%; }
    .gp-filtros select { flex: 1 1 100%; }
    .gp-filtros .gp-btn { width: 100%; }
}
@media (max-width: 560px) {
    /* Grillas armadas en linea con columnas fijas (1fr 1fr, 2fr 1fr...) no caben
       en un telefono: en pantallas chicas todas pasan a una columna. */
    .content [style*="grid-template-columns"] { grid-template-columns: 1fr !important; }
    .form-group { min-width: 0; flex: 1 1 140px; max-width: 100%; }
    .form-group input, .form-group select, .form-group textarea { max-width: 100%; }
}