/* ============================================================
   ORION - Obtención de Resúmenes e Inteligencia Organizacional
   para la gestión de Nómina - Estilos profesionales
   Paleta institucional: azules, grises y blancos
   ============================================================ */
:root {
    --azul:        #2563eb;
    --azul-osc:    #1e40af;
    --azul-claro:  #eff6ff;
    --cyan:        #0ea5e9;
    --tinta:       #0f172a;
    --gris-900:    #1e293b;
    --gris-700:    #334155;
    --gris-500:    #64748b;
    --gris-300:    #cbd5e1;
    --gris-100:    #f1f5f9;
    --gris-50:     #f8fafc;
    --blanco:      #ffffff;
    --ok:          #22c55e;
    --alerta:      #f59e0b;
    --error:       #ef4444;
    --radio:       14px;
    --sombra:      0 1px 3px rgba(15,23,42,.08), 0 8px 24px rgba(15,23,42,.06);
    --sombra-sm:   0 1px 2px rgba(15,23,42,.06), 0 2px 8px rgba(15,23,42,.05);
    --sidebar-w:   258px;
}

* { box-sizing: border-box; }
body {
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
    color: var(--gris-700);
    background: var(--gris-50);
}
a { text-decoration: none; }

.btn-primary { --bs-btn-bg: var(--azul); --bs-btn-border-color: var(--azul);
    --bs-btn-hover-bg: var(--azul-osc); --bs-btn-hover-border-color: var(--azul-osc); }
.text-azul { color: var(--azul) !important; }
.mono { font-family: 'Consolas', monospace; font-size: .9em; }

/* ============================ PUBLICO (TEMA ORION) ============================ */
:root {
    --orion-navy:  #061B4D;
    --orion-azul:  #0D3B8E;
    --orion-verde: #7CC242;
}
.public-navbar {
    background: rgba(6,27,77,.85);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(124,194,66,.2);
    padding: .6rem 0;
}
.public-navbar .navbar-brand { font-weight: 700; color: #fff; font-size: 1.3rem; display:flex; align-items:center; gap:.55rem; }
.public-navbar .navbar-brand .brand-accent, .public-navbar .navbar-brand strong { color: var(--orion-verde); }
.public-navbar .brand-badge { width:34px; height:34px; border-radius:50%; box-shadow:0 0 14px rgba(124,194,66,.5); }
.public-navbar .nav-link { color: rgba(255,255,255,.82); font-weight: 500; }
.public-navbar .nav-link:hover { color: var(--orion-verde); }
.public-navbar .navbar-toggler { border-color: rgba(255,255,255,.3); }
.public-navbar .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }

.btn-orion { background: var(--orion-verde); border:none; color:#06300a; font-weight:700;
    box-shadow:0 8px 22px rgba(124,194,66,.35); }
