@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500;600;700&family=Inter:wght@400;500;600&display=swap');

:root{
  --navy:#015673; --navy-deep:#012f40; --navy-mid:#013e54; --sky:#56ACDF; --lime:#98BC10; --lime-deep:#6f8c0a;
  --ink:#0f1f26; --paper:#fff; --paper-dim:#F3F7F9; --muted:#5C7078; --line:#E1EAEE; --line-strong:#CBD9DF;
  --red:#B9382A; --amber:#B7791F; --green:#2F7D4F;
  --radius:12px; --radius-sm:8px;
  --shadow-sm:0 1px 2px rgba(1,47,64,.06), 0 2px 8px rgba(1,47,64,.05);
  --shadow:0 4px 12px rgba(1,47,64,.06), 0 16px 36px rgba(1,47,64,.07);
  --ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--paper-dim); color:var(--ink); font-family:'Inter',system-ui,sans-serif; font-size:14px;
  line-height:1.55; -webkit-font-smoothing:antialiased;}
h1,h2,h3{font-family:'Poppins',sans-serif; font-weight:600; margin:0; color:var(--navy-deep); letter-spacing:-.01em; line-height:1.25;}
a{color:inherit;}
img{max-width:100%;}
:focus-visible{outline:3px solid rgba(86,172,223,.65); outline-offset:2px; border-radius:6px;}
.ico{width:18px; height:18px; flex:none;}

