/* Sistema de cocinas - hoja de estilo unica */
:root{
  --azul:#1F4E79; --azul2:#3C6FB4; --azul-tenue:#EAF1F9; --azul-borde:#C5D8EC;
  --amar:#FFF2CC; --amar-bd:#A87B10; --amar-tx:#6B4E05;
  --verde:#3F6B22; --verde-tenue:#EAF3E2;
  --ambar:#8A5600; --ambar-tenue:#FDF1DD;
  --rojo:#9C2B2B; --rojo-tenue:#FBEBE9;
  --tinta:#141D26; --tinta2:#49596A; --tinta3:#78889A;
  --papel:#F6F8FA; --sup:#FFFFFF; --sup2:#FBFCFD; --linea:#D9E1EA; --linea2:#EBF0F5;
  --barra:#15324B; --barra-tx:#FFFFFF;
  --sombra:0 1px 2px rgba(20,29,38,.05), 0 4px 14px rgba(20,29,38,.05);
  --display:'Archivo',system-ui,sans-serif;
  --cuerpo:'Public Sans',system-ui,sans-serif;
  color-scheme:light;
}
:root[data-tema="oscuro"]{
  --azul:#8CBCEC; --azul2:#5E9BE0; --azul-tenue:#14283A; --azul-borde:#26415A;
  --amar:#3B3317; --amar-bd:#C9A227; --amar-tx:#E7C860;
  --verde:#8FC46A; --verde-tenue:#1A2814;
  --ambar:#E0A54A; --ambar-tenue:#2F2411;
  --rojo:#EB948C; --rojo-tenue:#2F1B1A;
  --tinta:#E8EEF4; --tinta2:#A5B3C1; --tinta3:#7A8795;
  --papel:#0E141A; --sup:#161E26; --sup2:#1A232C; --linea:#2A3540; --linea2:#202932;
  --barra:#0A1219; --barra-tx:#E8EEF4;
  --sombra:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  color-scheme:dark;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--papel);color:var(--tinta);font-family:var(--cuerpo);font-size:14px;line-height:1.5}
h1,h2,h3,h4{font-family:var(--display);margin:0}
button,input,select{font:inherit;color:inherit}
a{color:var(--azul2)}
.num{font-variant-numeric:tabular-nums}
[hidden]{display:none!important}

