/* La materia de `De2_producto/De23_ux/De231_materia.md`: la paleta, con los nombres de variable de las plantillas. */
:root {
  --ink: #2F2B29;          /* texto principal */
  --muted: #58514C;        /* rótulos, meta, cifras que valen 0 */
  --line: #D8D2CC;         /* bordes y separadores */
  --bg-main: #F7F5F2;      /* fondo de la aplicación */
  --bg-light: #FFFFFF;     /* superficie de una caja */
  --brand: #975140;        /* texto de marca, relleno de botón con letra blanca */
  --brand-dark: #7A4031;   /* hover de ese relleno */
  --brand-soft: #F2D9CE;   /* resaltado sobre claro */
  --brand-lg: #B65E46;     /* identidad y trazos, sin letra */
  --brand-visor: #D68D74;  /* resaltado sobre el fondo oscuro del visor */
  --error: #C84B3A; --error-tx: #B54434; --error-sf: #F8E8E5;
  --aviso: #D9972E; --aviso-tx: #8D621D; --aviso-sf: #FAF1E4;   /* el plano de aviso no lleva letra */
  --exito: #4F8D68; --exito-tx: #417556; --exito-sf: #E8F0EB;
  --info: #4F7F9E; --info-tx: #456F8B; --info-sf: #E8EEF2;
}

[x-cloak] { display: none !important; }

body {
  background: var(--bg-main);
  color: var(--ink);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.55;
}

