/* Calculadora de libras (T11) + Copiar códigos / Llevar a Entregado (T12).
   Copia del mockup aprobado por John (D11 = A, 05/11/2026): optopus-admin-mockups/docs/mockups/calculadora-libras.html.
   Todo encerrado en #seccion-calculadora-libras para no tocar el resto del admin. */
#seccion-calculadora-libras {
  --menu:#1a2742; --linea:#E7E9EE; --fila-alterna:#F8F9FB;
  --tinta:#0F172A; --tinta-2:#475467; --tinta-3:#667085; --apagado:#A0A7B4; --apagado-fondo:#EEF0F3;
  --marca:#3B5BFD; --marca-hover:#2F4BE6; --marca-suave:#ECF0FF; --marca-tinta:#2A3FC4;
  --bien:#15803D; --bien-fondo:#DCFCE7; --atencion:#B45309; --atencion-fondo:#FEF3C7; --problema:#B91C1C; --problema-fondo:#FEE2E2;
  --fuente:"Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  max-width:1280px; color:var(--tinta); font-size:14px;
}
#seccion-calculadora-libras * { box-sizing:border-box; }
#seccion-calculadora-libras [hidden] { display:none !important; }

/* Pestañas (en el mockup eran los chips de estados) */
#seccion-calculadora-libras .estados { display:flex; gap:6px; margin-bottom:16px; flex-wrap:wrap; }
#seccion-calculadora-libras .estados button { font:inherit; font-size:12px; padding:5px 10px; border-radius:999px; border:0; background:var(--apagado-fondo); color:var(--tinta-2); cursor:pointer; }
#seccion-calculadora-libras .estados button.on { background:var(--marca-suave); color:var(--marca-tinta); font-weight:600; }

#seccion-calculadora-libras .tarjeta { background:#fff; border:1px solid var(--linea); border-radius:16px; padding:18px; margin-bottom:16px; box-shadow:none; }
#seccion-calculadora-libras .tarjeta h2 { font-size:15px; font-weight:600; margin:0 0 12px; }
#seccion-calculadora-libras .form { display:grid; grid-template-columns:minmax(0,2fr) minmax(0,1fr) auto; gap:12px; align-items:end; }
#seccion-calculadora-libras .form.form-2 { grid-template-columns:minmax(0,1fr) auto; }
#seccion-calculadora-libras .campo label { display:block; font-size:13px; font-weight:500; color:var(--tinta-2); margin-bottom:6px; }
#seccion-calculadora-libras .campo input { width:100%; font:inherit; font-size:15px; padding:10px 12px; border:1px solid var(--linea); border-radius:10px; background:#fff; color:var(--tinta); }
#seccion-calculadora-libras .btn { font:inherit; font-size:14px; font-weight:600; border-radius:10px; padding:10px 16px; border:1px solid var(--linea); background:#fff; color:var(--tinta); cursor:pointer; white-space:nowrap; }
#seccion-calculadora-libras .btn.prim { background:var(--marca); border-color:var(--marca); color:#fff; }
#seccion-calculadora-libras .btn.prim:hover { background:var(--marca-hover); }
#seccion-calculadora-libras .btn:disabled { opacity:.5; cursor:not-allowed; }
#seccion-calculadora-libras .btn:focus-visible, #seccion-calculadora-libras input:focus-visible { outline:3px solid var(--marca-suave); outline-offset:1px; }
#seccion-calculadora-libras .check { display:inline-flex; align-items:center; gap:8px; font-weight:600; font-size:13px; margin-top:12px; cursor:pointer; }
#seccion-calculadora-libras .check input { accent-color:var(--menu); }
#seccion-calculadora-libras .cliente { font-size:13px; color:var(--tinta-2); margin-top:10px; }

/* El momento memorable: objetivo vs. propuesta */
#seccion-calculadora-libras .medidor { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:12px; margin-bottom:16px; font-variant-numeric:tabular-nums; }
#seccion-calculadora-libras .kpi { display:block; background:#fff; border:1px solid var(--linea); border-radius:10px; padding:12px 14px; min-width:0; }
#seccion-calculadora-libras .kpi span { display:block; font-size:12px; color:var(--tinta-3); }
#seccion-calculadora-libras .kpi b { font-size:18px; font-weight:600; }
#seccion-calculadora-libras .kpi small { display:block; font-size:12px; color:var(--atencion); margin-top:2px; }
#seccion-calculadora-libras .kpi.bien b { color:var(--bien); }
#seccion-calculadora-libras .kpi.problema b { color:var(--problema); }
#seccion-calculadora-libras .kpi.atencion b { color:var(--atencion); }
#seccion-calculadora-libras .barra { position:relative; height:10px; background:var(--apagado-fondo); border-radius:999px; margin:6px 0 2px; }
#seccion-calculadora-libras .barra i { position:absolute; inset:0 auto 0 0; background:var(--marca); border-radius:999px; }
#seccion-calculadora-libras .barra s { position:absolute; top:-4px; bottom:-4px; width:2px; background:var(--tinta); text-decoration:none; }
#seccion-calculadora-libras .barra-pie { display:flex; justify-content:space-between; font-size:12px; color:var(--tinta-3); font-variant-numeric:tabular-nums; }

