/* ════════════════════════════════════════════════════════════════════
   Facturación Orvik · las cinco pantallas aprobadas (E5, 30-oct)
   La lógica en `consola-facturacion.js`; el diseño en
   `docs/aud/mockups/facturacion/index.html` (rama auditor/mockup-facturacion).

   La composición es la de la propuesta; los valores son los de 08: sólo
   tokens de `orvik-tokens.css`, letra 13 / 15 / 17 / 24 y 30 el título
   de la consola, radios 12 (control) y 20 (tarjeta), y redondo completo
   sólo en los estados (insignias, `data-pastilla`).
   ════════════════════════════════════════════════════════════════════ */

.cf2 { display:grid; gap:var(--hueco-tarjetas); color:var(--texto); min-width:0; }
.cf2-top { display:grid; gap:var(--e-2); }
.cf2-ceja { font:500 var(--letra-13, 13px)/18px var(--fuente-mono); letter-spacing:.08em; text-transform:uppercase; color:var(--marca-principal-texto); }
#main .cf2-top h2 { margin:0; font:var(--t-pantalla); color:var(--texto); }
.cf2 p { margin:0; font:400 var(--letra-15, 15px)/22px var(--fuente); color:var(--texto-2); max-width:72ch; }

/* Las pestañas de la propuesta (no son el menú: viven dentro de la pantalla). */
.cf2-tabs { display:flex; flex-wrap:wrap; gap:var(--e-2); }
#main .cf2-tabs button { min-height:var(--toque); padding:0 var(--e-4); border:1px solid var(--linea); border-radius:var(--r-control);
  background:var(--superficie); color:var(--texto-2); font:500 var(--letra-15, 15px)/20px var(--fuente); cursor:pointer; }
#main .cf2-tabs button[aria-current="page"] { background:var(--marca-suave); color:var(--marca-principal-texto); border-color:transparent; }
#main .cf2 :is(button, select, input, textarea):focus-visible { outline:2px solid var(--foco); outline-offset:2px; }

.cf2-pant { display:grid; gap:var(--hueco-tarjetas); min-width:0; }
.cf2-card { background:var(--superficie); border:1px solid var(--linea); border-radius:var(--r-tarjeta); padding:var(--e-5);
  display:grid; gap:var(--e-4); min-width:0; align-content:start; }
.cf2-cols { display:grid; grid-template-columns:minmax(0, 1.1fr) minmax(0, .9fr); gap:var(--hueco-tarjetas); align-items:start; }
@media (max-width:820px) { .cf2-cols { grid-template-columns:minmax(0, 1fr); } }
#main .cf2 h3 { margin:0; font:600 var(--letra-17, 17px)/22px var(--fuente); color:var(--texto); }
#main .cf2 h3.cf2-h2 { font:600 var(--letra-24, 24px)/30px var(--fuente); }
.cf2-tit { display:grid; gap:var(--e-1); }

/* Las listas con su estado a la derecha. */
.cf2-lista { list-style:none; margin:0; padding:0; display:grid; }
.cf2-lista li { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--e-3); align-items:center; padding:var(--e-3) 0; border-bottom:1px solid var(--linea); }
.cf2-lista li:last-child { border-bottom:0; }
.cf2-lista b { font:500 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); overflow-wrap:anywhere; }
.cf2-lista small, .cf2-tabla small { display:block; font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3); overflow-wrap:anywhere; }
/* Los contratos se tocan: el renglón entero es un botón. */
.cf2-toca li { display:block; padding:0; }
#main .cf2-toca button { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--e-3); align-items:center; width:100%;
  padding:var(--e-3) 0; border:0; border-radius:0; background:none; color:inherit; text-align:left; cursor:pointer; min-height:var(--toque); }
#main .cf2-toca button:hover b, #main .cf2-toca button[aria-current="true"] b { text-decoration:underline; }

