/* Estilo del panel de liquidacion SSP.
 *
 * Extraido tal cual de apps-script/index.html (la web app de Apps Script). Se
 * reusa a proposito: logistica ya conoce esta pantalla, y cambiarle los colores y
 * las formas al mismo tiempo que le cambiamos el sistema abajo es pedirle dos
 * mudanzas en vez de una. La identidad (verde SSP, naranja) es la del PDF.
 */

:root { --verde:#1f7a3a; --verde2:#155a2a; --naranja:#f26f21; --gris:#f3f6f4; --texto:#1d2b24; --muted:#5f6b66;
          --borde:#d5ded9; --rojo:#c62828; --ambar:#a15c00; --amarillo:#fff2cc; --rosa:#f8d7d5; }
  * { box-sizing:border-box; }
  body { margin:0; font-family:Roboto, system-ui, sans-serif; color:var(--texto); background:#fafbfa; font-size:14px; }
  header { display:flex; align-items:center; gap:14px; padding:10px 20px; background:#fff; border-bottom:3px solid var(--verde); position:sticky; top:0; z-index:5; }
  header img { height:38px; }
  header h1 { font-size:17px; margin:0; color:var(--verde2); font-weight:700; }
  header .u { margin-left:auto; color:var(--muted); font-size:12px; }
  header a { color:var(--verde); text-decoration:none; font-size:12px; }
  nav { display:flex; gap:4px; padding:10px 20px 0; background:#fff; border-bottom:1px solid var(--borde); }
  nav button { border:0; background:none; padding:10px 16px; font:inherit; font-weight:500; color:var(--muted); cursor:pointer; border-bottom:3px solid transparent; }
  nav button.on { color:var(--verde2); border-color:var(--naranja); }
  main { padding:18px 20px 60px; max-width:1500px; margin:0 auto; }
  section { display:none; } section.on { display:block; }
  .card { background:#fff; border:1px solid var(--borde); border-radius:10px; padding:16px; margin-bottom:16px; }
  .row { display:flex; flex-wrap:wrap; gap:12px; align-items:flex-end; }
  .grid { display:grid; grid-template-columns:repeat(12, minmax(0,1fr)); gap:12px 14px; align-items:end; margin-bottom:12px; }
  .f { display:flex; flex-direction:column; gap:4px; min-width:0; }
  .row .f { flex:1; min-width:120px; } .row .f.w2 { flex:2; } .row .f.s { flex:0 0 120px; }
  .c1{grid-column:span 1} .c2{grid-column:span 2} .c3{grid-column:span 3} .c4{grid-column:span 4} .c5{grid-column:span 5} .c6{grid-column:span 6} .c7{grid-column:span 7} .c8{grid-column:span 8} .c12{grid-column:span 12}
  .grid .btn { height:38px; width:100%; }
  label { font-size:11px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  input, select, textarea { font:inherit; padding:8px 10px; border:1px solid var(--borde); border-radius:6px; background:#fff; width:100%; }
  input:focus, select:focus, textarea:focus { outline:2px solid #bfe0c9; border-color:var(--verde); }
  input[readonly] { background:var(--gris); color:var(--muted); }
  .btn { font:inherit; font-weight:500; border:0; border-radius:6px; padding:9px 16px; cursor:pointer; background:var(--verde); color:#fff; }
  .btn.sec { background:#fff; color:var(--verde2); border:1px solid var(--verde); }
  .btn.warn { background:var(--naranja); }
  .btn.danger { background:#fff; color:var(--rojo); border:1px solid var(--rojo); }
  .btn:disabled { opacity:.5; cursor:default; }
  .kpis { display:grid; grid-template-columns:repeat(auto-fit,minmax(165px,1fr)); gap:12px; }
  .kpi { background:var(--gris); border-radius:8px; padding:12px 14px; }
  .kpi b { display:block; font-size:19px; color:var(--verde2); white-space:nowrap; }
  .kpi.total { background:var(--verde2); color:#fff; grid-column:span 2; } .kpi.total b { color:#fff; font-size:23px; }
  .kpi.bad { background:var(--rosa); } .kpi.bad b { color:var(--rojo); }
  .kpi small { color:inherit; opacity:.8; }
  table { width:100%; border-collapse:collapse; font-size:13px; }
  th { background:var(--verde); color:#fff; padding:8px 6px; text-align:left; font-weight:500; white-space:nowrap; position:sticky; top:0; }
  td { padding:6px; border-bottom:1px solid var(--borde); vertical-align:middle; }
  td.wrap { min-width:170px; max-width:300px; } td.acc { white-space:nowrap; } td.nw { white-space:nowrap; }
  tr:nth-child(even) td { background:#fafcfb; }
  tr.alerta td { background:var(--amarillo); } tr.rojo td { background:var(--rosa); }
  td.n { text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
  td.money { font-weight:500; color:var(--verde2); }
  td .al { color:var(--ambar); font-style:italic; font-size:12px; }
  .tabla { overflow:auto; max-height:60vh; border:1px solid var(--borde); border-radius:8px; }
  .prev { display:flex; gap:20px; flex-wrap:wrap; padding:10px 14px; background:var(--gris); border-radius:8px; font-size:13px; }
  .prev b { color:var(--verde2); }
  .msg { padding:10px 14px; border-radius:8px; margin:10px 0; display:none; white-space:pre-wrap; }
  .msg.ok { display:block; background:#d9ead3; color:#1b4d2b; } .msg.err { display:block; background:var(--rosa); color:var(--rojo); }
  .mini { font-size:12px; color:var(--muted); }
  .chip { display:inline-block; padding:2px 8px; border-radius:12px; font-size:11px; background:var(--gris); color:var(--muted); }
  .chip.v { background:#d9ead3; color:#1b4d2b; } .chip.m { background:#fde9d9; color:#8a3d0a; } .chip.h { background:#e3ecf7; color:#1d4f8a; }
  .icon { background:none; border:0; cursor:pointer; font-size:15px; padding:2px 5px; }
  #cargando { position:fixed; inset:0; background:rgba(255,255,255,.6); display:none; align-items:center; justify-content:center; font-weight:500; color:var(--verde2); z-index:20; }
  h2 { font-size:15px; margin:0 0 12px; color:var(--verde2); }
  .split { display:grid; grid-template-columns:minmax(320px,40%) 1fr; gap:16px; align-items:start; }
  .foto { position:sticky; top:78px; background:var(--gris); border:1px solid var(--borde); border-radius:8px; overflow:hidden; }
  .foto img { width:100%; display:block; cursor:zoom-in; }
  .foto .sinfoto { padding:40px 16px; text-align:center; color:var(--muted); font-size:13px; }
  .foto .pie { padding:8px 12px; font-size:12px; color:var(--muted); background:#fff; border-top:1px solid var(--borde); display:flex; justify-content:space-between; gap:8px; }
  .pend { border:1px solid var(--borde); border-radius:8px; margin-bottom:12px; overflow:hidden; }
  .pend.sel { border-color:var(--verde); box-shadow:0 0 0 2px #bfe0c9; }
  .pend .cab { display:flex; gap:10px; align-items:center; padding:8px 12px; background:var(--gris); cursor:pointer; }
  .pend .cab b { font-size:13px; } .pend .cab .sp { margin-left:auto; }
  .pend .cuerpo { padding:12px; display:none; } .pend.sel .cuerpo { display:block; }
  .conf { font-size:11px; padding:2px 8px; border-radius:12px; font-weight:500; }
  .conf.alta { background:#d9ead3; color:#1b4d2b; } .conf.media { background:var(--amarillo); color:var(--ambar); } .conf.baja { background:var(--rosa); color:var(--rojo); }
  .dudosa input, .dudosa select { border-color:var(--naranja); background:#fff8f2; }
  .dudosa label::after { content:' ⚠'; color:var(--naranja); }
  .zoom { position:fixed; inset:0; background:rgba(0,0,0,.85); display:none; align-items:center; justify-content:center; z-index:30; cursor:zoom-out; }
  .zoom img { max-width:96%; max-height:96%; }
  .vacio { padding:30px; text-align:center; color:var(--muted); }
  @media (max-width:900px){ .grid{grid-template-columns:repeat(6, minmax(0,1fr));} .c7,.c8,.c12{grid-column:span 6} .c5{grid-column:span 3} main{padding:12px;} }