/* barra superior */
.top{background:var(--barra);color:var(--barra-tx)}
.top-in{padding:10px 20px;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.marca{font-family:var(--display);font-weight:700;font-size:15px;letter-spacing:.02em;white-space:nowrap;color:inherit;text-decoration:none}
.marca span{display:block;font-family:var(--cuerpo);font-weight:400;font-size:10.5px;opacity:.7;letter-spacing:.04em}
.top .der{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:12.5px}
.top .quien{opacity:.8}
.top button,.top a.enl{border:1px solid rgba(255,255,255,.28);background:transparent;color:inherit;border-radius:7px;padding:6px 12px;font-size:12.5px;font-weight:500;cursor:pointer;text-decoration:none}
.top button:hover,.top a.enl:hover{background:rgba(255,255,255,.1)}

.wrap{padding:18px 20px 40px}
.wrap.angosta{max-width:1220px;margin:0 auto}
.cab{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cab h2{font-size:21px;font-weight:600;letter-spacing:-.015em}
.cab .sub{color:var(--tinta2);font-size:13px;margin-top:2px}
.cab .der{margin-left:auto;display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.migas{font-size:12.5px;margin-bottom:6px}
.migas a{text-decoration:none}

.btn{border:1px solid var(--linea);background:var(--sup);color:var(--tinta);padding:7px 13px;border-radius:7px;font-size:13px;font-weight:500;cursor:pointer;white-space:nowrap;text-decoration:none;display:inline-block}
.btn:hover{border-color:var(--azul2)}
.btn.pri{background:var(--azul2);border-color:var(--azul2);color:#fff;font-weight:600}
.btn.pri:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--azul2);outline-offset:2px}
.btn[aria-pressed="true"]{background:var(--azul-tenue);border-color:var(--azul2);color:var(--azul);font-weight:600}
.btn:disabled{opacity:.45;cursor:not-allowed}

.campo{border:1px solid var(--linea);background:var(--sup);border-radius:7px;padding:7px 10px;font-size:13px;min-width:0}
.campo:focus{outline:2px solid var(--azul2);outline-offset:1px}
.campo.edit{background:var(--amar);border-color:var(--amar-bd);color:var(--amar-tx);font-weight:700}

.tarj{background:var(--sup);border:1px solid var(--linea);border-radius:11px;box-shadow:var(--sombra);overflow:hidden}
.tarj-cab{padding:11px 16px;border-bottom:1px solid var(--linea2);display:flex;align-items:center;gap:10px;flex-wrap:wrap;background:var(--sup2)}
.tarj-cab h3{font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:var(--tinta2)}
.mini{font-size:11.5px;color:var(--tinta3)}
.der-auto{margin-left:auto}

.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:12px;margin-bottom:14px}
.tile{background:var(--sup);border:1px solid var(--linea);border-radius:11px;padding:12px 15px;box-shadow:var(--sombra)}
.tile .k{font-size:10.5px;text-transform:uppercase;letter-spacing:.09em;color:var(--tinta3);font-weight:700}
.tile .v{font-family:var(--display);font-size:22px;font-weight:600;letter-spacing:-.025em;margin-top:4px;line-height:1.1}
.tile .n{font-size:12px;color:var(--tinta2);margin-top:4px}
.tile.acento{border-left:3px solid var(--azul2)}
.tile.bien{border-left:3px solid var(--verde)} .tile.bien .v{color:var(--verde)}
.tile.mal{border-left:3px solid var(--rojo)} .tile.mal .v{color:var(--rojo)}

.pill{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:20px;white-space:nowrap}
.pill.ok{background:var(--verde-tenue);color:var(--verde)}
.pill.av{background:var(--ambar-tenue);color:var(--ambar)}
.pill.cr{background:var(--rojo-tenue);color:var(--rojo)}
.pill.nu{background:var(--linea2);color:var(--tinta3)}
.pill.in{background:var(--azul-tenue);color:var(--azul)}
.punto{width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}

.barra{height:6px;background:var(--linea2);border-radius:3px;overflow:hidden;min-width:68px}
.barra i{display:block;height:100%;border-radius:3px;background:var(--azul2)}
.barra i.cr{background:var(--rojo)}

.aviso{display:flex;gap:11px;align-items:center;padding:10px 14px;border-radius:9px;font-size:13px;margin-bottom:14px;border:1px solid}
.aviso.warn{background:var(--ambar-tenue);border-color:var(--ambar)}
.aviso.mal{background:var(--rojo-tenue);border-color:var(--rojo)}
.aviso p{margin:0}
.aviso .btn{margin-left:auto}

/* tablas comunes */
.tabla-env{overflow-x:auto}
table.lista{width:100%;border-collapse:collapse;font-size:13px}
table.lista th{text-align:left;font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta3);font-weight:700;padding:8px 12px;border-bottom:1px solid var(--linea);white-space:nowrap;background:var(--sup2)}
table.lista td{padding:8px 12px;border-bottom:1px solid var(--linea2);vertical-align:middle}
table.lista tbody tr:last-child td{border-bottom:0}
table.lista tbody tr:hover td{background:var(--azul-tenue)}
table.lista td.d,table.lista th.d{text-align:right}
.cocinas{display:grid;grid-template-columns:repeat(auto-fit,minmax(520px,1fr));gap:16px;align-items:start}
.nom{font-weight:600}