/* Los estados: insignias, no botones. */
.cf2-est { font:500 var(--letra-13, 13px)/18px var(--fuente); padding:var(--e-1) var(--e-3); border-radius:var(--r-chico); white-space:nowrap; justify-self:end; }
.cf2-ok   { background:var(--exito-suave);   color:var(--exito-texto); }
.cf2-warn { background:var(--aviso-suave);   color:var(--aviso-texto); }
.cf2-no   { background:var(--peligro-suave); color:var(--peligro-texto); }
.cf2-lock { background:var(--neutro-suave);  color:var(--neutro-texto); }
.cf2-info { background:var(--proceso-suave); color:var(--proceso-texto); }
.cf2-teal { background:var(--marca-suave);   color:var(--marca-principal-texto); }

/* Los campos. panel.css pone las etiquetas en mayúsculas: aquí no. */
.cf2-campo { display:grid; gap:var(--e-2); min-width:0; align-content:start; }
#main .cf2-campo label, #main .cf2-campo .cf2-lbl { margin:0; font:500 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); text-transform:none; letter-spacing:0; }
#main .cf2-campo :is(input, select, textarea) { width:100%; min-height:var(--toque); padding:0 var(--e-3); font:400 var(--letra-15, 15px)/20px var(--fuente);
  color:var(--texto); background:var(--superficie-2); border:1px solid var(--linea); border-radius:var(--r-control); box-sizing:border-box; }
#main .cf2-campo textarea { padding:var(--e-3); resize:vertical; }
#main .cf2-campo input[readonly] { color:var(--texto-2); }
#main .cf2-campo :is(input, select, textarea):disabled { color:var(--texto-3); cursor:not-allowed; }
#main .cf2-campo ::placeholder { color:var(--texto-3); }
.cf2-ayuda { font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3); }
/* Ningún texto guía se corta (auditor, 30-oct): las columnas dependen del
   ancho de la TARJETA, no de la ventana. Una tarjeta angosta (a 1180 la de
   la izquierda mide ~470) pone los campos uno debajo de otro. */
.cf2-card { container-type:inline-size; }
.cf2-fila2 { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:var(--e-3); }
@container (max-width:600px) { .cf2-fila2 { grid-template-columns:minmax(0, 1fr); } }
.cf2-filtros { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:var(--e-3); align-items:end; }
/* «Timbrar las listas (N)»: fijo al pie de la lista, a la derecha (auditor, 1-nov). Se queda a la
   vista mientras se recorre la tabla; en el celular, encima de la barra de pestañas flotante. */
.cf2-pie-lista { position:sticky; bottom:var(--e-4); z-index:1; display:flex; justify-content:flex-end;
  margin-top:var(--e-3); padding:var(--e-3) 0; background:var(--superficie); border-top:1px solid var(--linea); }
@media (max-width:768px) { .cf2-pie-lista { bottom:calc(var(--alto-pestanas) + var(--e-4) + var(--e-2)); } }
@container (max-width:1000px) { .cf2-filtros { grid-template-columns:repeat(2, minmax(0, 1fr)); } }
@container (max-width:520px) { .cf2-filtros { grid-template-columns:minmax(0, 1fr); } }

/* Subir el sello: el archivo se elige tocando la caja. */
.cf2-drop { display:grid; gap:var(--e-1); padding:var(--e-4); border:1.5px dashed var(--linea-fuerte); border-radius:var(--r-control); background:var(--superficie-2); cursor:pointer; }
#main .cf2-drop, #main .cf2-drop * { text-transform:none; letter-spacing:0; }
.cf2-drop b { font:500 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); }
.cf2-drop input { position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; }
.cf2-drop { position:relative; }
.cf2-drop:focus-within { outline:2px solid var(--foco); outline-offset:2px; }

/* Los botones de la propuesta: radio de control, nunca píldora. */
.cf2-acciones { display:flex; flex-wrap:wrap; gap:var(--e-3); align-items:center; }
/* El color es el de los botones de la consola (`.btn` y `.btn.ghost`); aquí sólo la medida de 08. */
#main .cf2 .cf2-btn { min-height:var(--toque); padding:0 var(--e-4); border-radius:var(--r-control); font:500 var(--letra-15, 15px)/20px var(--fuente); }
#main .cf2 .cf2-btn.ghost { color:var(--texto); }
#main .cf2 .cf2-btn:disabled { opacity:.5; cursor:not-allowed; }
.cf2-nota { font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3); }
#main .cf2 p.cf2-nota { font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-3); }

