/* ==========================================================================
   Sistema de Monitoreo de Proyectos — Cáritas del Perú
   Hoja de estilos (separada del HTML para permitir CSP estricta)
   ========================================================================== */
:root{
  --bg:#F7F5F1; --paper:#FFFFFF; --ink:#1B2A2F; --muted:#6B6558; --line:#DDD7C8;
  --planificar:#2E5F6B; --implementar:#C98A3E; --medir:#4C7A5E; --aprender:#6B4C7A; --decidir:#B84C3E;
  --danger:#A3402F; --ok:#22764A; --warn:#C98A3E; --radius:10px;
  --shadow-sm:0 1px 3px #1b2a2f12; --shadow-md:0 10px 30px -12px #1b2a2f40;
  --field:#FFFFFF; --informes:#1F6F78; --sb-bg:#11201F; --sb-ink:#C9D4D2; --sb-muted:#7F938F; --sb-active:#1F6F78;
  color-scheme:light;
}
[data-theme="dark"]{
  --bg:#0E1719; --paper:#152326; --ink:#E6ECEC; --muted:#93A3A5; --line:#25383C; --field:#1A2C30;
  --shadow-sm:0 1px 3px #0006; --shadow-md:0 14px 34px -12px #000a; --sb-bg:#0A1314; color-scheme:dark;
}
*{box-sizing:border-box;}
html,body{margin:0;}
body{background:var(--bg);color:var(--ink);font-family:'Inter',system-ui,sans-serif;line-height:1.5;-webkit-font-smoothing:antialiased;}
h1,h2,h3,h4{font-family:'Fraunces',Georgia,serif;font-weight:600;margin:0 0 6px 0;letter-spacing:-0.01em;}
button{font-family:inherit;cursor:pointer;}
button:disabled{cursor:not-allowed;}
a{color:inherit;}
.hidden{display:none !important;}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}
:focus-visible{outline:2px solid var(--decidir);outline-offset:2px;}

/* ============================= LOGIN ============================= */
.login-wrap{min-height:100vh;display:flex;background:var(--bg);}
.login-left{flex:1.2;display:flex;flex-direction:column;min-width:0;}
.login-left-content{padding:32px 48px 40px;display:flex;flex-direction:column;gap:16px;max-width:640px;}
.inst-badge{display:inline-flex;align-items:center;gap:12px;background:var(--field);border:1px solid var(--line);border-radius:10px;padding:8px 14px;box-shadow:var(--shadow-sm);width:fit-content;}
.inst-badge img{height:34px;width:auto;display:block;}
.inst-badge .txt{font-size:12.5px;font-weight:700;line-height:1.35;border-left:1px solid var(--line);padding-left:12px;}
.inst-badge .txt small{display:block;font-weight:500;color:var(--muted);font-size:10.5px;}
.login-left-content h1{font-size:28px;line-height:1.15;margin:4px 0 0;}
.login-left-content .lede{color:var(--muted);font-size:13.5px;max-width:500px;margin:0;}
.login-features{display:flex;flex-direction:column;gap:8px;}
.feature-chip{background:var(--field);border:1px solid var(--line);border-left:3px solid var(--medir);border-radius:8px;padding:10px 14px;font-size:12.5px;display:flex;gap:9px;align-items:flex-start;}
.feature-chip .check{color:var(--medir);font-weight:700;flex-shrink:0;}