/* barra de herramientas de la grilla */
.herr{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.seg{display:flex;background:var(--linea2);border-radius:8px;padding:3px;gap:3px;flex-wrap:wrap}
.seg button{border:0;background:transparent;color:var(--tinta2);padding:5px 14px;border-radius:6px;font-size:13px;font-weight:600;cursor:pointer;text-align:left;line-height:1.25}
.seg button small{display:block;font-size:11px;font-weight:400;color:var(--tinta3)}
.seg button[aria-pressed="true"] small{color:var(--tinta2)}
.seg button[aria-pressed="true"]{background:var(--sup);color:var(--azul);font-weight:700;box-shadow:var(--sombra)}
.seg button:focus-visible{outline:2px solid var(--azul2)}
.estado-guardado{font-size:12.5px;color:var(--tinta3);min-width:110px;text-align:right}
.estado-guardado.ok{color:var(--verde)} .estado-guardado.mal{color:var(--rojo);font-weight:700}

/* la grilla */
.grilla{overflow:auto;max-height:calc(100vh - 330px);min-height:320px;border:1px solid var(--linea);border-radius:11px;background:var(--sup);box-shadow:var(--sombra)}
.grilla table{border-collapse:separate;border-spacing:0;font-size:12.5px}
.grilla th,.grilla td{border-bottom:1px solid var(--linea2);border-right:1px solid var(--linea2);padding:0;height:28px;white-space:nowrap;background:var(--sup)}
.grilla thead th{position:sticky;z-index:4;background:var(--sup2);font-size:10px;text-transform:uppercase;letter-spacing:.05em;color:var(--tinta3);font-weight:700;text-align:center}
.grilla thead tr.sems th{top:0;height:20px;background:var(--azul-tenue);color:var(--azul);letter-spacing:.08em}
.grilla thead tr.dias th{top:20px;height:44px;line-height:1.25;padding:2px 4px}
.grilla thead th small{display:block;font-weight:400;text-transform:none;letter-spacing:0}
.grilla thead th .corr{display:block;font-weight:700;color:var(--azul2);letter-spacing:0;font-size:9.5px;min-height:12px}
.grilla th.dom,.grilla td.dom{background:var(--linea2)}
.grilla .fijo-izq{position:sticky;left:0;z-index:3;text-align:left;border-right:1px solid var(--linea)}
.grilla thead .fijo-izq{z-index:6;padding:0 10px;text-align:left}
.grilla td.prod{padding:0 10px;min-width:330px;max-width:330px;overflow:hidden;text-overflow:ellipsis;font-weight:500}
.grilla td.prod .it{display:inline-block;width:30px;color:var(--tinta3);font-weight:400;font-variant-numeric:tabular-nums}
.grilla td.prod .cod{display:inline-block;width:66px;color:var(--tinta2);font-variant-numeric:tabular-nums}
.grilla .fin{position:sticky;z-index:3;text-align:right;padding:0 8px;min-width:78px;max-width:78px;font-variant-numeric:tabular-nums;background:var(--sup2);border-left:1px solid var(--linea)}
.grilla thead .fin{z-index:6;text-align:right}
.grilla td.fin.exc.si,.grilla td.fin.excU.si{color:var(--rojo);font-weight:700}
.grilla td.fin.entU{font-weight:700;color:var(--tinta)}
.grilla thead th.fin small{color:var(--azul2);font-weight:700;text-transform:none}
.grilla td.fin.dis.si{color:var(--verde)}
.grilla td.c{min-width:46px;text-align:right;padding:0 6px;font-variant-numeric:tabular-nums;cursor:cell}
.grilla td.c.esp{min-width:120px}
.grilla td.c.lleno{background:var(--amar);color:var(--amar-tx);font-weight:700}
.grilla td.c.conv{box-shadow:inset 0 -3px 0 var(--azul2)}
.grilla td.c.sel{outline:2px solid var(--azul2);outline-offset:-2px;position:relative;z-index:2}
.grilla td.c.mal{background:var(--rojo-tenue);color:var(--rojo)}
.grilla td.c input{width:100%;height:26px;border:0;outline:0;background:var(--sup);color:var(--tinta);text-align:right;font:inherit;font-weight:700;padding:0 2px}
.grilla tbody tr:hover td.prod{background:var(--azul-tenue)}
.grilla tr.oculta{display:none}
.grilla tfoot td{position:sticky;bottom:0;z-index:4;background:var(--sup2);font-weight:700;border-top:2px solid var(--linea);height:30px}
.grilla.lectura td.c{cursor:default}
.grilla tfoot td.fin,.grilla tfoot td.fijo-izq{z-index:7}
.grilla:focus{outline:2px solid var(--azul-borde);outline-offset:1px}
.vacio{padding:40px;text-align:center;color:var(--tinta3)}

/* ventanas */
.velo{position:fixed;inset:0;background:rgba(10,18,25,.5);display:flex;align-items:center;justify-content:center;z-index:50;padding:16px}
.ventana{background:var(--sup);border-radius:12px;box-shadow:0 10px 40px rgba(0,0,0,.3);width:520px;max-width:100%;max-height:92vh;overflow:auto}
.ventana h3{font-size:16px;padding:16px 20px 0}
.ventana .cpo{padding:12px 20px}
.ventana .pie{padding:12px 20px 16px;display:flex;gap:8px;justify-content:flex-end}
.ventana label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta3);font-weight:700;margin:10px 0 4px}
.ventana .campo{width:100%}
.ventana .dos{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.ventana .tres{display:grid;grid-template-columns:1fr 1fr 90px;gap:10px}
.ventana .cuenta{background:var(--azul-tenue);border:1px solid var(--azul-borde);border-radius:8px;padding:10px 12px;margin-top:12px;font-size:13px}
.ventana .cuenta b{font-variant-numeric:tabular-nums}
.ventana .error{color:var(--rojo);font-size:12.5px;margin-top:8px;min-height:18px}
.ventana p{margin:0 0 6px;font-size:13px;color:var(--tinta2)}
.ventana details{margin-top:10px;font-size:13px}
.ventana summary{cursor:pointer;color:var(--azul2);font-weight:600}

/* entrada */
.entrada{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:20px}
.entrada form{background:var(--sup);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);padding:28px;width:340px;max-width:100%}
.entrada h1{font-size:18px;margin-bottom:2px}
.entrada .sub{font-size:12px;color:var(--tinta3);margin-bottom:16px}
.entrada label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:var(--tinta3);font-weight:700;margin:12px 0 4px}
.entrada input{width:100%}
.entrada .btn{width:100%;margin-top:18px;padding:10px}
.entrada .error{color:var(--rojo);font-size:12.5px;margin-top:10px}