/* Los avisos. */
.cf2-aviso { display:grid; gap:2px; padding:var(--e-3) var(--e-4); border-radius:var(--r-control); font:400 var(--letra-15, 15px)/22px var(--fuente); color:var(--texto); }
.cf2-aviso b { font-weight:600; }
.cf2-av-warn { background:var(--aviso-suave); } .cf2-av-warn b { color:var(--aviso-texto); }
.cf2-av-lock { background:var(--neutro-suave); }
.cf2-av-ok   { background:var(--exito-suave); } .cf2-av-ok b { color:var(--exito-texto); }

/* La tabla del periodo: se desplaza dentro de su caja, nunca la página. */
.cf2-tabla { overflow-x:auto; border:1px solid var(--linea); border-radius:var(--r-control); }
.cf2-tabla table { border-collapse:collapse; width:100%; min-width:760px; }
.cf2-tabla th, .cf2-tabla td { text-align:left; padding:var(--e-3); border-bottom:1px solid var(--linea); vertical-align:middle; font:400 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); }
.cf2-tabla th { font:500 var(--letra-13, 13px)/18px var(--fuente-mono); text-transform:uppercase; letter-spacing:.05em; color:var(--texto-3); background:var(--superficie-2); }
.cf2-tabla tr:last-child td { border-bottom:0; }
.cf2-tabla tbody tr { cursor:pointer; }
.cf2-tabla tbody tr[aria-current="true"] td { background:var(--superficie-2); }
.cf2-tabla tbody tr:focus-visible { outline:2px solid var(--foco); outline-offset:-2px; }
.cf2-num { font-variant-numeric:tabular-nums; text-align:right; white-space:nowrap; }
.cf2-tabla th.cf2-num { text-align:right; }
.cf2-nw { white-space:nowrap; }
.cf2-leyenda { display:flex; flex-wrap:wrap; gap:var(--e-2); }

/* Tu siguiente factura. */
.cf2-sig { display:grid; gap:var(--e-1); padding:var(--e-4) var(--e-5); border-radius:var(--r-tarjeta); background:var(--marca-suave); }
.cf2-sig small { font:400 var(--letra-13, 13px)/18px var(--fuente); color:var(--texto-2); }
.cf2-q { font:600 var(--letra-24, 24px)/30px var(--fuente); color:var(--texto); text-wrap:balance; }

/* La previa. */
.cf2-prev { display:grid; gap:var(--e-2); }
.cf2-r { display:grid; grid-template-columns:minmax(0, 1fr) auto; gap:var(--e-2); font:400 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); }
.cf2-r span:last-child { text-align:right; }
.cf2-t { border-top:1px solid var(--linea); padding-top:var(--e-3); font-weight:600; }
.cf2-sec { font:500 var(--letra-13, 13px)/18px var(--fuente-mono); text-transform:uppercase; letter-spacing:.06em; color:var(--texto-3); padding-top:var(--e-2); }

/* Los turnos de la nota. */
.cf2-chks { display:grid; }
.cf2-chk { display:grid; grid-template-columns:auto minmax(0, 1fr); gap:var(--e-3); align-items:start; padding:var(--e-3) 0; border-bottom:1px solid var(--linea);
  font:400 var(--letra-15, 15px)/20px var(--fuente); color:var(--texto); cursor:pointer; }
#main .cf2-chk { text-transform:none; letter-spacing:0; }
.cf2-chk:last-child { border-bottom:0; }
.cf2-chk input { margin-top:3px; width:18px; height:18px; accent-color:var(--foco); }

/* Cómo se conecta. */
.cf2-arq { display:grid; grid-template-columns:repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap:var(--e-3); }
.cf2-arq .cf2-card { gap:var(--e-2); }
.cf2-arq ul { margin:0; padding-left:18px; display:grid; gap:var(--e-1); }
.cf2-arq li { font:400 var(--letra-15, 15px)/22px var(--fuente); color:var(--texto-2); }

/* La etiqueta con su estado al lado («Días de crédito · Por confirmar»). */
.cf2-lbl-est { display:inline-flex; flex-wrap:wrap; align-items:center; gap:var(--e-2); }