.login-right{flex:1;display:flex;align-items:flex-start;justify-content:center;padding:44px 32px 32px;background:var(--paper);border-left:1px solid var(--line);}
.login-card{width:100%;max-width:420px;}
.tls-badge{display:inline-flex;align-items:center;gap:6px;background:#2F8F5714;color:var(--ok);font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;margin-bottom:16px;}
.tls-badge .dot{width:6px;height:6px;border-radius:50%;background:var(--ok);box-shadow:0 0 0 3px #2F8F5726;}
.demo-badge{display:inline-flex;margin-left:6px;background:#C98A3E1c;color:#8A5A1C;font-size:11px;font-weight:700;padding:4px 11px;border-radius:20px;}
.login-eyebrow-small{font-family:'JetBrains Mono',monospace;font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);margin-bottom:3px;}
.login-card h2{font-size:24px;margin-bottom:18px;}
.login-field{margin-bottom:14px;}
.login-field label{display:block;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);margin-bottom:6px;}
.login-input-wrap{position:relative;display:flex;align-items:center;}
.login-input-wrap > svg{position:absolute;left:12px;width:15px;height:15px;color:var(--muted);pointer-events:none;}
.login-input-wrap input{width:100%;padding:12px 40px 12px 36px;border:1px solid var(--line);border-radius:10px;font-family:inherit;font-size:14px;background:var(--bg);color:var(--ink);transition:.15s;}
.login-input-wrap input:focus{outline:2px solid var(--decidir);outline-offset:1px;border-color:transparent;background:var(--field);}
.pw-toggle{position:absolute;right:8px;background:none;border:none;color:var(--muted);padding:6px;display:flex;border-radius:6px;}
.pw-toggle:hover{color:var(--ink);}
.pw-toggle svg{width:16px;height:16px;}
.caps-hint{font-size:11px;color:var(--warn);margin-top:5px;}
.demo-roles{display:flex;gap:6px;margin-bottom:14px;flex-wrap:wrap;}
.demo-roles .lbl{width:100%;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);}
.role-opt{flex:1;border:1px solid var(--line);border-radius:8px;padding:8px 6px;text-align:center;font-size:11.5px;font-weight:600;color:var(--muted);background:var(--field);}
.role-opt.active{border-color:var(--decidir);color:var(--decidir);background:#B84C3E10;}

/* Verificación de seguridad */
.verify-box{border:1px solid #DCE3E8;background:#F4F7F9;border-radius:14px;padding:12px 12px 10px;margin:4px 0 14px;}
.verify-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px;}
.verify-head b{font-size:12.5px;}
.verify-status{font-family:'JetBrains Mono',monospace;font-size:11px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);}
.verify-status[data-state="ok"]{color:var(--ok);}
.verify-status[data-state="error"]{color:var(--danger);}
.verify-status[data-state="loading"]{color:var(--warn);}
.verify-widget{min-height:65px;display:flex;align-items:center;justify-content:center;background:var(--field);border:1px solid #E3E8EC;border-radius:8px;overflow:hidden;}
.verify-widget .cf-turnstile, .verify-widget > div{width:100%;}
.verify-placeholder{font-size:12px;color:var(--muted);padding:18px;display:flex;align-items:center;gap:8px;}
.spinner{width:14px;height:14px;border:2px solid var(--line);border-top-color:var(--decidir);border-radius:50%;animation:spin .8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.verify-note{font-size:11px;color:var(--muted);margin-top:7px;display:flex;justify-content:space-between;gap:8px;align-items:center;}
.link-btn{background:none;border:none;color:var(--decidir);font-size:11px;font-weight:600;text-decoration:underline;padding:0;}

.login-err{font-size:12.5px;color:var(--danger);background:#B84C3E0f;border:1px solid #B84C3E33;border-radius:8px;padding:9px 12px;margin:0 0 12px;}
.login-btn{width:100%;padding:14px;border-radius:12px;font-size:14.5px;font-weight:700;border:none;color:#fff;background:var(--decidir);box-shadow:0 8px 20px -10px #B84C3Ecc;transition:.15s;display:flex;align-items:center;justify-content:center;gap:8px;}
.login-btn:hover:not(:disabled){filter:brightness(1.07);transform:translateY(-1px);}
.login-btn:disabled{background:#cfc9bd;box-shadow:none;}
.login-foot{border-top:1px solid var(--line);margin-top:22px;padding-top:16px;text-align:center;font-size:11.5px;color:var(--muted);line-height:1.8;}
.login-foot .link-btn{font-size:11.5px;}
@media(max-width:900px){
  .login-wrap{flex-direction:column;}
  .login-left-content{padding:22px 20px 26px;}
  .login-right{border-left:none;border-top:1px solid var(--line);padding:28px 20px;}
}

/* ============================= APP SHELL ============================= */
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--muted);padding:7px 12px;border-radius:8px;font-size:12.5px;font-weight:500;}
.btn-ghost:hover{border-color:var(--ink);color:var(--ink);}
.select-ghost{background:var(--field);border:1px solid var(--line);color:var(--ink);padding:7px 10px;border-radius:8px;font-size:12.5px;font-weight:600;max-width:260px;font-family:inherit;}


main{padding:24px 28px 60px;max-width:1320px;margin:0 auto;}
.module-head{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;margin-bottom:18px;}
.module-eyebrow{font-family:'JetBrains Mono',monospace;font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--step-color);margin-bottom:4px;display:block;}
.module-head p{color:var(--muted);font-size:13.5px;margin:4px 0 0;max-width:620px;}
.readonly-banner{background:#6B4C7A12;border:1px solid #6B4C7A33;color:var(--aprender);border-radius:8px;padding:8px 12px;font-size:12.5px;margin-bottom:14px;}

.subtabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:18px;}
.subtab{background:var(--paper);border:1px solid var(--line);padding:7px 13px;border-radius:20px;font-size:12.5px;font-weight:500;color:var(--muted);}
.subtab.active{background:var(--ink);color:var(--paper);border-color:var(--ink);}
.subtab:hover:not(.active){border-color:var(--ink);color:var(--ink);}

.panel{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:18px;}
.panel-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px;gap:10px;flex-wrap:wrap;}
.panel-head h3{font-size:16px;}
.count-pill{background:var(--bg);border:1px solid var(--line);border-radius:20px;padding:2px 10px;font-size:11.5px;color:var(--muted);font-family:'JetBrains Mono',monospace;}

.btn{background:var(--step-color,var(--ink));color:#fff;border:none;padding:8px 16px;border-radius:8px;font-size:13px;font-weight:600;}
.btn:hover{filter:brightness(1.08);}
.btn-sm{padding:5px 11px;font-size:12px;border-radius:7px;}
.btn-outline{background:transparent;border:1px solid var(--line);color:var(--ink);}
.btn-outline:hover{border-color:var(--ink);}
.btn-text{background:none;border:none;color:var(--danger);font-size:12px;padding:4px 6px;}
.btn-text.ink{color:var(--ink);}
.btn-text.accent{color:var(--step-color,var(--ink));font-weight:600;}

.form-panel{background:var(--bg);border:1px dashed var(--line);border-radius:var(--radius);padding:16px;margin-bottom:16px;}
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;}
.field{display:flex;flex-direction:column;gap:4px;}
.field.wide{grid-column:1/-1;}
.field label{font-size:11.5px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;}
.field input,.field select,.field textarea{border:1px solid var(--line);border-radius:7px;padding:8px 10px;font-family:inherit;font-size:13.5px;background:var(--field);color:var(--ink);}
.field textarea{resize:vertical;min-height:56px;}
.field input:focus,.field select:focus,.field textarea:focus{outline:2px solid var(--step-color);outline-offset:1px;border-color:transparent;}
.form-actions{display:flex;gap:8px;margin-top:14px;}

.table-wrap{overflow-x:auto;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.03em;color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line);white-space:nowrap;}
td{padding:9px 10px;border-bottom:1px solid var(--line);vertical-align:top;}
tr:hover td{background:#00000005;}
.chip{display:inline-block;padding:2px 8px;border-radius:20px;font-size:11px;font-weight:600;}
.chip-id{white-space:nowrap;font-family:'JetBrains Mono',monospace;background:var(--bg);color:var(--muted);}
.trace{font-size:11.5px;color:var(--muted);line-height:1.5;}
.trace b{color:var(--ink);font-weight:600;}
.muted{color:var(--muted);}
.empty{padding:30px 10px;text-align:center;color:var(--muted);font-size:13.5px;}
.empty b{display:block;color:var(--ink);font-family:'Fraunces',serif;font-size:16px;margin-bottom:4px;}

.kpi-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:18px;}
.kpi{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius);padding:16px;}
.kpi .val{font-family:'Fraunces',serif;font-size:30px;font-weight:600;line-height:1;}
.kpi .lbl{font-size:11.5px;color:var(--muted);margin-top:6px;text-transform:uppercase;letter-spacing:.03em;}
.grid-2{display:grid;grid-template-columns:1.3fr 1fr;gap:18px;}
@media(max-width:900px){.grid-2{grid-template-columns:1fr;}}
.bar-row{display:flex;align-items:center;gap:10px;margin-bottom:10px;}
.bar-row .name{font-size:12.5px;width:170px;flex-shrink:0;}
.bar-track{flex:1;height:8px;background:var(--bg);border-radius:6px;overflow:hidden;}
.bar-fill{height:100%;border-radius:6px;}
.bar-pct{width:40px;text-align:right;font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--muted);}
.scroll-360{max-height:360px;overflow-y:auto;}
.alert-item{display:flex;gap:10px;padding:10px 0;border-bottom:1px solid var(--line);font-size:12.5px;}
.alert-item:last-child{border-bottom:none;}
.alert-dot{width:8px;height:8px;border-radius:50%;background:var(--danger);flex-shrink:0;margin-top:4px;}
.alert-item .t{color:var(--muted);font-size:11px;}
canvas{max-width:100%;}