/* ================================================================ layout */
.layout{display:grid; grid-template-columns:284px 1fr; min-height:100vh;}
.topbar{display:none;}
.scrim{display:none;}
.sidebar{
  background:linear-gradient(180deg, var(--navy-deep), #01384d 60%, var(--navy-mid)); color:#D2E4EA;
  padding:22px 14px 18px; position:sticky; top:0; height:100vh; display:flex; flex-direction:column; z-index:40;
}
.sidebar .brand{display:flex; align-items:center; gap:11px; padding:4px 10px 22px; margin-bottom:8px; border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar .brand img{height:46px; width:auto;}
.sidebar .brand b{display:block; font-family:'Poppins',sans-serif; font-size:14px; color:#fff; line-height:1.2;}
.sidebar .brand span{font-size:10.5px; color:#8FB3BF; display:block; letter-spacing:0;}
.sidebar nav{display:flex; flex-direction:column; gap:3px; margin-top:10px;}
.sidebar nav a{
  display:flex; align-items:center; gap:11px; padding:10px 12px; font-size:13.5px; font-weight:500; color:#C3DAE2;
  text-decoration:none; border-radius:10px; transition:background .2s, color .2s;
}
.sidebar nav a:hover{color:#fff; background:rgba(255,255,255,.07);}
.sidebar nav a.active{color:#fff; background:rgba(152,188,16,.16); box-shadow:inset 3px 0 0 var(--lime);}
.sidebar nav a.active .ico{color:var(--lime);}
.sidebar .spacer{flex:1;}
.sidebar .user{display:flex; align-items:center; gap:10px; padding:14px 10px 0; border-top:1px solid rgba(255,255,255,.1); font-size:12px; color:#9DBBC5;}
.sidebar .avatar{
  width:34px; height:34px; border-radius:50%; background:linear-gradient(135deg, var(--sky), var(--navy)); color:#fff;
  display:flex; align-items:center; justify-content:center; font-weight:600; font-size:13px; text-transform:uppercase; flex:none;
}
.sidebar .user b{display:block; color:#fff; font-size:13px; font-weight:500;}
.sidebar .user a{display:inline-flex; align-items:center; gap:5px; color:#F0B3AA; text-decoration:none; font-size:12px; margin-top:1px;}
.sidebar .user a:hover{color:#fff;}
.sidebar .user a .ico{width:14px; height:14px;}

.main{padding:34px 44px 60px; max-width:1240px; width:100%;}
.pagehead{display:flex; justify-content:space-between; align-items:flex-end; margin-bottom:24px; flex-wrap:wrap; gap:14px;}
.pagehead.fijo{position:sticky; top:0; z-index:20; background:var(--paper-dim); padding:12px 0; margin-bottom:12px;}
@media (max-width: 900px){ .pagehead.fijo{top:58px;} }
.pagehead.fijo .form-tools.en-cabecera{flex-basis:100%; margin:0;}
.pagehead h1{font-size:25px;}
.pagehead p{margin:5px 0 0; color:var(--muted); font-size:13.5px;}
.main h2{font-size:15.5px; margin:0 0 12px;}
.section-gap{margin-top:34px;}

/* ================================================================ botones */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px; cursor:pointer; border:1px solid var(--navy);
  background:var(--navy); color:#fff; padding:9px 17px; font-family:'Inter',sans-serif; font-size:13px; font-weight:500;
  text-decoration:none; border-radius:var(--radius-sm); line-height:1.2;
  transition:transform .15s var(--ease), background .2s, border-color .2s, box-shadow .2s, color .2s;
}
.btn:hover{background:var(--navy-deep); border-color:var(--navy-deep); transform:translateY(-1px); box-shadow:0 4px 12px rgba(1,86,115,.22);}
.btn:active{transform:none; box-shadow:none;}
.btn.lime{background:var(--lime); border-color:var(--lime); color:var(--navy-deep); font-weight:600;}
.btn.lime:hover{background:#a9cd1d; border-color:#a9cd1d; box-shadow:0 4px 14px rgba(152,188,16,.38);}
.btn.ghost{background:#fff; color:var(--navy); border-color:var(--line-strong);}
.btn.ghost:hover{background:var(--paper-dim); border-color:var(--navy); box-shadow:none;}
.btn.danger{background:#fff; color:var(--red); border-color:#E3B8B2;}
.btn.danger:hover{background:#FBEDEA; border-color:var(--red); box-shadow:none;}
.btn.sm{padding:6px 11px; font-size:12px; border-radius:7px;}
.btn[disabled], .btn.is-busy{opacity:.65; pointer-events:none;}

/* ================================================================ tarjetas */
.card{background:#fff; border:1px solid var(--line); box-shadow:var(--shadow-sm); padding:22px; border-radius:var(--radius);}
.stats{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-bottom:28px;}
.stat{
  display:flex; align-items:center; gap:14px; background:#fff; border:1px solid var(--line); padding:18px 20px;
  border-radius:var(--radius); box-shadow:var(--shadow-sm); transition:transform .2s var(--ease), box-shadow .2s;
}
.stat:hover{transform:translateY(-2px); box-shadow:var(--shadow);}
.stat .ic{
  width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; flex:none;
  background:linear-gradient(135deg, rgba(86,172,223,.18), rgba(1,86,115,.12)); color:var(--navy);
}
.stat .ic .ico{width:22px; height:22px;}
.stat .ic.verde{background:rgba(47,125,79,.12); color:var(--green);}
.stat .ic.ambar{background:rgba(183,121,31,.14); color:var(--amber);}
.stat .n{font-family:'Poppins',sans-serif; font-size:26px; font-weight:600; color:var(--navy-deep); line-height:1.1;}
.stat .l{font-size:11.5px; color:var(--muted); margin-top:3px; letter-spacing:.04em; text-transform:uppercase;}

.quick{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:28px;}
.docs-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px;}
.doc-card{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;}
.doc-actions{display:flex; gap:8px;}
.grid-2{display:grid; grid-template-columns:1.6fr 1fr; gap:22px; align-items:start;}
.panel-title{display:flex; align-items:center; justify-content:space-between; margin-bottom:12px;}
.panel-title h2{margin:0;}
.empty{text-align:center; color:var(--muted); padding:26px 12px;}
.pend-item{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:11px 0; border-bottom:1px solid var(--line);}
.pend-item:last-child{border-bottom:0;}
.pend-item b{display:block; font-weight:600; font-size:13.5px;}
.pend-item span{font-size:12px; color:var(--muted);}

/* ================================================================ tablas */
table.list{
  width:100%; border-collapse:separate; border-spacing:0; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-sm);
}
table.list th{
  text-align:left; font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); font-weight:600;
  padding:12px 14px; background:var(--paper-dim); border-bottom:1px solid var(--line);
}
table.list td{padding:13px 14px; border-bottom:1px solid var(--line); font-size:13.5px; vertical-align:middle;}
table.list tr:last-child td{border-bottom:0;}
table.list tbody tr{transition:background .15s;}
table.list tbody tr:hover td{background:#F8FBFC;}
table.list a:not(.btn){color:var(--navy); font-weight:500; text-decoration:none;}
table.list a:not(.btn):hover{text-decoration:underline;}

.badge{display:inline-flex; align-items:center; gap:6px; padding:3px 10px; font-size:11.5px; font-weight:500; border-radius:999px;
  border:1px solid var(--line-strong); color:var(--muted); background:#fff;}
.badge::before{content:""; width:6px; height:6px; border-radius:50%; background:currentColor; opacity:.75;}
.badge.ok{color:var(--green); border-color:#B8DCC6; background:#EFF8F2;}
.badge.proceso{color:var(--amber); border-color:#EBD3A6; background:#FCF6E8;}
.badge.no{color:var(--red); border-color:#E3B8B2; background:#FBEDEA;}

/* ================================================================ formularios */
form label{display:block; font-size:12px; font-weight:600; color:#3F565F; margin:14px 0 5px;}
form input, form textarea, form select{
  width:100%; background:#fff; border:1.5px solid var(--line-strong); color:var(--ink); padding:9px 11px;
  font-family:'Inter',sans-serif; font-size:13.5px; border-radius:var(--radius-sm);
  transition:border-color .2s, box-shadow .2s;
}
form input:hover, form textarea:hover, form select:hover{border-color:#A9BFC8;}
form input:focus, form textarea:focus, form select:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(86,172,223,.18);}
form textarea{resize:vertical; min-height:90px;}
form input[type=file]{padding:8px; background:var(--paper-dim); border-style:dashed;}
.row2{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.check-row{display:flex; align-items:center; gap:8px; margin-top:14px;}
.check-row input{width:auto;}
.check-row label{margin:0;}
input[type=checkbox], input[type=radio]{accent-color:var(--navy);}

.flash{
  display:flex; align-items:flex-start; justify-content:space-between; gap:12px; padding:12px 16px; margin-bottom:18px;
  font-size:13.5px; border:1px solid; border-radius:10px; animation:entra .35s var(--ease);
}
.flash button{background:none; border:0; color:inherit; font-size:18px; line-height:1; cursor:pointer; padding:0 2px; opacity:.6;}
.flash button:hover{opacity:1;}
.flash.ok{background:#EFF8F2; border-color:#B8DCC6; color:#256A41;}
.flash.error{background:#FBEDEA; border-color:#E3B8B2; color:#9C2F23;}
@keyframes entra{from{opacity:0; transform:translateY(-6px);} to{opacity:1; transform:none;}}

/* ================================================================ login */
.login-wrap{min-height:100vh; display:grid; grid-template-columns:1.05fr 1fr; background:var(--paper-dim);}
.login-hero{
  position:relative; overflow:hidden; color:#fff; display:flex; flex-direction:column; justify-content:center; padding:60px;
  background:radial-gradient(circle at 85% 12%, rgba(152,188,16,.22), transparent 42%),
             radial-gradient(circle at 8% 92%, rgba(86,172,223,.24), transparent 46%),
             linear-gradient(140deg, var(--navy-deep), var(--navy-mid) 58%, #025f80);
}
.login-hero::before{
  content:""; position:absolute; inset:0; opacity:.5;
  background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px);
  background-size:46px 46px; -webkit-mask-image:radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%); mask-image:radial-gradient(ellipse at 40% 40%, #000 20%, transparent 75%);
}
.login-hero > *{position:relative;}
.login-hero img{height:150px; width:auto; align-self:flex-start; margin:0 0 28px -6px; filter:drop-shadow(0 8px 22px rgba(0,0,0,.30));}
.login-hero h2{color:#fff; font-size:32px; line-height:1.15; max-width:430px; margin:0;}
.login-hero h2 span{color:#c4e24a;}
.login-hero p{color:#BCD6DF; font-size:15px; max-width:420px; margin:16px 0 0;}
.login-side{display:flex; align-items:center; justify-content:center; padding:30px;}
.login-card{background:#fff; width:100%; max-width:380px; padding:38px 34px; box-shadow:var(--shadow); border:1px solid var(--line); border-radius:16px;}
.login-card img{height:92px; width:auto; margin:0 0 14px -4px; display:none;}
.login-card h1{font-size:22px; margin-bottom:5px;}
.login-card p{color:var(--muted); font-size:13px; margin:0 0 18px;}

/* ================================================================ error */
.error-box{max-width:520px; margin:70px auto; text-align:center;}
.error-box .code{font-family:'Poppins',sans-serif; font-size:76px; font-weight:700; line-height:1;
  background:linear-gradient(90deg, var(--sky), var(--lime)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.error-box h1{font-size:22px; margin:14px 0 8px;}
.error-box p{color:var(--muted); margin:0 0 24px;}

/* ================================================================ formularios de mantenimiento */
.clause{margin-bottom:18px; border:1px solid var(--line); border-radius:var(--radius); background:#fff; overflow:hidden; box-shadow:var(--shadow-sm);}
.clause-head{
  display:flex; align-items:center; gap:12px; padding:14px 18px; background:#fff; border-bottom:1px solid var(--line);
  cursor:pointer; user-select:none; transition:background .15s;
}
.clause-head:hover{background:var(--paper-dim);}
.clause-num{
  font-family:'Poppins',sans-serif; font-size:12.5px; font-weight:600; width:26px; height:26px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; flex:none; color:var(--navy-deep);
  background:rgba(152,188,16,.2); border:1px solid rgba(152,188,16,.55);
}
.clause-head h3{font-size:14.5px; color:var(--navy-deep); flex:1; font-weight:600;}
.clause-body{padding:18px 20px 20px;}
.clause.collapsed .clause-body{display:none;}
.clause.collapsed .clause-head{border-bottom-color:transparent;}
.clause-head .chev{transition:transform .2s; color:var(--muted); font-size:12px;}
.clause.collapsed .chev{transform:rotate(-90deg);}

.form-tools{display:flex; gap:8px; margin:0 0 14px; flex-wrap:wrap;}

.mini-table{width:100%; border-collapse:collapse; font-size:12.5px; margin-top:8px;}
.mini-table th{background:var(--paper-dim); padding:7px 9px; text-align:left; font-size:10.5px; letter-spacing:.04em; text-transform:uppercase; color:var(--muted); border:1px solid var(--line);}
.mini-table td{padding:5px 7px; border:1px solid var(--line); vertical-align:middle;}
.mini-table input, .mini-table select{padding:6px 7px; font-size:12.5px; margin:0; border-width:1px;}
.mini-table .del-row{color:var(--red); cursor:pointer; text-decoration:underline; font-size:11.5px; white-space:nowrap;}

.tri-group{display:flex; gap:14px; align-items:center; flex-wrap:wrap;}
.tri-group label{display:flex; align-items:center; gap:5px; font-size:13px; color:var(--ink); margin:0; font-weight:400;}
.tri-group input[type=radio], .tri-group input[type=checkbox]{width:auto; margin:0;}

.grid-check-table{width:100%; border-collapse:collapse; font-size:11px; text-align:center;}
.grid-check-table th, .grid-check-table td{border:1px solid var(--line); padding:5px 4px;}
.grid-check-table th{background:var(--paper-dim); font-weight:500; color:var(--muted); font-size:10px;}
.grid-check-table td:first-child{text-align:left; font-size:11px; color:var(--ink);}
.grid-check-table input[type=checkbox]{width:auto; margin:0;}

.subrow{display:grid; grid-template-columns:repeat(3,1fr); gap:12px;}
.subrow.two{grid-template-columns:1fr 1fr;}
.subrow.four{grid-template-columns:repeat(4,1fr);}

.btn.add-row{
  margin-top:10px; padding:7px 13px; font-size:12px; border:1.5px dashed var(--line-strong);
  background:transparent; color:var(--navy); border-radius:var(--radius-sm); font-weight:500;
}
.btn.add-row:hover{background:var(--paper-dim); border-color:var(--navy); transform:none; box-shadow:none;}

.doc-nav{display:flex; gap:8px; margin-bottom:20px; flex-wrap:wrap; position:sticky; top:0; background:var(--paper-dim); padding:10px 0; z-index:5;}
.doc-nav a{padding:7px 15px; border-radius:999px; border:1px solid var(--line-strong); font-size:12.5px; color:var(--navy); background:#fff; text-decoration:none; font-weight:500;}
.doc-nav a:hover{border-color:var(--navy);}
.doc-nav a.active{background:var(--navy); color:#fff; border-color:var(--navy);}

textarea.bullets{min-height:110px; font-family:'Inter',sans-serif;}

/* barra de acciones fija al final de los formularios largos */
form[style*="max-width:9"] > div:has(> button[type="submit"]){
  position:sticky; bottom:0; z-index:6; margin:10px -4px 30px; padding:14px 4px;
  background:linear-gradient(180deg, rgba(243,247,249,0), var(--paper-dim) 38%);
}

/* ================================================================ responsive */
@media (max-width: 1100px){
  .stats{grid-template-columns:repeat(2,1fr);}
  .grid-2, .docs-grid{grid-template-columns:1fr;}
}
@media (max-width: 900px){
  .layout{grid-template-columns:1fr;}
  .topbar{
    display:flex; align-items:center; gap:12px; position:sticky; top:0; z-index:30; height:58px; padding:0 14px;
    background:var(--navy-deep); color:#fff; box-shadow:0 2px 12px rgba(1,47,64,.25);
  }
  .topbar img{height:34px;}
  .topbar b{font-family:'Poppins',sans-serif; font-size:14px; font-weight:600;}
  .nav-toggle{
    width:40px; height:40px; border-radius:10px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.2);
    display:inline-flex; align-items:center; justify-content:center; cursor:pointer; padding:0;
  }
  .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
    display:block; width:18px; height:2px; background:#fff; border-radius:2px; position:relative; transition:transform .25s, background .25s;
  }
  .nav-toggle span::before, .nav-toggle span::after{content:""; position:absolute; left:0;}
  .nav-toggle span::before{top:-6px;} .nav-toggle span::after{top:6px;}
  .nav-toggle[aria-expanded="true"] span{background:transparent;}
  .nav-toggle[aria-expanded="true"] span::before{transform:translateY(6px) rotate(45deg);}
  .nav-toggle[aria-expanded="true"] span::after{transform:translateY(-6px) rotate(-45deg);}
  .sidebar{position:fixed; left:0; top:0; bottom:0; width:290px; height:100%; transform:translateX(-102%); transition:transform .3s var(--ease);}
  body.nav-open .sidebar{transform:none; box-shadow:0 0 40px rgba(0,0,0,.35);}
  body.nav-open .scrim{display:block; position:fixed; inset:0; background:rgba(1,20,30,.5); z-index:35;}
  .main{padding:22px 16px 48px;}
  .pagehead h1{font-size:21px;}
  .row2, .subrow, .subrow.two, .subrow.four{grid-template-columns:1fr;}
  .stats{grid-template-columns:1fr 1fr; gap:12px;}
  .stat{padding:14px;} .stat .ic{width:38px; height:38px;} .stat .n{font-size:22px;}
  table.list{display:block; overflow-x:auto; white-space:nowrap;}
  .mini-table{display:block; overflow-x:auto;}
  .login-wrap{grid-template-columns:1fr;}
  .login-hero{display:none;}
  .login-card img{display:block;}
  .clause-body{padding:14px;}
}
@media (max-width: 520px){
  .stats{grid-template-columns:1fr;}
}
@media (prefers-reduced-motion: reduce){
  *{transition:none !important; animation:none !important; scroll-behavior:auto !important;}
}
@media print{
  .sidebar, .topbar, .doc-nav, .btn, .form-tools{display:none !important;}
  .layout{display:block;} .main{padding:0;} body{background:#fff;}
}

/* =====================================================================================================
 * Mejoras de interfaz (v3) — ventana de confirmación, filtro y orden de tablas, tablas con scroll.
 * ===================================================================================================== */
.btn.peligro{background:var(--red); border-color:var(--red); color:#fff;}
.btn.peligro:hover{background:#9c2e22; border-color:#9c2e22; box-shadow:none;}

.dlg-confirmar{border:0; padding:0; border-radius:18px; width:calc(100% - 32px); max-width:430px; color:var(--ink); box-shadow:0 24px 70px rgba(1,31,43,.4);}
.dlg-confirmar::backdrop{background:rgba(1,31,43,.55); backdrop-filter:blur(2px);}
.dlg-confirmar[open]{animation:dlgEntra .18s var(--ease, ease-out);}
.dlg-confirmar form{padding:26px 26px 22px; margin:0;}
.dlg-icono{width:50px; height:50px; display:grid; place-items:center; border-radius:15px; background:#FBEDEA; color:var(--red); margin-bottom:14px;}
.dlg-confirmar h3{font-size:19px; margin:0 0 6px;}
.dlg-confirmar .dlg-mensaje{margin:0 0 22px; color:var(--muted); font-size:14.5px; line-height:1.55;}
.dlg-botones{display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap;}
@keyframes dlgEntra{from{opacity:0; transform:translateY(10px) scale(.97);} to{opacity:1; transform:none;}}

.tabla-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch; max-width:100%;}
.tabla-filtro-barra{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin:0 0 12px;}
.tabla-filtro{width:100%; max-width:340px; padding:10px 14px; border:1px solid var(--line-strong); border-radius:10px; background:#fff; font:400 14px 'Inter',system-ui,sans-serif; color:var(--ink);}
.tabla-filtro:focus{outline:none; border-color:var(--sky); box-shadow:0 0 0 4px rgba(86,172,223,.18);}
.tabla-cuenta{color:var(--muted); font-size:13px;}
table.list th.ordenable{cursor:pointer; user-select:none; white-space:nowrap;}
table.list th.ordenable:hover{color:var(--navy-deep);}
table.list th.ordenable::after{content:"\2195"; margin-left:7px; font-size:11px; opacity:.35;}
table.list th[aria-sort="ascending"]::after{content:"\25B2"; opacity:1; color:var(--navy);}
table.list th[aria-sort="descending"]::after{content:"\25BC"; opacity:1; color:var(--navy);}

@media print{ .dlg-confirmar, .tabla-filtro-barra{display:none !important;} }
@media (prefers-reduced-motion: reduce){ .dlg-confirmar[open]{animation:none;} }

/* =====================================================================================================
 * Mejoras de interfaz (v4) — gráficos del panel y modo oscuro.
 * ===================================================================================================== */

/* ---------------------------------------------------------------- gráficos del panel */
.graficos{display:grid; grid-template-columns:repeat(auto-fit, minmax(290px, 1fr)); gap:18px; margin:0 0 30px;}
.grafico{background:var(--paper); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px 16px; box-shadow:var(--shadow-sm); min-width:0;}
.grafico-cab{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-bottom:14px;}
.grafico-cab h3{font-size:14.5px; margin:0;}
.grafico-cab span{font-size:12px; color:var(--muted);}
.barras{display:flex; align-items:flex-end; gap:10px; height:190px;}
.barra{flex:1; min-width:0; height:100%; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; gap:6px;}
.barra-valor{font-size:11.5px; font-weight:600; color:var(--muted); white-space:nowrap; line-height:1.2;}
.barra.actual .barra-valor{color:var(--ink);}
.barra-col{width:100%; max-width:46px; flex:1; display:flex; align-items:flex-end;}
.barra-col i{display:block; width:100%; min-height:3px; border-radius:7px 7px 3px 3px; background:linear-gradient(180deg, var(--sky), var(--navy)); opacity:.78; transition:height .5s var(--ease), opacity .2s;}
.barra.actual .barra-col i{opacity:1; background:linear-gradient(180deg, var(--lime), var(--lime-deep));}
.barra:hover .barra-col i{opacity:1;}
.barra-etiq{font-size:11.5px; color:var(--muted); white-space:nowrap;}
.dist{display:grid; gap:12px;}
.dist-fila{display:grid; grid-template-columns:minmax(0, 1.25fr) minmax(0, 2fr) auto; gap:10px; align-items:center; font-size:13px;}
.dist-nombre{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; color:var(--ink);}
.dist-pista{height:10px; border-radius:99px; background:var(--paper-dim); overflow:hidden; display:block;}
.dist-pista i{display:block; height:100%; border-radius:99px; min-width:3px; transition:width .5s var(--ease);}
.dist-valor{font-weight:600; color:var(--ink); font-variant-numeric:tabular-nums; text-align:right; min-width:32px;}
.dist-vacio{color:var(--muted); font-size:13px; margin:6px 0 0;}
.dist .c1{background:#015673;} .dist .c2{background:#56ACDF;} .dist .c3{background:#98BC10;} .dist .c4{background:#C98A1E;} .dist .c5{background:#C0463A;} .dist .c6{background:#7D93A0;}
@media (max-width:560px){ .graficos{grid-template-columns:1fr;} .barras{height:160px; gap:6px;} }

/* ---------------------------------------------------------------- interruptor de tema */
.tema-toggle{margin-left:auto; flex:none; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.07); color:#CFE3EA; cursor:pointer; transition:background .15s, color .15s;}
.tema-toggle:hover{background:rgba(255,255,255,.16); color:#fff;}
.tema-toggle svg{width:17px; height:17px;}
.tema-toggle.flotante{position:fixed; right:16px; bottom:16px; z-index:60; width:40px; height:40px; background:var(--paper); color:var(--ink); border:1px solid var(--line-strong); box-shadow:var(--shadow);}
.tema-toggle.flotante:hover{background:var(--paper-dim);}
@media print{ .tema-toggle{display:none !important;} }

/* ---------------------------------------------------------------- modo oscuro (solo en pantalla) */
@media screen{
html[data-tema="oscuro"]{
  color-scheme:dark;
  --paper:#13262E; --paper-dim:#0B161B; --ink:#E4EEF2; --muted:#93AAB4; --line:#223943; --line-strong:#2E4A57;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.25);
  --shadow:0 4px 12px rgba(0,0,0,.4), 0 16px 36px rgba(0,0,0,.35);
}
html[data-tema="oscuro"] body{background:var(--paper-dim); color:var(--ink);}
html[data-tema="oscuro"] h1, html[data-tema="oscuro"] h2, html[data-tema="oscuro"] h3, html[data-tema="oscuro"] h4{color:#EAF4F8;}
html[data-tema="oscuro"] a:not(.btn){color:#8FD0EE;}
html[data-tema="oscuro"] .sidebar a, html[data-tema="oscuro"] .sidebar a:hover{color:inherit;}
html[data-tema="oscuro"] .sidebar nav a{color:#C3DAE2;}
html[data-tema="oscuro"] .sidebar nav a:hover, html[data-tema="oscuro"] .sidebar nav a.active{color:#fff;}
html[data-tema="oscuro"] .sidebar .user a{color:#F0B3AA;}
html[data-tema="oscuro"] ::selection{background:rgba(86,172,223,.4);}
html[data-tema="oscuro"] hr{border-color:var(--line);}
html[data-tema="oscuro"] code, html[data-tema="oscuro"] pre{background:#0E1D23; color:#CFE3EA; border-color:var(--line);}

/* superficies */
html[data-tema="oscuro"] .card, html[data-tema="oscuro"] .stat, html[data-tema="oscuro"] .grafico, html[data-tema="oscuro"] .login-card,
html[data-tema="oscuro"] .clause, html[data-tema="oscuro"] table.list, html[data-tema="oscuro"] .tabla-scroll{background:var(--paper); border-color:var(--line); color:var(--ink);}
html[data-tema="oscuro"] .doc-nav a, html[data-tema="oscuro"] .btn.ghost{background:var(--paper); color:#CFE3EA; border-color:var(--line-strong);}
html[data-tema="oscuro"] .btn.ghost:hover, html[data-tema="oscuro"] .doc-nav a:hover{background:#1B3340; border-color:#4D7586; color:#fff;}
html[data-tema="oscuro"] .btn.danger{background:transparent; color:#F08E82; border-color:#7B3A33;}
html[data-tema="oscuro"] .btn.danger:hover{background:rgba(192,70,58,.18); border-color:#C0463A; color:#fff;}
html[data-tema="oscuro"] .stat .n{color:#EAF4F8;}
html[data-tema="oscuro"] .stat .ic{background:rgba(86,172,223,.15); color:#8FD0EE;}
html[data-tema="oscuro"] .stat .ic.verde{background:rgba(152,188,16,.16); color:#B6D957;}
html[data-tema="oscuro"] .stat .ic.ambar{background:rgba(201,138,30,.18); color:#E8B45A;}
html[data-tema="oscuro"] .stat .ic.rojo{background:rgba(192,70,58,.2); color:#F08E82;}

/* tablas */
html[data-tema="oscuro"] table.list th{color:#93AAB4; border-bottom-color:var(--line-strong); background:#10222A;}
html[data-tema="oscuro"] table.list td{border-bottom-color:var(--line); color:var(--ink);}
html[data-tema="oscuro"] table.list tbody tr:hover td{background:rgba(255,255,255,.045);}
html[data-tema="oscuro"] table.list th.ordenable:hover{color:#fff;}
html[data-tema="oscuro"] table.list th[aria-sort]::after{color:#8FD0EE;}
html[data-tema="oscuro"] .empty{color:var(--muted);}

/* formularios */
html[data-tema="oscuro"] input, html[data-tema="oscuro"] select, html[data-tema="oscuro"] textarea,
html[data-tema="oscuro"] form input, html[data-tema="oscuro"] form select, html[data-tema="oscuro"] form textarea{background:#0E1D23; color:var(--ink); border-color:var(--line-strong);}
html[data-tema="oscuro"] input::placeholder, html[data-tema="oscuro"] textarea::placeholder{color:#6F8994;}
html[data-tema="oscuro"] input:focus, html[data-tema="oscuro"] select:focus, html[data-tema="oscuro"] textarea:focus{border-color:var(--sky); box-shadow:0 0 0 4px rgba(86,172,223,.22);}
html[data-tema="oscuro"] input:disabled, html[data-tema="oscuro"] select:disabled, html[data-tema="oscuro"] textarea:disabled{background:#0B161B; color:#6F8994;}
html[data-tema="oscuro"] label, html[data-tema="oscuro"] form label{color:#A9BFC8;}
html[data-tema="oscuro"] .tabla-filtro{background:#0E1D23; color:var(--ink); border-color:var(--line-strong);}
html[data-tema="oscuro"] .grafico-cab span, html[data-tema="oscuro"] .barra-etiq, html[data-tema="oscuro"] .barra-valor{color:var(--muted);}
html[data-tema="oscuro"] .barra.actual .barra-valor{color:#EAF4F8;}
html[data-tema="oscuro"] .dist-pista{background:#0E1D23;}

/* etiquetas de estado: fondo suave con el color de cada significado */
html[data-tema="oscuro"] .badge{background:rgba(147,170,180,.16); color:#C5D6DD; border-color:transparent;}
html[data-tema="oscuro"] .badge.ok, html[data-tema="oscuro"] .badge.Aprobada, html[data-tema="oscuro"] .badge.sla-ok,
html[data-tema="oscuro"] .badge[class*="est-Resuelto"], html[data-tema="oscuro"] .badge[class*="est-Cerrado"]{background:rgba(152,188,16,.18); color:#BBDD62;}
html[data-tema="oscuro"] .badge.no, html[data-tema="oscuro"] .badge.Rechazada, html[data-tema="oscuro"] .badge[class*="pri-Cr"], html[data-tema="oscuro"] .badge.sla-vencido{background:rgba(192,70,58,.22); color:#F59A8E;}
html[data-tema="oscuro"] .badge.proceso, html[data-tema="oscuro"] .badge[class*="pri-Alta"], html[data-tema="oscuro"] .badge[class*="est-Esperando"], html[data-tema="oscuro"] .badge.sla-por_vencer{background:rgba(201,138,30,.22); color:#EDBB6A;}
html[data-tema="oscuro"] .badge.Enviada, html[data-tema="oscuro"] .badge[class*="pri-Media"], html[data-tema="oscuro"] .badge[class*="est-Abierto"], html[data-tema="oscuro"] .badge[class*="est-En-progreso"]{background:rgba(86,172,223,.2); color:#8FD0EE;}

/* avisos y diálogos */
html[data-tema="oscuro"] .flash.ok{background:rgba(152,188,16,.14); border-color:rgba(152,188,16,.4); color:#C4E26E;}
html[data-tema="oscuro"] .flash.error{background:rgba(192,70,58,.16); border-color:rgba(192,70,58,.5); color:#F59A8E;}
html[data-tema="oscuro"] .dlg-confirmar{background:var(--paper); color:var(--ink);}
html[data-tema="oscuro"] .dlg-icono{background:rgba(192,70,58,.2); color:#F08E82;}

/* inicio de sesión */
html[data-tema="oscuro"] .login-wrap{background:#071218;}
html[data-tema="oscuro"] .login-card p, html[data-tema="oscuro"] .login-links a{color:#9DBBC5;}
}

/* =====================================================================================================
 * Mejoras de interfaz (v4.1) — ajustes del modo oscuro (contraste en secciones plegables, totales y enlaces).
 * ===================================================================================================== */
@media screen{
html[data-tema="oscuro"]{--red:#F08E82; --amber:#E8B45A; --green:#7FCB8C;}
html[data-tema="oscuro"] .main a:not(.btn){color:#8FD0EE;}
html[data-tema="oscuro"] .main a:not(.btn):hover{color:#C5E8F7;}
html[data-tema="oscuro"] .btn.peligro{background:#C0463A; border-color:#C0463A; color:#fff;}
html[data-tema="oscuro"] .clause-head{background:var(--paper);}
html[data-tema="oscuro"] .clause-head:hover{background:#1B3340;}
html[data-tema="oscuro"] .clause-head h2, html[data-tema="oscuro"] .clause-head h3{color:#EAF4F8;}
html[data-tema="oscuro"] .totals-box .grand{color:#EAF4F8; border-top-color:#4D7586;}
html[data-tema="oscuro"] table.list tr.fila-grupo td{color:#EAF4F8; background:#1B3340;}
html[data-tema="oscuro"] .clause-num{color:#C9E27A;}
html[data-tema="oscuro"] :is(a, span, b, strong, small, p)[style*="color:var(--navy"]{color:#8FD0EE !important;}
html[data-tema="oscuro"] .main a.chip{background:var(--paper); color:#CFE3EA; border-color:var(--line-strong);}
html[data-tema="oscuro"] .main a.chip:hover{border-color:#6CC3E8; color:#fff;}
html[data-tema="oscuro"] .main a.chip.activo{background:var(--navy); color:#fff; border-color:#6CC3E8;}
html[data-tema="oscuro"] .chip .n{background:#0E1D23; color:var(--muted);}
html[data-tema="oscuro"] .chip.activo .n{background:rgba(255,255,255,.18); color:#fff;}
}

/* ---- Plataforma: ajustes propios ---- */
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:6px 18px;}
@media (max-width:640px){.grid2{grid-template-columns:1fr;}}
button.linklike{background:none; border:0; padding:0; font:inherit; font-size:12px; color:#F0B3AA; cursor:pointer; display:inline-flex; align-items:center; gap:5px; margin-top:1px;}
button.linklike:hover{color:#fff;}
button.linklike .ico{width:14px; height:14px;}
.sidebar .user small{display:block; color:#9DBBC5; font-size:11px; margin-bottom:2px;}
.sidebar nav a .ico{flex:none;}
.stat .n{display:block;}
a.stat{color:inherit; text-decoration:none;}
.stat .l{display:block;}
select{width:100%;}
/* ================================================================ específico de Análisis AHS */
.stats-3{grid-template-columns:repeat(3,1fr);}
td.acciones{display:flex; gap:6px; align-items:center; flex-wrap:wrap;}
td.acciones form{margin:0;}
table.list td.empty a{color:var(--navy); text-decoration:underline;}

.grid-form{display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; margin-bottom:24px;}
.card-title{font-size:14.5px; margin:0 0 6px;}
.card.nota{background:var(--paper-dim); box-shadow:none;}
.card.nota p{font-size:13px; color:var(--muted); margin:8px 0;}
.card.nota h3{font-size:14.5px; margin-bottom:6px;}
.opt{font-weight:400; color:var(--muted);}
.ayuda{font-size:12px; color:var(--muted); margin:8px 0 0;}
.acciones-form{margin-top:24px; display:flex; gap:10px; flex-wrap:wrap;}

.chips{display:flex; gap:8px; flex-wrap:wrap; margin:6px 0 16px;}
.chip{
  display:inline-flex; align-items:center; gap:7px; padding:6px 13px; border-radius:999px; font-size:12.5px; font-weight:500;
  color:var(--navy); background:#fff; border:1px solid var(--line-strong); text-decoration:none; transition:all .15s;
}
.chip:hover{border-color:var(--navy);}
.chip .n{font-size:11px; background:var(--paper-dim); border-radius:999px; padding:1px 7px; color:var(--muted);}
.chip.activo{background:var(--navy); color:#fff; border-color:var(--navy);}
.chip.activo .n{background:rgba(255,255,255,.18); color:#fff;}

.toolbar{display:flex; gap:10px; margin-bottom:16px; max-width:680px; align-items:center;}
.toolbar select{width:auto; min-width:170px;}

table.list tr.fila-grupo td{background:var(--paper-dim); font-weight:600; color:var(--navy-deep); font-size:12.5px;}
table.list tr.fila-grupo .sub{font-weight:400; color:var(--muted);}
td.hallazgo-texto{font-family:ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size:12px; padding-left:22px; word-break:break-word;}
td.fechas{font-size:11.5px; color:var(--muted);}

.barra-guardar{
  position:sticky; bottom:0; z-index:6; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  margin-top:14px; padding:14px 4px; background:linear-gradient(180deg, rgba(243,247,249,0), var(--paper-dim) 38%);
}
.barra-guardar .conteo{font-size:12.5px; color:var(--muted);}
.pager{display:flex; gap:6px; flex-wrap:wrap; align-items:center; margin:8px 0 24px;}
.pager .puntos{color:var(--muted); padding:0 4px;}

@media (max-width: 900px){
  .grid-form, .stats-3{grid-template-columns:1fr;}
  .toolbar{flex-wrap:wrap;} .toolbar input{flex:1 1 100%;}
}

/* ================================================================ específico de Soporte (tickets) */
.badge.pri-Crítica, .badge.pri-Cr\00EDtica{color:var(--red); border-color:#E3B8B2; background:#FBEDEA;}
.badge.pri-Alta{color:var(--amber); border-color:#EBD3A6; background:#FCF6E8;}
.badge.pri-Media{color:var(--navy); border-color:#B6D3E0; background:#EEF6FA;}
.badge.pri-Baja{color:var(--muted);}
.badge.est-Abierto{color:var(--navy); border-color:#B6D3E0; background:#EEF6FA;}
.badge.est-En-progreso{color:var(--amber); border-color:#EBD3A6; background:#FCF6E8;}
.badge.est-Esperando-cliente{color:#6B4C9A; border-color:#D5C8E8; background:#F5F0FB;}
.badge.est-Resuelto, .badge.est-Cerrado{color:var(--green); border-color:#B8DCC6; background:#EFF8F2;}
.badge.sla-ok{color:var(--green); border-color:#B8DCC6; background:#EFF8F2;}
.stat .ic.rojo{background:rgba(185,56,42,.12); color:var(--red);}
.stats-3{grid-template-columns:repeat(3,1fr);}
@media (max-width: 900px){ .stats-3{grid-template-columns:1fr;} }
.login-links{text-align:center; margin-top:16px; font-size:12.5px;}
.login-links a{color:var(--muted);} .login-links a:hover{color:var(--navy);}
.acceso-opciones{display:flex; flex-direction:column; gap:10px; margin-top:14px;}
.acceso-opciones .btn{padding:12px;}
.error-solo{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;}
.row3{display:grid; grid-template-columns:1fr 1fr 1fr; gap:14px;}
@media (max-width: 900px){ .row3{grid-template-columns:1fr;} }
.sidebar .user .sub-user{display:block; color:#9DBBC5; font-size:11px; margin:1px 0 2px;}
.error-box{max-width:520px; text-align:center;}
.error-box .code{font-family:'Poppins',sans-serif; font-size:76px; font-weight:700; line-height:1;
  background:linear-gradient(90deg, var(--sky), var(--lime)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;}
.error-box h1{font-size:22px; margin:14px 0 8px;}
.error-box p{color:var(--muted); margin:0 0 24px;}

/* ---- Aviso para instalar el portal en el celular (PWA) ---- */
.pwa-aviso { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 60; display: flex; align-items: center; gap: 12px;
  max-width: 520px; margin: 0 auto; padding: 12px 14px; background: #fff; border: 1px solid #dce6ea; border-radius: 14px;
  box-shadow: 0 8px 28px rgba(1, 62, 84, .22); }
.pwa-aviso[hidden] { display: none; }
.pwa-aviso img { flex: none; border-radius: 10px; }
.pwa-aviso p { margin: 0; flex: 1; font-size: .86rem; line-height: 1.35; color: #152229; }
.pwa-acciones { display: flex; flex-direction: column; gap: 6px; flex: none; }
.pwa-btn { border: 1px solid #dce6ea; background: #fff; color: #013e54; border-radius: 9px; padding: 7px 12px; font: inherit; font-size: .8rem; font-weight: 600; cursor: pointer; }
.pwa-btn[hidden] { display: none; }
.pwa-btn-ok { background: #98bc10; border-color: #98bc10; }
@media (display-mode: standalone) { .pwa-aviso { display: none; } }

/* ---------------------------------------------------------------- foto de perfil */
.sidebar .avatar{overflow:hidden;}
.sidebar .avatar img{width:100%; height:100%; object-fit:cover; display:block;}
.avatar-s{width:28px; height:28px; border-radius:50%; object-fit:cover; flex:none; border:1px solid var(--line);}
.foto-grande{width:96px; height:96px; border-radius:50%; overflow:hidden; flex:none; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--sky), var(--navy)); color:#fff; font-size:38px; font-weight:600; border:3px solid var(--line);}
.foto-grande img{width:100%; height:100%; object-fit:cover; display:block;}


/* recortador de la foto de perfil */
.recorte{margin-top:16px;}
.recorte-marco{width:240px; height:240px; border-radius:50%; overflow:hidden; position:relative; background:#111; border:3px solid var(--line); cursor:grab; touch-action:none; user-select:none;}
.recorte-marco.arrastrando{cursor:grabbing;}
.recorte-marco img{position:absolute; left:0; top:0; max-width:none; transform-origin:0 0; pointer-events:none; -webkit-user-drag:none;}
.recorte-zoom{width:240px; margin-top:12px; display:block; padding:0; border:0; background:none; accent-color:var(--lime);}

/* ================================================================ detalle de proforma */
.sec-label{font-family:'Poppins',sans-serif; font-size:11.5px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--navy);
  margin:26px 0 10px; padding-bottom:6px; border-bottom:1px solid var(--line);}
.card > .sec-label:first-child{margin-top:0;}
.cond-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.cond-table td{padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:top;}
.cond-table tr:last-child td{border-bottom:0;}
.cond-table td:first-child{width:32%; color:var(--muted); font-weight:500; background:var(--paper-dim);}
.cond-table td:first-child{border-radius:0;}