#seccion-calculadora-libras .tabla-wrap { border:1px solid var(--linea); border-radius:10px; overflow:hidden; padding:0; margin:0; }
#seccion-calculadora-libras table.t { width:100%; border-collapse:collapse; table-layout:fixed; font-variant-numeric:tabular-nums; }
#seccion-calculadora-libras .t th { text-align:left; font-weight:500; color:var(--tinta-3); font-size:12px; padding:8px 10px; border-bottom:1px solid var(--linea); background:#fff; text-transform:none; letter-spacing:0; }
#seccion-calculadora-libras .t td { padding:9px 10px; border-bottom:1px solid var(--linea); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
#seccion-calculadora-libras .t .num { text-align:right; }
#seccion-calculadora-libras .t .num + td, #seccion-calculadora-libras .t .num + th { padding-left:22px; }
#seccion-calculadora-libras .t tbody tr:last-child td { border-bottom:0; }
#seccion-calculadora-libras .t tr.total td { font-weight:700; background:var(--fila-alterna); }
#seccion-calculadora-libras .t tr.fuera td { color:var(--tinta-2); }  /* R6: el MIO nunca en gris */
#seccion-calculadora-libras .t tbody tr.elegible { cursor:pointer; }
#seccion-calculadora-libras .t input[type=checkbox] { accent-color:var(--menu); margin:0; }
#seccion-calculadora-libras .t .nd { color:var(--apagado); }
#seccion-calculadora-libras .etq { display:inline-block; min-width:92px; text-align:center; padding:2px 8px; border-radius:999px; font-size:12px; font-weight:600; background:var(--apagado-fondo); color:var(--tinta-2); }
#seccion-calculadora-libras .etq.atencion { background:var(--atencion-fondo); color:var(--atencion); }
#seccion-calculadora-libras .acciones { display:flex; gap:10px; justify-content:flex-end; flex-wrap:wrap; margin-top:14px; }
#seccion-calculadora-libras .nota { font-size:12px; color:var(--tinta-3); margin:8px 0 0; }
#seccion-calculadora-libras .aviso { border:1px solid #fde68a; background:#fffbeb; color:var(--atencion); border-radius:10px; padding:10px 12px; font-size:13px; margin-top:12px; }
#seccion-calculadora-libras .aviso.problema { border-color:#fecaca; background:var(--problema-fondo); color:var(--problema); }
#seccion-calculadora-libras .vacio { color:var(--tinta-3); font-size:13px; padding:4px 0; }
#seccion-calculadora-libras .barra-sel { display:flex; align-items:center; gap:10px; justify-content:space-between; flex-wrap:wrap; background:var(--marca-suave); border-radius:10px; padding:10px 12px; margin-bottom:12px; font-variant-numeric:tabular-nums; }
#seccion-calculadora-libras .barra-sel b { color:var(--marca-tinta); }
#seccion-calculadora-libras .barra-sel .botones { display:flex; gap:8px; flex-wrap:wrap; }
#seccion-calculadora-libras .cl-toast { position:fixed; left:50%; bottom:24px; transform:translateX(-50%); background:var(--tinta); color:#fff; border-radius:10px; padding:10px 16px; font-size:13px; z-index:1000; }

#seccion-calculadora-libras col.c-mio { width:140px; }
#seccion-calculadora-libras col.c-fecha { width:96px; }
#seccion-calculadora-libras col.c-dias { width:70px; }
#seccion-calculadora-libras col.c-est { width:120px; }
#seccion-calculadora-libras col.c-lb { width:80px; }
#seccion-calculadora-libras col.c-val { width:110px; }
#seccion-calculadora-libras col.c-sel { width:44px; }

@media (max-width:760px) {
  #seccion-calculadora-libras .form { grid-template-columns:1fr 1fr; }
  #seccion-calculadora-libras .form .btn { grid-column:1 / -1; }
  #seccion-calculadora-libras .form.form-2 { grid-template-columns:1fr; }
  #seccion-calculadora-libras .medidor { grid-template-columns:repeat(2, minmax(0,1fr)); }
  #seccion-calculadora-libras .sec { display:none; }
  #seccion-calculadora-libras col.c-mio { width:112px; }
  #seccion-calculadora-libras col.c-lb { width:62px; }
  #seccion-calculadora-libras col.c-val { width:84px; }
  #seccion-calculadora-libras col.c-est { width:0; }
  #seccion-calculadora-libras .t td, #seccion-calculadora-libras .t th { padding:8px 6px; font-size:13px; }
  #seccion-calculadora-libras .t .num + td, #seccion-calculadora-libras .t .num + th { padding-left:12px; }
  #seccion-calculadora-libras .acciones .btn { flex:1; }
  #seccion-calculadora-libras .barra-sel .botones, #seccion-calculadora-libras .barra-sel .botones .btn { flex:1; }
}
#seccion-calculadora-libras .p10-tabla .nd { color:var(--apagado); }
#seccion-calculadora-libras .p10-tabla .mio { color:var(--tinta); font-variant-numeric:tabular-nums; }