.cal-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.03em;margin:14px 0 6px;text-align:center;}
.cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;}
.cal-cell{aspect-ratio:1/0.85;border:1px solid var(--line);border-radius:8px;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:12px;color:var(--ink);padding:4px;}
.cal-cell:hover{border-color:var(--step-color);}
.cal-empty{background:transparent;border:none;}
.cal-today .cal-daynum{color:var(--step-color);font-weight:700;}
.cal-selected{border-color:var(--step-color);background:var(--paper);box-shadow:0 0 0 1px var(--step-color);}
.cal-dots{display:flex;gap:2px;}
.cal-dot{width:6px;height:6px;border-radius:50%;display:inline-block;flex-shrink:0;}
.cal-legend{display:flex;gap:16px;margin-top:12px;font-size:11.5px;color:var(--muted);align-items:center;flex-wrap:wrap;}

.modal-backdrop{position:fixed;inset:0;background:#1B2A2F66;display:flex;align-items:center;justify-content:center;z-index:100;padding:20px;backdrop-filter:blur(2px);}
.modal-box{background:var(--paper);border-radius:12px;max-width:560px;width:100%;max-height:85vh;overflow-y:auto;padding:22px;border:1px solid var(--line);box-shadow:var(--shadow-md);}
.modal-box.wide{max-width:760px;}
.att-list{margin:12px 0;max-height:220px;overflow-y:auto;}
.att-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);font-size:13px;}
.att-row:last-child{border-bottom:none;}
.att-add{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap;}
.att-add input,.att-add select{flex:1;min-width:120px;border:1px solid var(--line);border-radius:7px;padding:7px 9px;font-size:13px;font-family:inherit;background:var(--field);color:var(--ink);}
.file-drop{border:1px dashed var(--line);border-radius:8px;padding:12px;text-align:center;font-size:12.5px;color:var(--muted);margin-top:16px;}
.file-drop input{margin-top:8px;font-size:12px;}
.flow-step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--line);}
.flow-step:last-child{border-bottom:none;}
.flow-num{width:30px;height:30px;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-family:'JetBrains Mono',monospace;font-size:12.5px;font-weight:700;flex-shrink:0;}
.flow-body b{font-family:'Fraunces',serif;font-size:14.5px;display:block;margin-bottom:2px;}
.flow-body p{font-size:12.5px;color:var(--muted);margin:0 0 5px;}
.flow-tag{display:inline-block;font-size:10.5px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.03em;padding:2px 8px;border-radius:10px;}
.privacy p{font-size:13px;color:var(--ink);margin:0 0 10px;}