.nuevo-mes{display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:10px 16px;border-top:1px solid var(--linea2);background:var(--sup2)}
.nuevo-mes .campo{padding:5px 8px;font-size:12.5px}
@media (max-width:700px){ .cocinas{grid-template-columns:1fr} .grilla td.prod{min-width:200px;max-width:200px} }

/* ---------------------------------------------------------------- tablero */
:root{--serie:#3C6FB4;--sobre:#9C2B2B}
:root[data-tema="oscuro"]{--serie:#4C8AD4;--sobre:#D46A62}

.riel{display:grid;grid-template-columns:repeat(7,minmax(128px,1fr));gap:8px;overflow-x:auto;padding:2px 2px 10px;margin-bottom:6px}
.riel button{border:1px solid var(--linea);background:var(--sup);border-radius:10px;padding:10px 12px 11px;text-align:left;cursor:pointer;position:relative;transition:transform .15s ease,border-color .15s ease}
.riel button:hover{border-color:var(--azul2)}
.riel button:focus-visible{outline:2px solid var(--azul2);outline-offset:2px}
.riel .lote{font-size:11px;color:var(--tinta3);font-weight:600}
.riel .nombre{font-family:var(--display);font-size:15px;font-weight:700;letter-spacing:-.01em;display:block;margin-top:1px}
.riel .monto{font-size:12px;color:var(--tinta2);font-variant-numeric:tabular-nums;display:block;margin-top:5px}
.riel .hilo{display:block;height:4px;border-radius:2px;background:var(--linea2);margin-top:8px;overflow:hidden}
.riel .hilo i{display:block;height:100%;background:var(--serie);border-radius:2px}
.riel button[aria-selected="true"]{background:var(--barra);border-color:var(--barra);transform:translateY(-2px);box-shadow:var(--sombra)}
.riel button[aria-selected="true"] .nombre{color:var(--barra-tx)}
.riel button[aria-selected="true"] .lote,.riel button[aria-selected="true"] .monto{color:var(--barra-tx);opacity:.72}
.riel button[aria-selected="true"] .hilo{background:rgba(255,255,255,.18)}
.riel button[aria-selected="true"] .hilo i{background:#8CBCEC}
.riel button[aria-selected="true"]::after{content:"";position:absolute;left:50%;bottom:-7px;width:12px;height:12px;background:var(--barra);transform:translateX(-50%) rotate(45deg);border-radius:2px}

.ficha{background:var(--sup);border:1px solid var(--linea);border-radius:14px;box-shadow:var(--sombra);overflow:hidden}
.ficha-cab{display:grid;grid-template-columns:minmax(240px,1fr) auto;gap:24px;align-items:end;padding:22px 26px 18px;border-bottom:1px solid var(--linea2)}
.ficha-cab .lote{font-size:12.5px;color:var(--tinta3);font-weight:600}
.ficha-cab h3{font-size:40px;line-height:1;font-weight:700;letter-spacing:-.03em;margin:2px 0 10px}
.fichas{display:flex;gap:6px;flex-wrap:wrap}
.fichas span{font-size:11.5px;font-weight:600;padding:3px 9px;border-radius:20px;background:var(--azul-tenue);color:var(--azul)}
.fichas span.gris{background:var(--linea2);color:var(--tinta2)}
.cifras{display:grid;grid-template-columns:repeat(4,auto);gap:0 30px}
.cifras div{border-left:1px solid var(--linea);padding-left:14px}
.cifras dt{font-size:11.5px;color:var(--tinta3);font-weight:600}
.cifras dd{margin:2px 0 0;font-family:var(--display);font-size:21px;font-weight:600;letter-spacing:-.02em;font-variant-numeric:tabular-nums}
.cifras small{display:block;font-family:var(--cuerpo);font-size:11.5px;color:var(--tinta2);font-weight:400;letter-spacing:0;margin-top:1px}
dl.cifras{margin:0}

.ficha-cpo{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(240px,1fr);gap:0}
.ficha-cpo>div{padding:18px 26px 20px}
.ficha-cpo>div+div{border-left:1px solid var(--linea2)}
.ficha h4{font-size:14px;font-weight:600;margin-bottom:2px}
.ficha .pista{font-size:12px;color:var(--tinta3);margin:0 0 10px}
.leyenda{display:flex;gap:16px;flex-wrap:wrap;font-size:12px;color:var(--tinta2);margin:0 0 6px}
.leyenda span{display:inline-flex;align-items:center;gap:6px}
.leyenda i{display:inline-block;width:12px;height:12px;border-radius:3px;background:var(--serie)}
.leyenda i.sobre{background:var(--sobre)}
.leyenda i.meta{height:2px;width:16px;border-radius:0;background:var(--tinta)}

.grafico{width:100%;display:block;overflow:visible}
.grafico .eje{stroke:var(--linea2);stroke-width:1}
.grafico .base{stroke:var(--linea);stroke-width:1}
.grafico text{font-family:var(--cuerpo);font-size:11px;fill:var(--tinta3);font-variant-numeric:tabular-nums}
.grafico text.mes{font-size:12px;fill:var(--tinta2);font-weight:600}
.grafico text.valor{fill:var(--tinta);font-weight:600}
.grafico .barra-e{fill:var(--serie)}
.grafico .barra-s{fill:var(--sobre)}
.grafico .meta{stroke:var(--tinta);stroke-width:2;stroke-linecap:round}
.grafico a{cursor:pointer;outline:0}
.grafico a .zona{fill:transparent}
.grafico a:hover .zona,.grafico a:focus-visible .zona{fill:var(--azul-tenue)}
.grafico a:focus-visible .zona{stroke:var(--azul2);stroke-width:2}
.sin-datos{padding:34px 0;color:var(--tinta3);font-size:13px}

.unis{display:grid;gap:11px;margin:4px 0 0;padding:0;list-style:none}
.unis li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;font-size:13px}
.unis .n{font-weight:600}
.unis .v{font-variant-numeric:tabular-nums;color:var(--tinta2)}
.unis .tira{grid-column:1/-1;height:8px;border-radius:0 4px 4px 0;background:var(--linea2);overflow:hidden}
.unis .tira i{display:block;height:100%;background:var(--serie);border-radius:0 4px 4px 0}

.ficha-pie{border-top:1px solid var(--linea2)}
.ficha-pie table.lista tbody tr{cursor:pointer}
.ficha-pie table.lista th:first-child,.ficha-pie table.lista td:first-child{padding-left:26px}
.ficha-pie table.lista th:last-child,.ficha-pie table.lista td:last-child{padding-right:26px}
.ficha-pie .nuevo-mes{padding:12px 26px}
.sobre-txt{color:var(--sobre);font-weight:700}

.globo{position:fixed;z-index:60;pointer-events:none;background:var(--sup);border:1px solid var(--linea);border-radius:9px;box-shadow:0 6px 24px rgba(10,18,25,.18);padding:10px 12px;font-size:12.5px;min-width:190px}
.globo b{display:block;font-family:var(--display);font-size:13.5px;margin-bottom:5px}
.globo div{display:flex;justify-content:space-between;gap:18px;color:var(--tinta2)}
.globo div span:last-child{color:var(--tinta);font-weight:600;font-variant-numeric:tabular-nums}
.globo .ir{margin-top:6px;color:var(--tinta3);font-size:11.5px;display:block}

@keyframes subir{from{transform:scaleY(0)}to{transform:scaleY(1)}}
.grafico .anima{transform-origin:bottom;transform-box:fill-box;animation:subir .45s cubic-bezier(.2,.8,.2,1) both}
@media (prefers-reduced-motion:reduce){.grafico .anima{animation:none}.riel button{transition:none}}
@media (max-width:980px){
  .ficha-cab{grid-template-columns:1fr}.cifras{grid-template-columns:repeat(2,auto);gap:14px 30px}
  .ficha-cpo{grid-template-columns:1fr}.ficha-cpo>div+div{border-left:0;border-top:1px solid var(--linea2)}
  .ficha-cab h3{font-size:32px}
}
:root[data-tema="oscuro"] .riel button[aria-selected="true"]{background:var(--azul-tenue);border-color:var(--azul2)}
:root[data-tema="oscuro"] .riel button[aria-selected="true"]::after{background:var(--azul2)}