.btn-orion:hover { background:#6cb233; color:#06300a; transform:translateY(-1px); }

/* HERO constelacion */
.hero-orion {
    background:
        radial-gradient(900px 500px at 80% 10%, rgba(13,59,142,.55), transparent 60%),
        radial-gradient(700px 400px at 10% 90%, rgba(124,194,66,.12), transparent 60%),
        linear-gradient(160deg, #03102e 0%, var(--orion-navy) 55%, #0a2a6b 130%);
    color:#fff; padding: 5.5rem 0 6rem; position:relative; overflow:hidden;
}
.hero-stars {
    position:absolute; inset:0; pointer-events:none; opacity:.9;
    background-image:
        radial-gradient(2px 2px at 20% 30%, rgba(255,255,255,.9), transparent),
        radial-gradient(2px 2px at 75% 20%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 40% 70%, rgba(255,255,255,.8), transparent),
        radial-gradient(1.5px 1.5px at 60% 50%, rgba(124,194,66,.9), transparent),
        radial-gradient(2px 2px at 90% 75%, rgba(255,255,255,.7), transparent),
        radial-gradient(1.5px 1.5px at 12% 80%, rgba(255,255,255,.6), transparent),
        radial-gradient(1.5px 1.5px at 50% 12%, rgba(255,255,255,.7), transparent);
    animation: twinkle 5s ease-in-out infinite alternate;
}
@keyframes twinkle { from { opacity:.5; } to { opacity:1; } }

.hero-eyebrow {
    display:inline-flex; gap:.5rem; align-items:center; background: rgba(124,194,66,.16);
    border:1px solid rgba(124,194,66,.4); color:#dff3c6;
    padding:.4rem .95rem; border-radius:50px; font-size:.84rem; font-weight:600; margin-bottom:1.3rem;
}
.hero-title { font-weight: 800; line-height: 1.1; margin-bottom: 1.2rem; letter-spacing:-.5px; }
.hero-title .brand-word { display:block; font-size: clamp(2.8rem, 6vw, 4.4rem); letter-spacing:1px; }
.hero-title .brand-accent { color: var(--orion-verde); text-shadow:0 0 24px rgba(124,194,66,.5); }
.hero-title .hero-subtitle { display:block; font-size: clamp(1.1rem,2.2vw,1.55rem); font-weight:600; color: rgba(255,255,255,.92); margin-top:.4rem; }
.hero-text { font-size: 1.1rem; color: rgba(255,255,255,.85); max-width: 560px; margin-bottom: 2rem; }
.hero-actions { display:flex; gap:1rem; flex-wrap: wrap; }
.hero-stats { display:flex; gap:2.2rem; margin-top:2.4rem; }
.hero-stat { display:flex; flex-direction:column; }
.hero-stat .hs-num { font-size:1.9rem; font-weight:800; color:#fff; line-height:1; }
.hero-stat .hs-lbl { font-size:.82rem; color: rgba(255,255,255,.65); text-transform:uppercase; letter-spacing:1px; margin-top:.3rem; }

.hero-visual { position:relative; }
.hero-img { width:100%; border-radius:22px; border:1px solid rgba(124,194,66,.25);
    box-shadow:0 24px 70px rgba(0,0,0,.5), 0 0 60px rgba(13,59,142,.4); }
.hero-chip {
    position:absolute; background: rgba(6,27,77,.85); backdrop-filter: blur(8px);
    border:1px solid rgba(124,194,66,.4); color:#eafbe0; font-size:.82rem; font-weight:600;
    padding:.5rem .85rem; border-radius:50px; box-shadow:0 10px 24px rgba(0,0,0,.4);
    display:flex; align-items:center; gap:.45rem; white-space:nowrap;
}
.hero-chip i { color: var(--orion-verde); }
.hero-chip.chip-1 { top:8%; left:-6%; animation: float 6s ease-in-out infinite; }
.hero-chip.chip-2 { bottom:14%; right:-4%; animation: float 7s ease-in-out infinite .8s; }
.hero-chip.chip-3 { bottom:-3%; left:14%; animation: float 5.5s ease-in-out infinite .4s; }
@keyframes float { 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-9px); } }

/* Encabezados de seccion */
.section-head { text-align:center; max-width:660px; margin: 0 auto 3rem; }
.section-head .kicker { display:inline-flex; align-items:center; gap:.45rem; color: var(--orion-azul);
    background: rgba(13,59,142,.08); border:1px solid rgba(13,59,142,.15);
    font-weight:700; font-size:.78rem; letter-spacing:1px; text-transform:uppercase;
    padding:.35rem .85rem; border-radius:50px; margin-bottom:1rem; }
.section-head h2 { font-weight:800; color: var(--orion-navy); font-size:2.1rem; }
.section-head p { color: var(--gris-500); font-size:1.05rem; }

/* Significado de ORION */
.meaning { padding: 5rem 0; background: var(--gris-50); }
.meaning-grid { display:grid; grid-template-columns: repeat(5,1fr); gap:1rem; }
.meaning-card { background:#fff; border:1px solid var(--gris-100); border-radius:16px; padding:1.4rem 1.2rem;
    text-align:center; transition:.25s; box-shadow: var(--sombra-sm); position:relative; overflow:hidden; }
.meaning-card::before { content:''; position:absolute; top:0; left:0; right:0; height:4px;
    background:linear-gradient(90deg, var(--orion-azul), var(--orion-verde)); }
.meaning-card:hover { transform:translateY(-6px); box-shadow: var(--sombra); }
.meaning-letter { width:60px; height:60px; margin:0 auto 1rem; border-radius:50%;
    display:grid; place-items:center; font-size:1.9rem; font-weight:800; color:#fff;
    background:radial-gradient(circle at 30% 30%, var(--orion-azul), var(--orion-navy));
    box-shadow:0 0 0 6px rgba(13,59,142,.08), 0 8px 20px rgba(6,27,77,.3); }
.meaning-body h3 { font-size:1.05rem; font-weight:700; color: var(--orion-navy); margin-bottom:.45rem; }
.meaning-body h3 i { color: var(--orion-verde); }
.meaning-body p { color: var(--gris-500); font-size:.88rem; margin:0; }
@media (max-width: 992px){ .meaning-grid { grid-template-columns: repeat(2,1fr); } }
@media (max-width: 520px){ .meaning-grid { grid-template-columns: 1fr; } }

.features { padding: 5rem 0; }
.feature-card {
    background:#fff; border:1px solid var(--gris-100); border-radius: var(--radio);
    padding: 2rem; height:100%; transition: .25s; box-shadow: var(--sombra-sm);
}
.feature-card:hover { transform: translateY(-6px); box-shadow: var(--sombra); border-color: rgba(124,194,66,.4); }
.feature-icon {
    width:58px; height:58px; border-radius:15px; display:grid; place-items:center;
    background: linear-gradient(135deg, rgba(13,59,142,.1), rgba(124,194,66,.18));
    color: var(--orion-azul); font-size:1.6rem; margin-bottom:1.2rem;
}
.feature-card:hover .feature-icon { color: var(--orion-verde); }
.feature-card h3 { font-size:1.18rem; font-weight:700; color: var(--orion-navy); margin-bottom:.5rem; }
.feature-card p { color: var(--gris-500); font-size:.96rem; margin:0; }

.cta-orion { position:relative; overflow:hidden; padding: 4.5rem 0; color:#fff;
    background:
        radial-gradient(700px 300px at 50% 0%, rgba(124,194,66,.18), transparent 60%),
        linear-gradient(160deg, var(--orion-navy) 0%, var(--orion-azul) 120%); }
.cta-orion .cta-badge { width:72px; height:72px; border-radius:50%; margin-bottom:1.2rem;
    box-shadow:0 0 28px rgba(124,194,66,.5); }
.cta-orion h2 { font-weight:800; }
.cta-orion p { color: rgba(255,255,255,.8); margin-bottom: 1.8rem; }

.public-footer { background: var(--orion-navy); color: rgba(255,255,255,.7); padding: 3.5rem 0 1.5rem; }
.public-footer h5 { color:#fff; font-weight:700; }
.footer-brand { display:flex; align-items:center; gap:.55rem; }
.footer-brand img { width:34px; height:34px; border-radius:50%; box-shadow:0 0 14px rgba(124,194,66,.4); }
.footer-brand strong { color: var(--orion-verde); }
.public-footer h6 { color:#fff; font-weight:600; margin-bottom:1rem; }
.public-footer p { font-size:.95rem; }
.footer-links { list-style:none; padding:0; }
.footer-links li { margin-bottom:.6rem; }
.footer-links a { color: rgba(255,255,255,.7); }
.footer-links a:hover { color:#fff; }
.public-footer hr { border-color: rgba(255,255,255,.12); margin: 2rem 0 1rem; }
.footer-bottom { text-align:center; font-size:.88rem; }

/* ============================ AUTH ============================ */
.auth-body { min-height:100vh; display:grid; place-items:center;
    background: linear-gradient(135deg, var(--azul-osc), var(--azul) 60%, var(--cyan)); padding:1.5rem; }
.auth-card { background:#fff; border-radius: 20px; box-shadow: 0 25px 60px rgba(0,0,0,.25);
    padding: 2.6rem; width: 100%; max-width: 420px; }
.auth-brand { display:flex; align-items:center; gap:.6rem; justify-content:center; font-size:1.4rem; color: var(--tinta); margin-bottom:1.4rem; }
.auth-brand i { color: var(--azul); }
.auth-title { font-weight:800; color: var(--tinta); text-align:center; margin-bottom:.2rem; }
.auth-sub { text-align:center; color: var(--gris-500); margin-bottom:1.6rem; font-size:.95rem; }
.auth-hint { margin-top:1.3rem; padding:.75rem; background: var(--azul-claro); border-radius:10px; font-size:.85rem; color: var(--gris-700); text-align:center; }
.auth-back { display:block; text-align:center; margin-top:1.2rem; color: var(--gris-500); font-size:.9rem; }

/* ============================ ADMIN LAYOUT ============================ */
.app-body { background: var(--gris-50); }
.app-layout { display:flex; min-height:100vh; }
.sidebar {
    width: var(--sidebar-w); background: var(--tinta); color: rgba(255,255,255,.75);
    display:flex; flex-direction:column; position:fixed; inset:0 auto 0 0; z-index:1040;
    transition: transform .25s;
}
.sidebar-brand { display:flex; align-items:center; gap:.6rem; padding:1.4rem 1.5rem; font-size:1.2rem; color:#fff; border-bottom:1px solid rgba(255,255,255,.08); }
.sidebar-brand i { color: var(--cyan); font-size:1.5rem; }
.sidebar-nav { flex:1; padding:1rem .8rem; overflow-y:auto; }
.sidebar-nav a {
    display:flex; align-items:center; gap:.8rem; padding:.72rem .9rem; border-radius:10px;
    color: rgba(255,255,255,.72); font-weight:500; margin-bottom:.2rem; transition:.15s;
}
.sidebar-nav a:hover { background: rgba(255,255,255,.08); color:#fff; }
.sidebar-nav a.active { background: var(--azul); color:#fff; box-shadow: 0 6px 16px rgba(37,99,235,.4); }
.sidebar-nav a i { font-size:1.1rem; }
.sidebar-sep { height:1px; background: rgba(255,255,255,.1); margin:.8rem .4rem; }
.sidebar-footer { padding:1rem; border-top:1px solid rgba(255,255,255,.08); }
.user-mini { display:flex; align-items:center; gap:.7rem; margin-bottom:.8rem; }
.user-avatar { width:42px; height:42px; border-radius:50%; background: var(--azul); color:#fff; display:grid; place-items:center; font-weight:700; }
.user-info { display:flex; flex-direction:column; line-height:1.2; }
.user-name { color:#fff; font-weight:600; font-size:.92rem; }
.user-role { font-size:.76rem; color: rgba(255,255,255,.55); }
.btn-logout { display:flex; align-items:center; gap:.5rem; justify-content:center; width:100%;
    padding:.6rem; border-radius:9px; background: rgba(255,255,255,.08); color: rgba(255,255,255,.85); font-weight:500; }
.btn-logout:hover { background: var(--error); color:#fff; }

.app-main { flex:1; margin-left: var(--sidebar-w); display:flex; flex-direction:column; min-width:0; }
.topbar {
    background:#fff; border-bottom:1px solid var(--gris-100); padding: .9rem 1.6rem;
    display:flex; align-items:center; gap:1rem; position:sticky; top:0; z-index:1020;
}
.topbar-title { font-size:1.25rem; font-weight:700; color: var(--tinta); margin:0; flex:1; }
.btn-burger { display:none; background:none; border:none; font-size:1.5rem; color: var(--gris-700); }
.content { padding: 1.8rem 1.6rem; flex:1; }
.content-footer { display:flex; justify-content:space-between; padding: 1rem 1.6rem; color: var(--gris-500); font-size:.85rem; border-top:1px solid var(--gris-100); }
.sidebar-overlay { position:fixed; inset:0; background:rgba(15,23,42,.5); z-index:1035; display:none; }
.sidebar-overlay.show { display:block; }

.card { border:1px solid var(--gris-100); border-radius: var(--radio); box-shadow: var(--sombra-sm); }
.page-actions { display:flex; justify-content:space-between; align-items:center; gap:1rem; margin-bottom:1.4rem; flex-wrap:wrap; }
.filtros { display:flex; gap:.6rem; flex-wrap:wrap; align-items:center; }
.filtros .form-select, .filtros .input-group { max-width: 230px; }
.table-meta { color: var(--gris-500); font-size:.9rem; margin-bottom:.8rem; }

/* KPIs */
.kpi-grid { display:grid; grid-template-columns: repeat(auto-fit, minmax(190px,1fr)); gap:1.1rem; }
.kpi-card { background:#fff; border-radius: var(--radio); padding:1.3rem; display:flex; align-items:center; gap:1rem; box-shadow: var(--sombra-sm); border:1px solid var(--gris-100); }
.kpi-icon { width:54px; height:54px; border-radius:13px; display:grid; place-items:center; font-size:1.5rem; color:#fff; }
.kpi-num { font-size:1.8rem; font-weight:800; color: var(--tinta); line-height:1; }
.kpi-lbl { font-size:.85rem; color: var(--gris-500); margin-top:.25rem; }
.kpi-blue .kpi-icon{background:linear-gradient(135deg,#2563eb,#1e40af);}
.kpi-cyan .kpi-icon{background:linear-gradient(135deg,#0ea5e9,#0369a1);}
.kpi-pink .kpi-icon{background:linear-gradient(135deg,#ec4899,#be185d);}
.kpi-green .kpi-icon{background:linear-gradient(135deg,#22c55e,#15803d);}
.kpi-amber .kpi-icon{background:linear-gradient(135deg,#f59e0b,#b45309);}

.chart-card { height:100%; }
.chart-title { font-size:1rem; font-weight:700; color: var(--tinta); margin-bottom:1rem; }
.chart-card canvas { max-height: 270px; }

.info-card h5 { font-size:1.05rem; font-weight:700; color: var(--tinta); margin-bottom:1rem; padding-bottom:.6rem; border-bottom:2px solid var(--gris-100); }
.info-card h5 i { color: var(--azul); }
.info-list { display:grid; grid-template-columns: 40% 60%; gap:.5rem 0; margin:0; }
.info-list dt { color: var(--gris-500); font-weight:500; font-size:.9rem; }
.info-list dd { color: var(--gris-900); font-weight:600; font-size:.92rem; margin:0; }

.profile-head { border:none; background: linear-gradient(135deg,#fff, var(--azul-claro)); }
.profile-avatar { width:72px; height:72px; border-radius:18px; background: var(--azul); color:#fff; display:grid; place-items:center; font-size:2rem; font-weight:800; }
.profile-tags { display:flex; gap:.5rem; flex-wrap:wrap; }
.profile-tags .badge { font-weight:500; }

/* ============================ FORM PAGE / WIZARD ============================ */
.form-page { padding: 2.5rem 0 4rem; }
.form-intro { max-width:760px; margin:0 auto 1.8rem; text-align:center; }
.form-intro h1 { font-weight:800; color: var(--tinta); font-size:1.9rem; }
.form-intro p { color: var(--gris-500); }
.form-card { max-width: 980px; margin:0 auto; border-radius:18px; }
.form-card .card-body { padding: 1.8rem; }
.req::after { content:' *'; color: var(--error); }
.subtitle { font-weight:700; color: var(--gris-700); font-size:1rem; margin: 1rem 0 .8rem; }

.wizard-steps { display:flex; gap:.3rem; overflow-x:auto; padding-bottom:.5rem; margin-bottom:.3rem; }
.wizard-step { display:flex; flex-direction:column; align-items:center; gap:.35rem; min-width:78px; cursor:pointer; flex:1; }
.step-dot { width:42px; height:42px; border-radius:50%; background: var(--gris-100); color: var(--gris-500);
    display:grid; place-items:center; font-size:1.1rem; border:2px solid transparent; transition:.2s; }
.wizard-step span { font-size:.72rem; color: var(--gris-500); font-weight:500; text-align:center; }
.wizard-step.active .step-dot { background: var(--azul); color:#fff; box-shadow:0 0 0 4px var(--azul-claro); }
.wizard-step.active span { color: var(--azul); font-weight:700; }
.wizard-step.done .step-dot { background: var(--ok); color:#fff; }
.wizard-progress { height:5px; background: var(--gris-100); border-radius:50px; overflow:hidden; margin-bottom:1.8rem; }
.wizard-progress-bar { height:100%; background: linear-gradient(90deg, var(--azul), var(--cyan)); border-radius:50px; transition: width .3s; }

.wizard-panel { display:none; animation: fadeIn .25s; }
.wizard-panel.active { display:block; }
@keyframes fadeIn { from { opacity:0; transform: translateY(8px);} to {opacity:1; transform:none;} }
.panel-title { font-size:1.25rem; font-weight:700; color: var(--tinta); margin-bottom:1.4rem; }
.panel-title i { color: var(--azul); }

.form-label { font-weight:500; color: var(--gris-700); font-size:.88rem; margin-bottom:.3rem; }
.form-control, .form-select { border-color: var(--gris-300); border-radius:9px; padding:.55rem .8rem; }
.form-control:focus, .form-select:focus { border-color: var(--azul); box-shadow: 0 0 0 3px var(--azul-claro); }

.dyn-wrap { display:flex; flex-direction:column; gap:.7rem; }
.dyn-row { background: var(--gris-50); border:1px solid var(--gris-100); border-radius:11px; padding:.9rem; }

.wizard-nav { display:flex; justify-content:space-between; gap:1rem; margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--gris-100); }
#btnGuardar { margin-left:auto; }

.chips-grid { display:grid; grid-template-columns: repeat(auto-fill, minmax(170px,1fr)); gap:.5rem; }
.chip { position:relative; display:flex; align-items:center; gap:.5rem; padding:.5rem .8rem; border:1px solid var(--gris-300);
    border-radius:9px; cursor:pointer; font-size:.88rem; transition:.15s; background:#fff; }
.chip input { accent-color: var(--azul); }
.chip:has(input:checked) { background: var(--azul-claro); border-color: var(--azul); color: var(--azul-osc); font-weight:600; }

.success-check { width:74px; height:74px; border-radius:50%; background: var(--ok); color:#fff; font-size:2.4rem;
    display:grid; place-items:center; margin:0 auto; box-shadow:0 8px 24px rgba(34,197,94,.4); }

/* Bloque de fotografia */
.foto-block { display:flex; gap:1.2rem; align-items:center; flex-wrap:wrap; background: var(--gris-50);
    border:1px dashed var(--gris-300); border-radius:14px; padding:1rem 1.2rem; margin-bottom:1.4rem; }
.foto-preview { width:120px; height:120px; border-radius:14px; overflow:hidden; flex:0 0 auto;
    background: var(--azul-claro); display:grid; place-items:center; border:2px solid var(--gris-100); }
.foto-preview i { font-size:3rem; color: var(--azul); }
.foto-preview img { width:100%; height:100%; object-fit:cover; }
#fotoVideo { width:160px; height:120px; border-radius:14px; object-fit:cover; background:#000; }
.foto-controls { flex:1; min-width:230px; }
.foto-btns { display:flex; gap:.5rem; flex-wrap:wrap; margin:.3rem 0; }

/* Analisis de riesgos (ficha del empleado) */
.riesgo-row { display:flex; align-items:center; gap:.8rem; margin-bottom:.9rem; }
.riesgo-lbl { flex:0 0 160px; font-weight:600; font-size:.86rem; display:flex; align-items:center; gap:.5rem; color: var(--azul-osc, #061B4D); }
.riesgo-lbl i { color: var(--azul, #0D3B8E); }
.riesgo-track { flex:1; height:12px; border-radius:8px; background:#eef1f5; overflow:hidden; }
.riesgo-fill { height:100%; border-radius:8px; transition:width .6s ease; }
.riesgo-badge { flex:0 0 auto; color:#fff; font-size:.72rem; font-weight:700; padding:3px 10px; border-radius:50px; min-width:88px; text-align:center; }
.alerta-item { display:flex; gap:.7rem; align-items:flex-start; padding:.7rem .9rem; border-radius:10px; border-left:4px solid; height:100%; font-size:.88rem; }
.alerta-item i { font-size:1.1rem; margin-top:1px; flex:0 0 auto; }
@media (max-width:520px){ .riesgo-lbl { flex-basis:120px; font-size:.78rem; } }

/* Impresion de reportes */
@media print {
    .sidebar, .topbar, .no-print { display:none !important; }
    .app-main { margin:0 !important; }
    .content { padding:0 !important; }
    .chart-card, .info-card, .kpi-card { break-inside:avoid; box-shadow:none !important; }
    body { -webkit-print-color-adjust:exact; print-color-adjust:exact; }
}

/* ============================ RESPONSIVE ============================ */
@media (max-width: 992px) {
    .sidebar { transform: translateX(-100%); }
    .sidebar.open { transform: translateX(0); }
    .app-main { margin-left:0; }
    .btn-burger { display:block; }
}
@media (max-width: 576px) {
    .content { padding: 1.2rem 1rem; }
    .form-card .card-body { padding: 1.1rem; }
    .info-list { grid-template-columns: 1fr; }
    .info-list dd { margin-bottom:.5rem; }
    .filtros .form-select, .filtros .input-group { max-width:none; flex:1; }
}