.toast-host{position:fixed;right:20px;bottom:20px;display:flex;flex-direction:column;gap:8px;z-index:200;max-width:360px;}
.toast{background:var(--ink);color:#fff;padding:11px 14px;border-radius:10px;font-size:13px;box-shadow:var(--shadow-md);animation:tin .2s ease-out;}
.toast.error{background:var(--danger);}
.toast.ok{background:var(--ok);}
.toast.warn{background:#9a6420;}
@keyframes tin{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}

@media(max-width:700px){
  main{padding:16px;}
}
@media (prefers-reduced-motion:reduce){*{animation:none !important;transition:none !important;}}

/* ============================= LOGIN siempre en tema claro ============================= */
.login-wrap{--bg:#F7F5F1;--paper:#FFFFFF;--ink:#1B2A2F;--muted:#6B6558;--line:#DDD7C8;--field:#FFFFFF;color:var(--ink);color-scheme:light;}

/* ============================= SHELL: menú lateral + barra superior ============================= */
.app{display:grid;grid-template-columns:var(--sbw,252px) minmax(0,1fr);min-height:100vh;transition:grid-template-columns .2s;}
.app.collapsed{--sbw:74px;}
.sidebar{position:sticky;top:0;height:100vh;background:var(--sb-bg);color:var(--sb-ink);display:flex;flex-direction:column;overflow:hidden;border-right:1px solid #ffffff0f;z-index:40;}
.sb-brand{display:flex;align-items:center;gap:11px;padding:18px 16px;border-bottom:1px solid #ffffff10;min-height:72px;}
.sb-logo{width:40px;height:40px;border-radius:10px;background:#fff;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:hidden;}
.sb-logo img{width:30px;height:30px;object-fit:contain;}
.sb-brand-txt{display:flex;flex-direction:column;line-height:1.15;white-space:nowrap;}
.sb-brand-txt b{font-family:'Inter',sans-serif;font-weight:800;font-size:16px;letter-spacing:.04em;color:#fff;}
.sb-brand-txt small{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--sb-muted);margin-top:3px;}
.sb-nav{flex:1;overflow-y:auto;padding:8px 12px 16px;}
.sb-group{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--sb-muted);padding:16px 10px 6px;white-space:nowrap;}
.sb-item{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;color:var(--sb-ink);padding:10px 12px;border-radius:10px;font-size:13.5px;font-weight:500;text-align:left;margin:2px 0;position:relative;white-space:nowrap;transition:background .15s,color .15s;}
.sb-item svg{width:18px;height:18px;flex-shrink:0;}
.sb-item .num{font-family:'JetBrains Mono',monospace;font-size:10.5px;width:22px;height:22px;border-radius:6px;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;color:#fff;background:var(--c,#ffffff22);}
.sb-item:hover{background:#ffffff0d;color:#fff;}
.sb-item.active{background:linear-gradient(135deg,var(--sb-active),#2B8A93);color:#fff;font-weight:600;box-shadow:0 8px 18px -10px #1F6F78;}
.sb-item.locked{opacity:.42;}
.sb-item .lock{margin-left:auto;font-size:11px;}
.sb-item .badge{margin-left:auto;background:#B84C3E;color:#fff;font-size:10px;font-weight:700;padding:1px 7px;border-radius:10px;}
.sb-collapse{display:flex;align-items:center;justify-content:center;gap:9px;background:none;border:none;border-top:1px solid #ffffff10;color:var(--sb-muted);padding:15px;font-size:12.5px;white-space:nowrap;}
.sb-collapse:hover{color:#fff;}
.sb-collapse svg{width:17px;height:17px;flex-shrink:0;}
.app.collapsed .sb-brand-txt,.app.collapsed .sb-group,.app.collapsed .sb-item .lbl,.app.collapsed .sb-item .lock,.app.collapsed .sb-item .badge,.app.collapsed .sb-collapse span{display:none;}
.app.collapsed .sb-item{justify-content:center;padding:10px;}
.app.collapsed .sb-group{display:block;height:10px;padding:0;overflow:hidden;color:transparent;border-top:1px solid #ffffff10;margin:10px 6px 4px;}
.sb-overlay{display:none;}
.app-main{min-width:0;display:flex;flex-direction:column;}
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:14px;padding:12px 28px;background:color-mix(in srgb,var(--paper) 88%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--line);min-height:68px;}
.icon-btn{width:36px;height:36px;border-radius:9px;border:1px solid transparent;background:none;color:var(--muted);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;}
.icon-btn:hover{background:var(--bg);color:var(--ink);border-color:var(--line);}
.icon-btn svg{width:19px;height:19px;}
.crumbs{min-width:0;flex:1;}
.crumb-path{font-size:10.5px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);display:flex;gap:8px;}
.crumb-title{font-weight:700;font-size:16.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.topbar-right{display:flex;align-items:center;gap:12px;}
.env-badge{font-size:10.5px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;padding:4px 11px;border-radius:20px;border:1px solid #2F8F5766;color:var(--ok);background:#2F8F5712;}
.env-badge.demo{border-color:#C98A3E77;color:#9a6420;background:#C98A3E14;}
[data-theme="dark"] .env-badge.demo{color:#E2B26E;}
.user-box{display:flex;align-items:center;gap:11px;padding-left:14px;border-left:1px solid var(--line);}
.user-meta{display:flex;flex-direction:column;align-items:flex-end;line-height:1.25;}
.user-meta b{font-size:13px;}
.user-meta span{font-size:11px;color:var(--muted);}
.link-plain{background:none;border:none;padding:0;color:var(--muted);font-size:11px;}
.link-plain:hover{color:var(--danger);text-decoration:underline;}
.avatar{width:40px;height:40px;border-radius:11px;background:#1F6F7822;color:var(--informes);border:1px solid #1F6F7844;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;}
[data-theme="dark"] .avatar{color:#7CC6CD;}
main{width:100%;}
@media(max-width:1100px){.topbar-right .select-ghost{max-width:170px;}.user-meta{display:none;}}
@media(max-width:900px){
  .app,.app.collapsed{grid-template-columns:1fr;}
  .sidebar{position:fixed;left:0;top:0;bottom:0;width:264px;transform:translateX(-105%);transition:transform .22s;}
  .app.mobile-open .sidebar{transform:none;}
  .app.mobile-open .sb-overlay{display:block;position:fixed;inset:0;background:#0008;z-index:35;}
  .app.collapsed .sb-brand-txt,.app.collapsed .sb-item .lbl,.app.collapsed .sb-group{display:revert;}
  .topbar{padding:10px 14px;}
  .env-badge{display:none;}
}

/* ============================= INFORMES ANALÍTICOS ============================= */
.rep-hero{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--informes);border-radius:14px;padding:22px 24px;display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.rep-hero .eyebrow{font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--informes);}
[data-theme="dark"] .rep-hero .eyebrow,[data-theme="dark"] .rep-card .ic{color:#7CC6CD;}
.rep-hero h2{font-family:'Inter',sans-serif;font-weight:800;font-size:28px;letter-spacing:-.02em;margin:6px 0 4px;}
.rep-hero p{color:var(--muted);font-size:13.5px;margin:0;max-width:640px;}
.exp-btns{display:flex;gap:8px;flex-wrap:wrap;}
.exp-btn{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border-radius:9px;font-size:12.5px;font-weight:700;border:1px solid;background:var(--paper);}
.exp-btn svg{width:15px;height:15px;}
.exp-btn.xlsx{color:#1E7A4C;border-color:#1E7A4C55;}
.exp-btn.csv{color:#3B5BA9;border-color:#3B5BA955;}
.exp-btn.pdf{color:#B84C3E;border-color:#B84C3E55;}
.exp-btn:hover:not(:disabled){background:var(--bg);}
.exp-btn:disabled{opacity:.4;}
.rep-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:16px;}
@media(max-width:1100px){.rep-cards{grid-template-columns:repeat(2,minmax(0,1fr));}}
@media(max-width:600px){.rep-cards{grid-template-columns:1fr;}}
.rep-card{display:flex;gap:12px;align-items:flex-start;text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:16px;color:var(--ink);transition:.15s;}
.rep-card:hover{border-color:var(--informes);transform:translateY(-1px);}
.rep-card .ic{width:38px;height:38px;border-radius:10px;border:1px solid #1F6F7844;background:#1F6F7812;color:var(--informes);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.rep-card .ic svg{width:18px;height:18px;}
.rep-card b{display:block;font-size:13.5px;margin-bottom:3px;}
.rep-card span{font-size:12px;color:var(--muted);line-height:1.4;}
.rep-card.active{border-color:var(--informes);background:color-mix(in srgb,var(--informes) 9%,var(--paper));box-shadow:0 0 0 1px var(--informes) inset;}
.rep-card.active .ic{background:var(--informes);color:#fff;}
.rep-layout{display:grid;grid-template-columns:280px minmax(0,1fr);gap:16px;align-items:start;}
@media(max-width:1000px){.rep-layout{grid-template-columns:1fr;}}
.rep-filters{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--informes);border-radius:14px;padding:16px;position:sticky;top:84px;}
.rep-filters .fh{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:12px;}
.rep-filters .fh b{font-size:13.5px;}
.rep-filters .fh p{font-size:11.5px;color:var(--muted);margin:2px 0 0;}
.fgroup{margin-bottom:12px;}
.fgroup label{display:flex;align-items:center;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);margin-bottom:5px;}
.fgroup select,.fgroup input[type=search]{width:100%;border:1px solid var(--line);background:var(--bg);color:var(--ink);border-radius:9px;padding:9px 10px;font-family:inherit;font-size:13px;}
.fgroup select:focus,.fgroup input:focus{outline:2px solid var(--informes);outline-offset:1px;border-color:transparent;}
.fnote{font-size:11.5px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:9px;padding:10px;margin-bottom:12px;}
.fadv{border:1px solid var(--line);border-radius:9px;background:var(--bg);margin-bottom:14px;}
.fadv summary{cursor:pointer;font-size:12.5px;font-weight:700;padding:10px 12px;}
.fadv .inner{padding:0 12px 10px;}
.fcheck{display:flex;gap:8px;align-items:flex-start;font-size:12.5px;}
.btn-generate{width:100%;display:flex;align-items:center;justify-content:center;gap:8px;background:var(--informes);color:#fff;border:none;border-radius:11px;padding:13px;font-size:14px;font-weight:700;box-shadow:0 10px 22px -12px var(--informes);}
.btn-generate:hover{filter:brightness(1.08);}
.btn-generate svg{width:17px;height:17px;}
.rep-empty{border:2px dashed var(--line);border-radius:14px;min-height:420px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:30px;color:var(--muted);background:color-mix(in srgb,var(--paper) 55%,transparent);}
.rep-empty svg{width:34px;height:34px;color:var(--informes);margin-bottom:12px;}
.rep-empty b{color:var(--ink);font-size:16px;margin-bottom:6px;}
.rep-out{position:relative;}
.rep-out .panel{position:relative;}
.rep-meta{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:12px;}
.rep-meta h3{font-family:'Inter',sans-serif;font-weight:800;font-size:19px;margin:0;}
.rep-meta .chips{display:flex;gap:6px;flex-wrap:wrap;}
.fchip{font-size:11px;padding:3px 10px;border-radius:20px;background:var(--bg);border:1px solid var(--line);color:var(--muted);}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px;}
.kpi2{background:var(--paper);border:1px solid var(--line);border-top:3px solid var(--k,var(--informes));border-radius:12px;padding:14px 16px;}
.kpi2 .l{font-size:12px;color:var(--muted);font-weight:600;}
.kpi2 .v{font-size:28px;font-weight:800;letter-spacing:-.02em;margin:4px 0 2px;}
.kpi2 .s{font-size:11px;color:var(--muted);}
.kpi2 .bar-track{margin-top:8px;height:5px;}
.quick{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:16px;align-items:center;}
@media(max-width:900px){.quick{grid-template-columns:1fr;}}
.quick p{font-size:14px;line-height:1.7;margin:0;}
.quick p b{color:var(--informes);}
[data-theme="dark"] .quick p b{color:#7CC6CD;}
.mini-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.mini{border:1px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;}
.mini .l{font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);}
.mini .v{font-size:15px;font-weight:700;margin-top:4px;}
.sec-label{font-size:10.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--informes);margin-bottom:3px;}
[data-theme="dark"] .sec-label{color:#7CC6CD;}
.chart-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:16px;}
.chart-box{position:relative;height:260px;}
.rep-table{font-size:12.5px;}
.rep-table th{position:sticky;top:0;background:var(--paper);}
.rep-table td.num,.rep-table th.num{text-align:right;font-variant-numeric:tabular-nums;}
.rep-table tfoot td{font-weight:700;border-top:2px solid var(--line);background:var(--bg);}
.tbl-scroll{max-height:440px;overflow:auto;border:1px solid var(--line);border-radius:10px;}
.sem{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;}
.sem i{width:8px;height:8px;border-radius:50%;display:inline-block;}
.watermark{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:1;border-radius:inherit;}
.watermark span{position:absolute;white-space:nowrap;font-size:13px;font-weight:700;letter-spacing:.06em;color:var(--ink);opacity:.045;transform:rotate(-24deg);}
.conf-strip{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--muted);margin:2px 0 12px;}
.conf-strip svg{width:14px;height:14px;color:var(--informes);}
/* Modal de confidencialidad */
.conf-modal h3{font-family:'Inter',sans-serif;font-weight:800;font-size:17px;}
.conf-head{display:flex;gap:12px;align-items:center;border:1px solid #1F6F7855;background:#1F6F7810;border-radius:12px;padding:12px 14px;margin:10px 0 14px;}
.conf-head .ic{width:40px;height:40px;border-radius:10px;border:1px solid #1F6F7855;display:flex;align-items:center;justify-content:center;color:var(--informes);flex-shrink:0;}
.conf-head b{font-size:14px;display:block;}
.conf-head small{font-size:12px;color:var(--muted);}
.conf-modal p{font-size:13px;color:var(--muted);margin:0 0 12px;}
.conf-rule{display:flex;gap:12px;border-left:3px solid var(--informes);padding:6px 0 6px 12px;margin-bottom:8px;font-size:12.5px;}
.conf-rule b{font-family:'JetBrains Mono',monospace;color:var(--informes);font-size:11.5px;}
.conf-accept{display:flex;gap:10px;align-items:flex-start;background:var(--bg);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:14px 0 8px;font-size:13px;}
.conf-accept input{width:18px;height:18px;accent-color:var(--informes);margin-top:1px;flex-shrink:0;}
.conf-foot{font-size:11px;color:var(--muted);}
.conf-actions{display:flex;justify-content:flex-end;gap:8px;border-top:1px solid var(--line);margin:14px -22px -22px;padding:14px 22px;}
.btn-teal{background:var(--informes);color:#fff;border:none;border-radius:9px;padding:10px 16px;font-weight:700;font-size:13px;}
.btn-teal:disabled{opacity:.45;}
.btn-soft{background:var(--bg);color:var(--ink);border:1px solid var(--line);border-radius:9px;padding:10px 16px;font-weight:600;font-size:13px;}
.loading-veil{display:flex;align-items:center;justify-content:center;gap:10px;min-height:300px;color:var(--muted);font-size:13px;}
@media print{.sidebar,.topbar,.rep-filters,.rep-cards,.exp-btns{display:none !important;}.app{display:block;}}

/* ============================= LOGIN · panel institucional ampliado (sin franjas) ============================= */
.login-left{justify-content:center;align-items:center;background:radial-gradient(1200px 600px at 0% 0%,#1F6F780d,transparent 60%),radial-gradient(900px 500px at 100% 100%,#B84C3E0a,transparent 60%),var(--bg);}
.login-left-content{max-width:760px;width:100%;padding:56px 64px;gap:22px;}
.inst-badge{padding:12px 20px;gap:16px;border-radius:14px;}
.inst-badge img{height:48px;}
.inst-badge .txt{font-size:15px;padding-left:16px;}
.inst-badge .txt small{font-size:12px;}
.login-left-content h1{font-size:46px;line-height:1.08;letter-spacing:-.02em;margin-top:8px;}
.login-left-content .lede{font-size:17px;line-height:1.65;max-width:640px;}
.login-features{gap:12px;}
.feature-chip{font-size:15px;padding:15px 18px;border-left-width:4px;border-radius:10px;}
@media(max-width:900px){
  .login-left-content{padding:28px 20px;gap:14px;}
  .login-left-content h1{font-size:30px;}
  .login-left-content .lede{font-size:14.5px;}
  .feature-chip{font-size:13.5px;padding:11px 14px;}
  .inst-badge img{height:38px;}
}
.login-right{align-items:center;}
@media(max-width:900px){.login-right{align-items:flex-start;}}

/* Tarjetas de capacidades del login (reemplazan la franja de seguridad) */
.cap-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:6px;}
.cap-card{position:relative;overflow:hidden;background:var(--paper);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;display:flex;flex-direction:column;gap:4px;
  box-shadow:0 1px 2px #1b2a2f0a;transition:transform .18s,box-shadow .18s,border-color .18s;}
.cap-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:3px;background:var(--cc);opacity:.85;}
.cap-card:hover{transform:translateY(-2px);box-shadow:0 12px 26px -16px #1b2a2f55;border-color:color-mix(in srgb,var(--cc) 45%,var(--line));}
.cap-ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:12px;
  color:var(--cc);background:color-mix(in srgb,var(--cc) 11%,#fff);border:1px solid color-mix(in srgb,var(--cc) 30%,#fff);}
.cap-ic svg{width:19px;height:19px;}
.cap-card b{font-size:15px;color:var(--ink);}
.cap-card > span:last-child{font-size:12.5px;color:var(--muted);}
.cap-card.c1{--cc:#1F6F78;} .cap-card.c2{--cc:#C98A3E;} .cap-card.c3{--cc:#B84C3E;}
@media(max-width:900px){.cap-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;}.cap-card{padding:12px;}.cap-ic{width:32px;height:32px;margin-bottom:8px;}.cap-card b{font-size:13px;}.cap-card > span:last-child{font-size:11px;}}

/* ===== Accesibilidad (WCAG 2.1 AA): contrastes verificados con axe-core ===== */
.sb-item .num{background:color-mix(in srgb,var(--c,#ffffff22) 72%,#000);}
.tls-badge{color:#22764A;}
.toast.warn{background:#8A5A1C;}
[data-theme="dark"] .module-eyebrow{color:color-mix(in srgb,var(--step-color) 45%,#fff);}
[data-theme="dark"] .rep-hero .eyebrow,[data-theme="dark"] .sec-label{color:#8FD0D6;}
[data-theme="dark"] .chip{filter:brightness(1.55) saturate(.9);}
[data-theme="dark"] .verify-status[data-state="ok"]{color:#22764A;}
.tbl-scroll:focus-visible{outline:2px solid var(--informes);outline-offset:2px;}

/* Tablas: búsqueda y paginación */
.tbl-tools{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.tbl-search{border:1px solid var(--line);background:var(--field);color:var(--ink);border-radius:8px;padding:7px 11px;font-family:inherit;font-size:12.5px;min-width:220px;}
.tbl-search:focus{outline:2px solid var(--step-color,var(--informes));outline-offset:1px;border-color:transparent;}
.pager{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap;padding:12px 2px 0;font-size:12.5px;color:var(--muted);}
.pager .pg-num{font-family:'JetBrains Mono',monospace;font-size:11.5px;margin:0 8px;}
.pager .btn:disabled{opacity:.4;}
@media(max-width:700px){.tbl-search{min-width:0;width:100%;}}