/* Componentes mínimos HyperOutput reutilizables; el resto queda pendiente. */
.etiqueta { color: var(--brand); font-size: 11px; font-weight: 600; letter-spacing: 1.5px; text-transform: uppercase; }
.titular { color: var(--ink); font-size: 22px; font-weight: 500; margin: 4px 0 8px; }
.card { background: var(--bg-light); border: 1px solid var(--line); border-radius: 16px; padding: 24px; }
.campo { display: block; margin-bottom: 16px; }
.campo label { display: block; margin-bottom: 6px; }
.campo select, .campo input, .campo textarea { width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--line); background: #fff; font-family: inherit; }
.btn { display: inline-block; padding: 10px 24px; border-radius: 999px; font-size: 14px; cursor: pointer; border: 1px solid var(--ink); background: none; color: var(--ink); }
.btn-primario { background: var(--ink); color: var(--bg-light); border-color: var(--ink); }
.btn:disabled { opacity: .35; cursor: not-allowed; }
/* Un campo con su botón de icono a la derecha: la carpeta del lote y el Finder (VCF, 05/10/2026). */
.campo-con-icono { display: flex; gap: 8px; align-items: stretch; }
.campo-con-icono select { flex: 1; min-width: 0; }
.btn-icono { flex: none; width: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--ink); cursor: pointer; }
.btn-icono:hover { border-color: var(--ink); }
.btn-icono:disabled { opacity: .35; cursor: progress; }
/* El ojo de un campo de contraseña de la pasarela (It306): queda fuera hasta que su script le quita `hidden`; la raya se ve con la contraseña a la vista. */
.btn-ojo { width: 36px; height: 32px; padding: 0; margin-left: 4px; vertical-align: middle; }
.btn-ojo[hidden] { display: none; }
.btn-ojo .ojo-raya { display: none; }
.btn-ojo[aria-pressed="true"] .ojo-raya { display: inline; }
.aviso-ok { display: inline-block; background: var(--exito-sf); color: var(--exito-tx); border-radius: 999px; padding: 6px 16px; font-size: 12px; }
.aviso-vacio { color: var(--muted); font-size: 13px; }
.resumen-lote { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0 0 24px; font-size: 15px; }
.resumen-lote dt { color: var(--muted); }
.resumen-lote dd { margin: 0; }
.tabla-preparadas { width: 100%; border-collapse: collapse; font-size: 14px; margin-bottom: 12px; }
.tabla-preparadas th { text-align: left; color: var(--muted); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tabla-preparadas td { padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tabla-preparadas .num { text-align: right; }
/* Los pasos de Procesar (VCF, 06/10/2026): el nombre y lo que hace a la izquierda, lo que lleva a la derecha. */
.tabla-pasos { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla-pasos td { padding: 8px; border-bottom: 1px solid var(--line); vertical-align: top; }
.tabla-pasos .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.tabla-pasos .paso-pendiente { color: var(--muted); }
.tabla-pasos .paso-en-curso td:first-child { box-shadow: inset 3px 0 0 var(--brand); }
.tabla-pasos .paso-parado strong { color: var(--error-tx); }
.progreso { background: var(--line); border-radius: 8px; height: 16px; overflow: hidden; }
.progreso-relleno { background: var(--brand); height: 100%; transition: width 0.4s; }
/* El estado de un documento, con su palabra dentro (It018 M05). */
.estado-error { color: var(--error-tx); }
.estado-exito { color: var(--exito-tx); }

/* --- La revisión de un documento (PAN-14; en la ventana de Revisar, It091; una sola ventana para todos los motivos, It169 C) --- */
#detalle { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
/* Revisión de un documento con fallos (VCF, 28/09/2026): el original en 2/3 de la pantalla y los fallos al lado. */
#detalle:has(> .revision-original) { grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); }
.revision-original iframe { width: 100%; height: calc(100vh - 150px); border: 1px solid var(--line); border-radius: 16px; background: #fff; }
.revision-fallos { background: var(--bg-light); border: 1px solid var(--line); border-radius: 16px; padding: 20px;
  max-height: calc(100vh - 150px); overflow-y: auto; }
.fallo-revision { border-top: 1px solid var(--line); padding: 12px 0; }
.fallo-rotulo { font-weight: 600; margin: 0 0 2px; }
.fallo-comentario { margin: 0 0 8px; font-size: 13px; }
/* La línea «Propuesta» de un campo con fallo, sombreada con el fondo de la aplicación (It399, nota 1.33); la casilla «Valor nuevo» sigue en blanco. */
.fallo-comentario.fallo-propuesta { background: var(--bg-main); padding: 4px; border-radius: 6px; }
/* Las dos casillas de motivo de la revisión, rotuladas y con el ancho de la columna (It399, nota 1.35). */
.motivo-casilla { display: block; flex: 1 1 100%; margin-top: 10px; font-size: 13px; color: var(--muted); }
.motivo-casilla input { display: block; width: 100%; box-sizing: border-box; margin-top: 4px; padding: 5px 8px; border: 1px solid var(--line);
  border-radius: 6px; font: inherit; color: var(--ink); background: #fff; }
.fallo-revision .foto-campo { display: block; max-height: 180px; margin-bottom: 8px; }
.fallo-valor { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.fallo-valor input { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
  font-variant-numeric: tabular-nums; background: #fff; }
.fallo-por-que { margin: 4px 0 0; font-size: 12px; }
.revision-cabecera { margin-bottom: 8px; }
.revision-datos { display: grid; grid-template-columns: max-content 1fr; gap: 2px 12px; margin: 0 0 8px; font-size: 13px; }
.revision-datos dt { color: var(--muted); }
.revision-datos dd { margin: 0; font-variant-numeric: tabular-nums; }
.fallo-etiqueta { color: var(--muted); }
.detalle-vacio { display: flex; align-items: center; justify-content: center; min-height: 240px;
  background: var(--bg-light); border: 1px dashed var(--line); border-radius: 16px; }

/* Los campos de la tabla de campos de un tipo (Aprobación de tipos) */
#campos { background: var(--bg-light); border: 1px solid var(--line); border-radius: 16px; padding: 20px; }
#campos .titular { font-size: 18px; }
.errores-validacion { margin: 4px 0 0; padding-left: 18px; color: var(--error-tx); font-size: 12px; }
.errores-aprobacion { margin: 8px 0; padding: 10px 14px; border-radius: 8px; background: var(--error-sf); color: var(--error-tx); font-size: 14px; }
.errores-aprobacion ul { margin: 4px 0 0; padding-left: 18px; }
.acciones { margin-top: 8px; text-align: right; }

@media (max-width: 900px) {
  #detalle { grid-template-columns: 1fr; }
}

/* ── La ventana volante (PAN-8) ───────────────────────────────────────
   Cromo transversal: barra de título con asa, nombre y ✕. Radio de contenedor
   16 px y sombra suave, sin borde marcado (MAT-3). */
#ventana { padding: 0; border: none; border-radius: 16px; background: var(--bg-light);
  box-shadow: 0 8px 32px rgba(47, 43, 41, .18); min-width: 320px; max-width: 640px;
  color: var(--ink); position: fixed; }
#ventana::backdrop { background: rgba(47, 43, 41, .45); }
.ventana-barra { display: flex; align-items: center; gap: 8px; padding: 8px 12px;
  border-bottom: 1px solid var(--line); cursor: grab; user-select: none;
  border-radius: 16px 16px 0 0; background: var(--bg-main); }
.ventana-barra:active { cursor: grabbing; }
.ventana-asa { width: 16px; height: 4px; border-radius: 999px; background: var(--muted); }
.ventana-nombre { flex: 1; font-size: 12px; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .5px; }
.ventana-cerrar { border: none; background: none; cursor: pointer; font-size: 14px;
  color: var(--muted); border-radius: 999px; width: 24px; height: 24px; }
.ventana-cerrar:hover { background: var(--brand-soft); color: var(--brand-dark); }
#ventana-cuerpo { padding: 16px 24px 24px; }
/* La ventana de las parejas lleva siete columnas (VCF, 05/10/2026): más ancha que la de 640 px. */
#ventana:has(.ventana-ancha) { max-width: min(980px, 94vw); }
/* Con un trabajo en marcha, la ventana no se cierra y su ✕ no se ve (VCF, 05/10/2026). */
#ventana:has([data-trabajando]) .ventana-cerrar { visibility: hidden; }
a.btn { text-decoration: none; display: inline-block; }

.tabla-atajos { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabla-atajos th { text-align: left; font-size: 11px; text-transform: uppercase;
  letter-spacing: .5px; color: var(--muted); padding: 4px 8px; border-bottom: 1px solid var(--line); }
.tabla-atajos td { padding: 8px; border-bottom: 1px solid var(--line); color: var(--ink); }
.tabla-atajos kbd { font-family: "SFMono-Regular", ui-monospace, monospace; font-size: 12px;
  background: var(--bg-main); border: 1px solid var(--line); border-radius: 4px; padding: 1px 6px; }

/* Seguimiento: la línea de la fase en curso, debajo del avance (VCF, 27/09/2026). */
.fase-en-curso { font-size: 13px; color: var(--ink); margin: -4px 0 16px; font-variant-numeric: tabular-nums; }
/* Seguimiento: los tipos destilados, una línea cada uno. */
.tabla-tipos { border-collapse: collapse; font-size: 13px; }
.tabla-tipos th { font-size: 11px; text-transform: uppercase; color: var(--muted); text-align: left; padding: 4px 24px 4px 0; }
.tabla-tipos td { padding: 4px 24px 4px 0; border-top: 1px solid var(--line); }
.tabla-tipos .num { text-align: right; font-variant-numeric: tabular-nums; padding-right: 0; }

/* Las pestañas de la cabecera y el subtítulo de la pantalla (VCF, 27/09/2026). */
.pestanas { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: baseline; gap: 6px 16px; }
.pestanas a { color: var(--muted); text-decoration: none; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; white-space: nowrap; padding-bottom: 3px; border-bottom: 2px solid transparent; transition: color 0.2s; }
.pestanas a:hover { color: var(--brand); }
.pestanas a.activa { color: var(--ink); border-bottom-color: var(--brand); }
.pestana-salir { margin: 0; }
.pestana-salir button, .pestana-panel { background: none; border: 0; padding: 0 0 3px; border-bottom: 2px solid transparent; cursor: pointer; font: inherit; color: var(--muted); font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; transition: color 0.2s; }
.pestana-salir button:hover, .pestana-panel:hover { color: var(--brand); }
/* La franja de «Clientes y encargos» (`templates/_aviso_del_panel.html`): vacía no ocupa sitio; el fallo, con el borde y el fondo de `.aviso-confinamiento`. */
.aviso-panel { max-width: 872px; margin: 6px auto 0; font-size: 13px; }
.aviso-panel:empty { display: none; }
.aviso-panel-fallo { margin: 0; padding: 8px 12px; border: 1px solid var(--error-tx); border-radius: 8px; background: var(--error-sf); color: var(--ink); }
.subtitulo-pantalla { max-width: 920px; margin: 10px auto 0; padding: 0 24px; box-sizing: border-box; color: var(--muted); font-size: 13px; }
.subtitulo-pantalla strong { color: var(--ink); font-weight: 600; }
/* Detalle de documentos (VCF, 27/09/2026): anchos fijos en la plantilla; un texto largo parte
   línea dentro de su columna y no la ensancha. */
.tabla-seguimiento td, .tabla-seguimiento th { white-space: normal; overflow-wrap: anywhere; vertical-align: top; }
.tabla-seguimiento th { overflow-wrap: normal; overflow: hidden; text-overflow: ellipsis; }
.tabla-fallos th { padding: 8px 10px; font-size: 11px; text-transform: uppercase; color: var(--muted); background: var(--bg-main); border-bottom: 2px solid var(--line); }
.tabla-fallos td { padding: 8px 10px; border-bottom: 1px solid var(--line); }
/* Abrir · Original · Revisar: pasan a la línea de abajo antes que salirse de la tarjeta. */
.acciones-fallo { display: flex; flex-wrap: wrap; gap: 4px; }
.acciones-fallo .btn-mini { white-space: nowrap; }
.foto-fila { display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; text-align: left; }
.foto-fila .foto-campo { display: block; width: 100%; max-height: 160px; object-fit: contain; object-position: left top; }
/* Tipos de documento: el editor de campos de Modificar (VCF, 27/09/2026). */
.tabla-campos-tipo { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.tabla-campos-tipo th { text-align: left; font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 4px; }
/* Nombre · Tipo · Oblig. · Doble lectura · Descripción · botones: sin la columna Sección (VCF, 28/09/2026). */
.tabla-campos-tipo th:nth-child(1) { width: 20%; } .tabla-campos-tipo th:nth-child(2) { width: 10%; }
.tabla-campos-tipo th:nth-child(3) { width: 6%; } .tabla-campos-tipo th:nth-child(4) { width: 8%; }
.tabla-campos-tipo th:nth-child(6) { width: 90px; }
.tabla-campos-tipo td { padding: 3px 4px; border-top: 1px solid var(--line); vertical-align: top; }
.tabla-campos-tipo input:not([type=checkbox]), .tabla-campos-tipo select, .tabla-campos-tipo textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; }
.btn-mini { border: 1px solid var(--line); background: none; border-radius: 6px; padding: 2px 7px; cursor: pointer; color: var(--ink); }
.btn-mini:disabled { opacity: 0.35; cursor: default; }
.campo label.casilla { display: flex; gap: 8px; align-items: center; }
.campo label.casilla input { width: auto; }
/* Tipos de documento: las ventanas apiladas Familia → Tipo → Tabla (VCF, 27/09/2026). */
dialog.ventana-apilada { border: 1px solid var(--line); border-radius: 16px; padding: 0; width: min(1100px, 94vw); max-height: 90vh; background: var(--bg-light); color: var(--ink); box-shadow: 0 12px 40px rgba(47, 43, 41, 0.25); }
/* La ventana de la revisión de un documento (It091): casi toda la pantalla, con el original a la izquierda. */
dialog.ventana-revision { width: 96vw; height: 92vh; max-height: 92vh; }
.ventana-revision .revision-original iframe { height: calc(92vh - 110px); }
.ventana-revision .revision-fallos { max-height: calc(92vh - 110px); }
.fallo-revision.fallo-elegido { background: var(--bg-main); }
/* La ventana única (It169 C): las reglas del documento, las filas en duda y los demás campos plegados. */
.reglas-del-documento { margin: 0 0 8px; font-size: 13px; }
.reglas-del-documento ul { margin: 2px 0 0; padding-left: 18px; color: var(--error-tx); }
.sin-tipo { margin: 8px 0; font-size: 13px; }
.fila-en-duda { border-top: 1px solid var(--line); padding: 12px 0; }
.fila-en-duda .foto-campo { display: block; max-height: 180px; margin-bottom: 8px; }
.fila-en-duda .fallo-valor { margin-bottom: 6px; }
.campos-plegados { border-top: 1px solid var(--line); padding: 12px 0; }
.campos-plegados summary { cursor: pointer; font-size: 13px; }
.campo-revision { padding: 6px 0; }
.campo-valor { display: flex; align-items: center; gap: 8px; font-size: 13px; }
.campo-valor input { flex: 1; padding: 5px 8px; border: 1px solid var(--line); border-radius: 6px; font: inherit;
  font-variant-numeric: tabular-nums; background: #fff; }
dialog.ventana-apilada::backdrop { background: rgba(47, 43, 41, 0.35); }
.ventana-apilada-barra { position: sticky; top: 0; z-index: 1; display: flex; justify-content: space-between; align-items: center; padding: 10px 16px; background: var(--bg-main); border-bottom: 1px solid var(--line); font-size: 13px; font-weight: 600; }
.ventana-apilada-cuerpo { padding: 16px 20px 20px; }
.tabla-ventana { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; }
.tabla-ventana th { font-size: 11px; text-transform: uppercase; color: var(--muted); padding: 6px 8px; }
.tabla-ventana td { padding: 8px; border-top: 1px solid var(--line); }
.fila-abre { cursor: pointer; }
.fila-abre:hover td { background: var(--bg-main); }
/* Asociar: dos columnas, albaranes y facturas (VCF, 27/09/2026). */
.asociar-columnas { display: grid; grid-template-columns: 3fr 2fr; gap: 20px; align-items: start; }
@media (max-width: 760px) { .asociar-columnas { grid-template-columns: 1fr; } }
.asociar-columnas select { width: 100%; padding: 4px 6px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font: inherit; }
.tabla-ventana .num { text-align: right; font-variant-numeric: tabular-nums; }
.tabla-ventana tr.en-revision td { background: var(--aviso-sf); }
.factura-asociada { padding: 12px 14px; margin-bottom: 12px; font-size: 13px; border-radius: 16px; }
/* Asociar sin importes (VCF, 28/09/2026): lo que falta por adjudicar va con el fondo de lo pendiente. */
.factura-asociada.sin-adjudicar { background: var(--aviso-sf); }
.albaranes-de-factura { margin: 6px 0 0; padding-left: 18px; }
.albaranes-de-factura li { padding: 1px 0; }
/* La foto de un campo, los botones de una ventana y el aviso de espera de htmx (VCF, 27/09/2026). */
.foto-campo { max-width: 100%; max-height: 90px; border: 1px solid var(--line); border-radius: 4px; background: #fff; }
.sin-resolver-linea { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 14px; }
.ventana-botones { display: flex; justify-content: flex-end; align-items: center; gap: 10px; margin-top: 14px; flex-wrap: wrap; }
.htmx-indicator { display: none; }
.htmx-request .htmx-indicator, .htmx-request.htmx-indicator { display: block; }
/* Ver lo leído de un documento (VCF, 27/09/2026). */
a.btn-mini { display: inline-block; text-decoration: none; font-size: 12px; }
button.btn-mini { font-size: 12px; }
.documento-leido table { border-collapse: collapse; font-size: 12px; margin: 8px 0 16px; }
.documento-leido th, .documento-leido td { border: 1px solid var(--line); padding: 3px 6px; }
.documento-leido h1 { font-size: 18px; } .documento-leido h2 { font-size: 15px; margin-top: 18px; }
/* Asociar: el detalle de cada factura (VCF, 27/09/2026). */
.citados div { margin-top: 2px; }
/* Comparar: la conciliación línea a línea (VCF, 27/09/2026). */
.conciliacion { margin-bottom: 24px; padding: 16px 18px; }
.conciliacion-cabecera { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 6px; }
.conciliacion-resumen { font-size: 13px; margin: 4px 0 10px; }
.aviso-pendiente { font-size: 13px; margin: 4px 0 10px; padding: 8px 12px; border-left: 3px solid var(--aviso); background: var(--aviso-sf); }
.conciliacion-acciones { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; }
.conciliacion-modo { margin-left: auto; display: inline-flex; gap: 4px; }
.conciliacion-modo { gap: 18px; }
/* El balancín: recorta la vista; a la derecha, lo ancho. */
.revisar-vista { padding: 8px 16px; }
.balancin { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 2px 0;
  cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; color: var(--ink); white-space: nowrap; }
.balancin-rail { position: relative; display: inline-block; width: 36px; height: 20px; border-radius: 999px;
  background: var(--line); transition: background .15s; flex-shrink: 0; }
.balancin-rail::after { content: ""; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
  border-radius: 50%; background: var(--bg-light); box-shadow: 0 1px 2px rgba(47, 43, 41, .25); transition: transform .15s; }
.balancin[aria-checked="true"] .balancin-rail { background: var(--brand); }
.balancin[aria-checked="true"] .balancin-rail::after { transform: translateX(16px); }
/* El selector de tres posiciones de la pestaña Revisar (It265): la posición vigente, rellena. */
.selector-de-vista { display: inline-flex; border: 1px solid var(--brand); border-radius: 999px; overflow: hidden; }
.selector-posicion { background: none; border: 0; padding: 4px 14px; font: inherit; font-size: 13px; color: var(--brand); cursor: pointer; }
.selector-posicion + .selector-posicion { border-left: 1px solid var(--brand); }
.selector-posicion.vigente { background: var(--brand); color: #fff; }
.marca-cuadra { color: var(--exito-tx); font-weight: 600; } .marca-difiere { color: var(--error-tx); font-weight: 600; } .marca-sola { color: var(--aviso-tx); font-weight: 600; }
.tabla-conciliacion { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.tabla-conciliacion th { text-align: left; font-size: 10px; text-transform: uppercase; color: var(--muted); padding: 4px 6px; border-bottom: 1px solid var(--line); }
.tabla-conciliacion td { padding: 4px 6px; border-bottom: 1px solid var(--line); overflow-wrap: anywhere; vertical-align: top; }
.tabla-conciliacion .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; overflow-wrap: normal; }
.tabla-conciliacion td:first-child { white-space: nowrap; overflow-wrap: normal; font-size: 11px; }
.tabla-conciliacion td.distinto { color: var(--error-tx); font-weight: 700; }
.tabla-conciliacion tr.estado-solo-en-la-factura td, .tabla-conciliacion tr.estado-solo-en-el-albarán td { background: var(--aviso-sf); }
.tabla-conciliacion td.estado { text-align: center; font-weight: 700; }
.tabla-conciliacion tr.estado-cuadra td.estado { color: var(--exito-tx); }
.tabla-conciliacion tr.estado-difiere td.estado { color: var(--error-tx); }
.tabla-conciliacion tfoot td { font-weight: 600; border-bottom: none; }
.tabla-conciliacion tr.linea-diferencia td { color: var(--error-tx); } .tabla-conciliacion tr.linea-cuadra td { color: var(--exito-tx); }

/* El cambio de tipo en Revisión (VCF, 08/10/2026). */
.cambiar-tipo { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; margin: 8px 0 12px; font-size: 13px; }
.cambiar-tipo select { margin-left: 6px; padding: 6px 8px; font-size: 13px; max-width: 100%; }
.cambiar-tipo .btn { padding: 6px 16px; font-size: 13px; }
/* La tabla de la página Reglas (It071): varias líneas por celda, alineadas arriba. */
.tabla-de-reglas td { vertical-align: top; }

/* Modalidad activa y aviso de confinamiento (`PAN-11`): bajo la cabecera de toda pantalla. */
.modalidad-activa { max-width: 920px; margin: 4px auto 0; padding: 0 24px; font-size: 12px; color: var(--ink); }
/* El aviso de una petición htmx que falla (`marco.js`), alineado con la línea de la modalidad. */
#aviso-error { max-width: 920px; margin: 4px auto 0; padding: 0 24px; box-sizing: border-box; }
.aviso-confinamiento { max-width: 872px; margin: 6px auto 0; padding: 8px 12px; font-size: 13px; border: 1px solid var(--error-tx); border-radius: 8px; background: var(--error-sf); color: var(--ink); }

/* El panel de Dtll (`PAN-18`, `templates/panel.html`): arriba «Elige un cliente» y «Crea un encargo»; debajo, la tabla de los encargos del cliente elegido
   y la barra de la fila marcada; el alta, en la ventana `#ventana`. Las celdas no parten y cortan con «…»; las notas de la celda Encargo van debajo. */
.panel { max-width: 1240px; margin: 32px auto; padding: 0 24px; display: flex; flex-direction: column; gap: 16px; }
.panel-titular { font-size: 22px; margin: 0; }
.panel-eleccion { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.panel-arriba { display: flex; align-items: end; gap: 16px; }
.panel-arriba label { display: flex; flex-direction: column; gap: 4px; font-size: 14px; }
.panel-eleccion select { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.panel-tabla { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; }
.panel-tabla th, .panel-tabla td { padding: 6px 8px; border-top: 1px solid var(--line); text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.panel-tabla th { font-size: 12px; font-weight: 600; color: var(--muted); }
.panel-col-marca { width: 32px; }
.panel-col-encargo { width: 30%; }
/* It327: la columna Estado sale entera. En la pantalla del encargo, con su ancho, «Procesado el 28/10 a las 17:42» cabe en una línea a 1280 px; en la
   lista de encargos, con el suyo, en dos. */
.panel-col-estado { width: 22%; }
.panel-col-estado-lista { width: 14%; }
.panel-tabla td.panel-estado { white-space: normal; }
.panel-fila { cursor: pointer; }
.panel-marcada { box-shadow: inset 3px 0 0 var(--ink); background: var(--bg-light); }
.panel-nota { display: block; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.panel-identificador { font-family: ui-monospace, Menlo, monospace; font-size: 12px; color: var(--muted); margin-left: 4px; }
.panel-problema { color: var(--error-tx); }
.panel-archivada { color: var(--muted); }
.panel-archivados { margin-top: 8px; color: var(--muted); }
.panel-archivados .btn { padding: 4px 14px; }
.panel-barra { display: flex; align-items: center; gap: 12px; margin-top: 12px; }
.panel-barra .panel-acciones { margin-left: auto; display: flex; gap: 8px; }
/* It206: el portal del encargo debajo de su fila, en la misma pantalla que el panel; dentro del `iframe`, `html.en-panel` quita lo que el panel ya enseña. */
.panel-portal { display: block; width: 100%; height: calc(100vh - 220px); min-height: 520px; margin-top: 12px; border: 1px solid var(--line); border-radius: 8px; }
.panel-modalidad { display: block; }
html.en-panel .pestana-salir, html.en-panel .pestana-panel, html.en-panel #modalidad-activa, html.en-panel #aviso-panel { display: none; }
.panel-acciones .btn { padding: 4px 14px; }
.panel-pie { display: flex; justify-content: flex-end; gap: 8px; }
.panel-botones { display: flex; gap: 12px; align-items: center; margin-top: 8px; }
.panel-formulario { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.panel-formulario label { display: flex; flex-direction: column; gap: 4px; }
/* It417: el alta de la web, con el identificador fijo delante del nombre y «Elige la carpeta» al lado de la casilla de la carpeta. */
.panel-nombre-con-codigo { display: flex; align-items: center; gap: 2px; }
.panel-nombre-con-codigo input { flex: 1; }
.panel-codigo-del-alta { font-weight: 600; color: var(--ink); }
.panel-carpeta { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.panel-carpeta-rotulo { flex-basis: 100%; }
.panel-carpeta-elegida { flex: 1; padding: 6px 8px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); }
.cabecera-derecha { display: flex; align-items: center; gap: 8px; }
.panel-formulario input, .panel-formulario select, .panel-formulario textarea { padding: 6px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; }
.panel-nuevo { display: flex; flex-direction: column; gap: 10px; }
.panel-apertura { font-size: 14px; }

/* It308: la cabecera de las dos pantallas del panel y de la pantalla de acceso. A la izquierda, el logo del alambique (`_logo_distiller.html`, It311) y
   «Distiller»; a la derecha, el acceso sin sesión o el menú del usuario con sesión. */
.cabecera-dtll { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 1080px; margin: 0 auto;
  padding: 12px 24px; background: var(--bg-light); border-bottom: 1px solid var(--line); border-radius: 0 0 16px 16px; }
.cabecera-marca { display: flex; align-items: center; gap: 8px; }
.cabecera-logo { display: inline-block; flex: none; width: 28px; height: 28px; color: var(--brand-lg); }   /* It311: el SVG pinta en currentColor */
.cabecera-nombre { font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.5px; }
.cabecera-maquina { font-size: 13px; font-weight: 600; color: var(--muted); }   /* It387: «· Mac» o «· GC_Dtll», junto a «Distiller» */
.cabecera-acceso { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 13px; }
.cabecera-acceso input { padding: 4px 8px; border: 1px solid var(--line); border-radius: 8px; font: inherit; width: 150px; }
/* It387: el código del cliente tiene de 3 a 6 letras; con 80 px, el formulario cabe en una línea junto a «Distiller · GC_Dtll» con la cabecera de 1080 px. */
.cabecera-acceso input[name="cliente"] { width: 80px; }
.cabecera-olvido { font-size: 12px; }
.menu-usuario { position: relative; }
.menu-usuario > summary { list-style: none; cursor: pointer; }
.menu-usuario > summary::-webkit-details-marker { display: none; }
.menu-usuario .menu-entradas { position: absolute; right: 0; z-index: 10; display: flex; flex-direction: column; gap: 4px;
  min-width: 200px; padding: 8px; background: var(--bg-light); border: 1px solid var(--line); border-radius: 8px; }
.menu-entradas form { margin: 0; }
.menu-usuario .menu-entradas .btn, .menu-usuario .menu-entradas a { width: 100%; text-align: left; }
.menu-entradas .activa { font-weight: 700; }
/* It321: la segunda fila de la cabecera de la pantalla del encargo, con el menú del encargo a la vista; desde It429, con Procesar como botón. */
.menu-encargo { flex-basis: 100%; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding-top: 10px; border-top: 1px solid var(--line); }
.menu-encargo .menu-entradas { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.menu-encargo .menu-entradas .btn { padding: 6px 16px; }
.menu-encargo .menu-entradas .activa { background: var(--bg-main); }
.encargo-cifras { margin-top: 12px; }
.lista-encargos { max-width: 1080px; margin: 24px auto; }
.encargo-titulo { color: inherit; text-decoration: none; }
.fila-en-marcha { cursor: pointer; }
.pestanas-revisar { display: flex; gap: 16px; margin-bottom: 12px; }
.pestanas-revisar a { color: var(--muted); text-decoration: none; font-weight: 600; padding-bottom: 3px; border-bottom: 2px solid transparent; }
.pestanas-revisar a.activa { color: var(--ink); border-bottom-color: var(--brand); }
/* Revisar documento a documento en Facturas (It322): el ancho de la ventana, el contador con Anterior y Siguiente, y la imagen a toda la altura. */
.revisar-a-pantalla-completa { margin: 12px 16px; }
.revisar-contador { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.revisar-contador .revisar-n-de-m { font-weight: 600; }
.revisar-contador .btn[aria-disabled="true"] { opacity: 0.4; pointer-events: none; }
.revision-pantalla .revision-original iframe { height: calc(100vh - 120px); }
.revision-pantalla .revision-fallos { max-height: calc(100vh - 120px); }

/* La pantalla de acceso: el alto de la ventana menos la cabecera se reparte en dos mitades; el dibujo de la destilación, centrado en la
   izquierda, y el nombre con el lema, centrados en la derecha, los dos a media altura entre el borde inferior de la cabecera y el de la
   ventana. En una ventana estrecha, el nombre y el lema bajan debajo del dibujo. */
.pantalla-acceso { min-height: calc(100vh - 16px); display: flex; flex-direction: column; }   /* 16 px: el margen del body */
.acceso-cuerpo { flex: 1; display: grid; grid-template-columns: 1fr 1fr; align-items: center; justify-items: center; gap: 24px;
  width: 100%; max-width: 1280px; margin: 0 auto; padding: 24px; box-sizing: border-box; }
.pantalla-acceso .cabecera-dtll { width: 100%; max-width: 1128px; box-sizing: border-box; }   /* el ancho de siempre: 1080 + 48 de relleno */
.acceso-cuerpo > .aviso-error, .acceso-cuerpo > .aviso-ok { grid-column: 1 / -1; justify-self: center; }   /* el aviso, a todo el ancho */
.acceso-figura { width: 100%; max-width: 600px; margin: 0; }
.acceso-img { display: block; width: 100%; height: auto; mix-blend-mode: multiply; }   /* el blanco del dibujo toma el color del fondo */
.acceso-marca { text-align: center; }
.acceso-nombre { font-size: 44px; font-weight: 700; letter-spacing: 10px; text-indent: 10px; text-transform: uppercase; color: var(--ink); margin: 0 0 10px; }
.acceso-lema { font-size: 18px; letter-spacing: 1px; color: var(--brand); margin: 0; }
@media (max-width: 760px) {
  .acceso-cuerpo { grid-template-columns: 1fr; align-content: center; }
}