/* Tanda del 2026-09-30: banners de color con texto marino, selector de color,
   filtros múltiples, estado de carga de las importaciones, barra de editor de
   correo completa, listas de contactos, libro de cargos, programa y registro
   de errores. Mismo sistema «Grafito»: se reutilizan sus tokens. */

:root {
  --marino: #1b2a4a;
  --marino-2: #3a4a6b;
}

/* ------------------------------------------------ banners con color elegido */
/* Sistemas: la fila de familia va con el color de su familia y texto marino */
#tabla-sistemas tr.fila-familia td,
#tabla-sistemas tr.fila-familia:hover td {
  background: var(--base, var(--relleno)); color: var(--marino);
  box-shadow: inset 4px 0 0 var(--contorno);
}
#tabla-sistemas tr.fila-familia .cap { color: var(--marino); opacity: .75; }
#tabla-sistemas tr.fila-familia .n { color: var(--marino-2); }

/* Pendientes: la cabecera de cada sistema con el color del sistema */
.grupo-sistema-cab {
  background: var(--base, var(--marco)); color: var(--marino);
  box-shadow: inset 4px 0 0 var(--contorno);
}
.grupo-sistema-cab .cod, .grupo-sistema-cab .nom { color: var(--marino); }
.grupo-sistema-cab .nota { color: var(--marino-2); }

/* Ofertas agrupadas: banner de familia de cargo o de equipo */
.tabla-agrupada tr.fila-banda td,
.tabla-agrupada tr.fila-banda:hover td {
  background: var(--base, var(--relleno)); color: var(--marino); padding: 7px 12px;
  box-shadow: inset 4px 0 0 var(--contorno); font: 600 12px var(--cuerpo);
}
.tabla-agrupada tr.fila-banda .cap { font: 600 11.5px var(--mono); margin-right: 10px; opacity: .75; }
.tabla-agrupada tr.fila-banda .n { float: right; font-weight: 400; color: var(--marino-2); }
td.acciones-oferta, td.sis-oferta { white-space: nowrap; }
td.acciones-oferta .btn + .btn { margin-left: 5px; }

.cuadro-color {
  display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; vertical-align: -1px;
  background: var(--base); box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--contorno) 55%, transparent);
}

/* muestra de cómo queda un banner (diálogo de sistema y de capítulo) */
.banda-muestra {
  display: flex; align-items: center; gap: 10px; margin-top: 10px; padding: 9px 14px;
  border-radius: var(--r); background: var(--base, var(--cabecera-tabla)); color: var(--marino);
  box-shadow: inset 4px 0 0 var(--contorno, var(--borde-control));
}
.banda-muestra .cod { font: 600 12.5px var(--mono); }
.banda-muestra .nom { font: 600 13px var(--cuerpo); }

/* ------------------------------------------------------- selector de color */
.selector-color { display: grid; gap: 8px; width: 280px; }
.selector-color.apagado { opacity: .45; pointer-events: none; }
.sc-envoltorio { position: relative; line-height: 0; }
.sc-mapa { width: 280px; height: 140px; border-radius: var(--r-sm); cursor: crosshair; box-shadow: inset 0 0 0 1px var(--divisor); }
.sc-tono { width: 280px; height: 12px; border-radius: 999px; cursor: ew-resize; }
.sc-marca {
  position: absolute; width: 14px; height: 14px; border-radius: 50%; transform: translate(-50%, -50%);
  border: 2px solid #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3); pointer-events: none;
}
.sc-marca-tono {
  position: absolute; top: 50%; width: 6px; height: 16px; border-radius: 3px; transform: translate(-50%, -50%);
  background: #fff; box-shadow: 0 0 0 1px rgba(0, 0, 0, .4); pointer-events: none;
}
.sc-valores { display: grid; grid-template-columns: repeat(3, 1fr) 1.6fr; gap: 6px; }
.sc-campo { display: flex; align-items: center; gap: 4px; margin: 0; font: 500 11px var(--mono); color: var(--texto-3); }
.sc-campo input { margin: 0; padding: 4px 5px; font: 400 12px var(--mono); min-width: 0; width: 100%; -moz-appearance: textfield; }
.sc-campo input::-webkit-outer-spin-button, .sc-campo input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sc-campo.hex input { text-transform: lowercase; }

/* diálogo de sistema: datos a la izquierda, colores en uso a la derecha */
dialog.dialogo-color { width: min(860px, 94vw); height: min(88vh, 720px); }
dialog.dialogo-color form { display: flex; flex-direction: column; height: 100%; min-height: 0; }
.sis-dos { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); }
.sis-dos > .cuerpo { overflow: auto; border-right: 1px solid var(--divisor); padding-bottom: 14px; }
.sis-rot-color { display: flex; align-items: center; gap: 12px; margin: 4px 0 8px; }
.sis-rot-color .casilla { font: 400 12px var(--cuerpo); text-transform: none; letter-spacing: 0; }
.sis-colores { min-height: 0; overflow: auto; padding: 14px 16px; background: var(--fila-suave); display: flex; flex-direction: column; gap: 8px; }
.colores-uso { display: grid; gap: 4px; }
.uso-familia {
  display: flex; gap: 8px; align-items: center; margin-top: 6px; padding: 4px 8px; border-radius: var(--r-xs);
  background: var(--base); color: var(--marino); font: 600 11.5px var(--cuerpo);
}
.uso-familia .cap { font-family: var(--mono); opacity: .75; }
.uso-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 4px; }
.uso-color {
  display: flex; align-items: center; gap: 6px; padding: 3px 7px; border: 1px solid var(--divisor); border-radius: var(--r-xs);
  background: var(--panel); cursor: pointer; font: 500 11.5px var(--mono); color: var(--texto-2); text-align: left;
}
.uso-color:hover { border-color: var(--acento-300); }
.uso-color.propio { border-color: var(--tinta-ui); }
.uso-color .hex { margin-left: auto; font-size: 10.5px; color: var(--texto-3); }

/* -------------------------------------------------- buscador y filtros */
.barra-filtros {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px 14px; margin-bottom: 16px;
  background: var(--panel); border: 1px solid var(--divisor); border-radius: var(--r); box-shadow: var(--sombra-panel);
}
.barra-filtros .entrada-busqueda { width: 300px; margin: 0; }
.filtros-multiples { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.barra-filtros > .nota { margin-left: auto; }
.filtro-multiple { position: relative; }
.filtro-boton { display: inline-flex; align-items: center; gap: 6px; }
.filtro-boton .caret { font-size: 9px; opacity: .6; }
.filtro-boton.activo { box-shadow: inset 0 0 0 1.5px var(--acento); }
.filtro-n { font: 600 10.5px var(--mono); background: var(--acento); color: #fff; border-radius: 999px; padding: 0 6px; }
.filtro-panel {
  position: absolute; top: calc(100% + 6px); left: 0; z-index: 30; width: 280px; max-height: 360px; overflow: auto;
  background: var(--panel); border: 1px solid var(--divisor); border-radius: var(--r); box-shadow: var(--sombra); padding: 8px 10px;
}
.filtro-cab { display: flex; align-items: center; gap: 10px; padding-bottom: 6px; margin-bottom: 6px; border-bottom: 1px solid var(--divisor); }
.filtro-cab .rotulo { flex: 1; }
.enlace { background: none; border: 0; padding: 0; color: var(--acento-700); font: 500 11.5px var(--cuerpo); cursor: pointer; }
.enlace:hover { text-decoration: underline; text-underline-offset: 2px; }
.filtro-lista { display: grid; gap: 3px; }
.filtro-lista .casilla { align-items: center; padding: 2px 0; }
.filtro-lista .casilla span:first-of-type { flex: 1; }
.filtro-grupo { font: 600 10.5px var(--cuerpo); color: var(--texto-3); text-transform: uppercase; letter-spacing: .04em; margin-top: 6px; }

/* ------------------------------------------------ estado de carga */
.carga { flex: none; padding: 12px 16px 10px; border-bottom: 1px solid var(--divisor); background: var(--fila-suave); }
.carga-txt { display: flex; justify-content: space-between; gap: 12px; font: 500 12px var(--cuerpo); color: var(--texto-2); margin-bottom: 7px; }
.carga-txt .mono { font-size: 11.5px; color: var(--texto-3); }
.carga-pista { height: 6px; border-radius: 999px; background: var(--pista); overflow: hidden; }
.carga-pista i { display: block; height: 100%; width: 0; border-radius: 999px; background: var(--acento); }
.carga-pista i.indeterminada { width: 35% !important; animation: carga-ir 1.1s ease-in-out infinite; }
@keyframes carga-ir { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
@media (prefers-reduced-motion: reduce) { .carga-pista i.indeterminada { animation: none; } }
.imp-resumen { grid-template-columns: repeat(5, 1fr); }

/* ------------------------------------------------ barra del editor */
.firma-herramientas { gap: 3px; }
.firma-herramientas .he-boton { display: inline-flex; align-items: center; justify-content: center; gap: 5px; min-width: 28px; height: 27px; padding: 0 7px; }
.he-boton svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.he-sep { width: 1px; height: 18px; background: var(--divisor); margin: 0 4px; }
.he-select { width: auto; height: 27px; margin: 0; padding: 2px 6px; font: 500 12px var(--cuerpo); }
.he-color {
  position: relative; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 27px; margin: 0;
  border: 1px solid var(--borde-control); border-radius: var(--r-xs); background: var(--panel); cursor: pointer;
}
.he-color .he-letra { font: 700 13px var(--cuerpo); color: var(--texto-2); pointer-events: none; }
.he-color input { position: absolute; left: 3px; right: 3px; bottom: 2px; height: 4px; width: auto; padding: 0; border: 0; cursor: pointer; }
.he-color input::-webkit-color-swatch-wrapper { padding: 0; }
.he-color input::-webkit-color-swatch { border: 0; border-radius: 1px; }
.he-color:has(input:disabled) { opacity: .45; cursor: default; }
.firma-herramientas .red-importante { margin-left: auto; }

/* Pendientes › Revisar: CC, CCO, adjuntos y el texto en editor enriquecido */
.env-campos { padding: 0 0 2px; margin: -6px 0 8px; border-bottom: 0; }
.env-campos .red-fila button { flex: none; }
#dlg-envio .red-fila input[readonly] { background: transparent; color: var(--texto-2); }
.env-adjuntos { margin: 0 0 8px; border: 1px solid var(--divisor); border-radius: var(--r-sm); padding: 7px 10px; align-items: center; }
.env-adjuntos .rotulo { margin-right: 4px; }
#env-herramientas { padding: 6px 8px; border: 1px solid var(--borde-control); border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0; background: var(--fila-suave); }
#env-editor { flex: 1; min-height: 200px; width: 100%; border: 1px solid var(--borde-control); border-radius: 0 0 var(--r-sm) var(--r-sm); background: #fff; }
#dlg-envio:not(.editando) #env-editor { background: var(--fila-suave); }
#dlg-envio .env-editor > .nota { margin: 8px 0 0; }
.red-fila .btn.mini { flex: none; }

/* ------------------------------------------------ diálogos medianos */
dialog.dialogo-medio { width: min(640px, 94vw); height: fit-content; max-height: 90vh; }
dialog.dialogo-medio form { display: flex; flex-direction: column; min-height: 0; }
dialog.dialogo-medio .cuerpo { overflow: auto; }
dialog.dialogo-medio textarea {
  width: 100%; margin-top: 5px; resize: vertical; font: 400 12.5px/1.5 var(--cuerpo); color: var(--texto);
  padding: 8px 10px; border: 1px solid var(--borde-control); border-radius: var(--r-sm); background: var(--panel);
}
#dlg-listas-elegir { height: 80vh; }
#dlg-importar { height: 86vh; }
#dlg-copias .segmentado.compacto { width: 320px; margin-bottom: 10px; }
#dlg-copias label .grupo-btn { float: right; }

/* ------------------------------------------------ proveedores */
#tabla-proveedores tr.de-baja td { color: var(--texto-3); }
#tabla-proveedores tr.de-baja .etiqueta { margin-left: 6px; }
.prov-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* ------------------------------------------------ Varios: pestañas en dos líneas si no caben */
.pestanas { flex-wrap: wrap; }

/* ------------------------------------------------ listas de contactos */
.listas-contactos { display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 16px; align-items: start; }
.listas-archivadas { padding: 8px 16px 0; }
.listas-indice { padding: 6px 8px 10px; display: grid; gap: 2px; }
.listas-cat { padding: 8px 8px 2px; }
.lista-item {
  display: grid; gap: 1px; text-align: left; padding: 7px 10px; border: 0; border-radius: var(--r-sm); background: none; cursor: pointer;
}
.lista-item:hover { background: var(--cabecera-tabla); }
.lista-item.activa { background: var(--acento-100); box-shadow: inset 2px 0 0 var(--acento); }
.lista-item.archivada .nom { color: var(--texto-3); text-decoration: line-through; }
.lista-item .nom { font: 500 12.5px var(--cuerpo); color: var(--texto); }
.lista-item .nota { font-size: 11px; }
.panel-lista.editando #lista-ficha { background: linear-gradient(var(--acento-100), transparent 70px); }
#lista-ficha textarea {
  width: 100%; margin-top: 5px; resize: vertical; font: 400 12.5px/1.5 var(--cuerpo);
  padding: 8px 10px; border: 1px solid var(--borde-control); border-radius: var(--r-sm); background: var(--panel);
}
#lista-ficha textarea[readonly] { background: var(--fila-suave); color: var(--texto-2); }
#lista-ficha select:disabled { background: var(--fila-suave); color: var(--texto-2); opacity: 1; }
#lista-ficha > .rotulo { margin: 10px 0 6px; }
.lista-equipos-elegidos { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.lista-equipos-elegidos select { width: 230px; margin: 0; }
.lista-equipos-elegidos .ficha-equipo { background: var(--base); color: var(--marino); border-color: transparent; display: inline-flex; gap: 5px; align-items: center; }
.lista-contactos { display: grid; gap: 4px; margin-bottom: 8px; }
.contacto-fila { display: grid; grid-template-columns: 1fr 1.3fr 1fr auto; gap: 6px; align-items: center; }
.contacto-fila input { margin: 0; }
.contacto-fila.cab .rotulo { padding-left: 2px; }

/* selector de listas */
.le-barra { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--divisor); }
.le-barra .entrada-busqueda { width: 280px; margin: 0; }
.le-lista { border: 1px solid var(--divisor); border-radius: var(--r); padding: 8px 12px; margin-bottom: 10px; display: grid; gap: 3px; }
.le-lista.no-encaja { opacity: .7; }
.le-cab { align-items: center; padding-bottom: 5px; margin-bottom: 3px; border-bottom: 1px solid var(--divisor); }
.le-cab .nom { font: 600 12.5px var(--cuerpo); }
.le-contacto { align-items: center; padding-left: 20px; }
.le-contacto .mono { font-size: 11.5px; }

/* ------------------------------------------------ libro de cargos */
.libro-editor { padding: 6px 16px 16px; }
.libro-aviso { margin: 8px 0; }
.libro-cap {
  display: flex; align-items: center; gap: 10px; margin-top: 14px; padding: 8px 12px; border-radius: var(--r);
  background: var(--base); color: var(--marino); box-shadow: inset 4px 0 0 var(--contorno); font: 600 12.5px var(--cuerpo);
}
.libro-cap .cap { font: 600 12px var(--mono); opacity: .75; }
.libro-cap .nom { flex: 1; }
.libro-cap .n { font-weight: 400; color: var(--marino-2); }
.libro-cap { cursor: pointer; user-select: none; }
.libro-cap .caret { font-size: 10px; width: 12px; transition: transform .15s ease; }
.libro-cap.abierto .caret { transform: rotate(90deg); }
.libro-grupo { display: flex; align-items: center; gap: 10px; padding: 8px 12px 4px 16px; font: 600 12px var(--cuerpo); color: var(--texto); }
.libro-grupo .nom { flex: 1; }
.libro-grupo .cod { color: var(--texto-3); }
.libro-cargo {
  display: grid; grid-template-columns: 44px minmax(0, 1fr) auto auto auto; gap: 10px; align-items: center;
  padding: 4px 12px 4px 30px; border-bottom: 1px solid var(--divisor); font-size: 12.5px;
}
.libro-cargo:hover { background: var(--fila-suave); }
.libro-cargo .cod { color: var(--texto-2); }
.libro-cargo.archivado .nom, .libro-cargo.archivado .cod { color: var(--texto-3); text-decoration: line-through; }
.libro-cargo .grupo-btn { justify-content: flex-end; }

.lb-serie { margin: 4px 0 14px; }

/* ------------------------------------------------ programa */
.programa-fila { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 20px; align-items: center; padding: 12px 0; border-bottom: 1px solid var(--divisor); }
.programa-fila:last-child { border-bottom: 0; }
.programa-fila .nota { margin: 3px 0 0; }
.programa-fila .segmentado.compacto { width: 420px; margin: 0; }
.programa-fila input { margin: 0; }
.panel-programa.editando .cuerpo { background: linear-gradient(var(--acento-100), transparent 70px); }

/* ------------------------------------------------ registro de errores */
#tabla-errores tr.con-detalle { cursor: pointer; }
#tabla-errores tr.resuelto td { color: var(--texto-3); }
#tabla-errores td.texto { white-space: normal; min-width: 280px; }
.traza-error {
  margin: 4px 0 8px; padding: 10px 12px; max-height: 260px; overflow: auto; white-space: pre-wrap;
  background: var(--fila-suave); border: 1px solid var(--divisor); border-radius: var(--r-sm); font: 400 11.5px/1.5 var(--mono);
}

/* correo de petición sin destinatario: no sale hasta tenerlo */
.envio .falta-email { color: var(--rojo-txt); font: 600 11.5px var(--cuerpo); }
#env-para.falta { box-shadow: inset 0 0 0 1.5px var(--rojo-borde); background: var(--rojo-fondo); }
.pct-imputa { margin-left: auto; font-size: 12px; color: var(--texto-2); }

/* aviso de fallos sin resolver en la barra de estado */
.chip-fallos {
  flex: none; margin-left: 12px; padding: 1px 10px; border-radius: 999px; cursor: pointer;
  border: 1px solid #7a2a24; background: #3a1714; color: #f5b5ae; font: 500 11px var(--cuerpo);
}
.chip-fallos::before { content: "●"; margin-right: 6px; color: #f0564a; }
.chip-fallos:hover { background: #4a1d19; }
.chip-fallos.nuevo { animation: fallo-nuevo 1.2s ease 3; }
@keyframes fallo-nuevo { 50% { background: #b42318; color: #fff; } }
@media (prefers-reduced-motion: reduce) { .chip-fallos.nuevo { animation: none; } }

/* libro de cargos en tres niveles, con «qué entra» */
.libro-cap .nivel, .libro-grupo .nivel { font: 500 10px var(--cuerpo); text-transform: uppercase; letter-spacing: .05em; opacity: .6; }
.libro-cap .btn { flex: none; }
.libro-desc { white-space: pre-wrap; font-size: 12px; line-height: 1.5; color: var(--texto-2); }
.libro-desc.de-capitulo { margin: 8px 12px 2px 16px; padding: 8px 12px; background: var(--fila-suave); border-radius: var(--r-sm); }
.libro-desc.de-grupo { margin: 0 12px 4px 16px; padding-left: 12px; border-left: 2px solid var(--divisor); }
.libro-cargo { grid-template-columns: 52px minmax(0, 1fr) auto auto auto; }
.libro-cargo .txt { display: grid; gap: 1px; min-width: 0; }
.libro-cargo .txt .desc { font-size: 11.5px; color: var(--texto-3); white-space: pre-wrap; }
.libro-cargo.resaltado, .libro-grupo.resaltado { background: var(--acento-100); box-shadow: inset 3px 0 0 var(--acento); }
.libro-vacio { margin: 4px 12px 4px 30px; text-align: left; }
.libro-buscar { display: flex; align-items: center; gap: 12px; padding: 12px 16px 4px; }
.libro-buscar .entrada-busqueda { flex: 1; margin: 0; }
.libro-resultados { margin: 6px 16px 4px; display: grid; gap: 4px; max-height: 320px; overflow: auto; }
.libro-hit {
  display: grid; grid-template-columns: 92px 64px minmax(0, 1fr) auto; column-gap: 10px; row-gap: 2px; align-items: baseline;
  text-align: left; padding: 7px 10px; border: 1px solid var(--divisor); border-radius: var(--r-sm); background: var(--panel); cursor: pointer;
}
.libro-hit:hover { border-color: var(--acento-300); background: var(--acento-100); }
.libro-hit .nivel { font: 500 10.5px var(--cuerpo); text-transform: uppercase; color: var(--texto-3); }
.libro-hit .nom { font: 500 12.5px var(--cuerpo); }
.libro-hit .ruta { font-size: 11px; color: var(--texto-3); }
.libro-hit .desc { grid-column: 3 / 5; font-size: 11.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.codigo-prefijo { display: flex; align-items: center; gap: 6px; margin-top: 5px; }
.codigo-prefijo .prefijo { font-size: 14px; padding: 6px 8px; background: var(--cabecera-tabla); border-radius: var(--r-xs); }
.codigo-prefijo input { width: 56px; margin: 0; text-align: center; font-size: 14px; }
.que-entra { margin: 8px 0 12px; padding: 8px 12px; background: var(--fila-suave); border-radius: var(--r-sm); }
.que-entra p { margin: 4px 0 0; font-size: 12px; line-height: 1.5; white-space: pre-wrap; }
#dlg-libro-importar { height: 80vh; }

/* barra de desplazamiento visible (antes casi blanca sobre blanco) */
/* scroll fino en toda la app (Alex, 2026-10-05: «siempre finitos»), con un gris
   que se vea (2026-09-30: «apenas se ve»). Los marcos (vistas previas) llevan
   lo mismo: ESTILO_SCROLL en app.js */
::-webkit-scrollbar { width: 7px; height: 7px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #9aa0a9; border-radius: 4px; min-height: 32px; }
::-webkit-scrollbar-thumb:hover { background: #6b717b; }
::-webkit-scrollbar-thumb:active { background: var(--tinta-ui); }
::-webkit-scrollbar-corner { background: transparent; }
.lateral ::-webkit-scrollbar-track, .barra-superior ::-webkit-scrollbar-track { background: transparent; }
.lateral ::-webkit-scrollbar-thumb { background: #4a4f58; background-clip: content-box; }
.lateral ::-webkit-scrollbar-thumb:hover { background: #6d727c; background-clip: content-box; }

/* avisos y preguntas con el diseño de la app (sustituyen a confirm/prompt de Windows) */
dialog.dialogo-aviso { width: min(480px, 92vw); height: fit-content; max-height: 80vh; }
.dialogo-aviso .visor-cabecera h3 { font-size: 14px; }
.aviso-cuerpo { padding: 16px 18px 6px; overflow: auto; }
.aviso-cuerpo p { margin: 0 0 10px; font-size: 13px; line-height: 1.55; color: var(--texto); }
.aviso-cuerpo input, .aviso-cuerpo textarea {
  width: 100%; margin: 2px 0 10px; font: 400 13px/1.5 var(--cuerpo); padding: 8px 10px;
  border: 1px solid var(--borde-control); border-radius: var(--r-sm); background: var(--panel); resize: vertical;
}
.aviso-cuerpo textarea:focus { outline: 0; border-color: var(--acento); box-shadow: var(--anillo); }
.dialogo-aviso .previa-pie { gap: 8px; }
.dialogo-aviso .previa-pie > span { flex: 1; }
.btn.primario.peligro { background: linear-gradient(180deg, #c8372c, #a82318); box-shadow: 0 1px 2px rgb(120 20 12 / .35); }
.btn.primario.peligro:hover:not(:disabled) { background: linear-gradient(180deg, #b42318, #911b12); }

/* conectar con Microsoft 365 por código */
.codigo-grande { margin: 6px 0 14px; padding: 14px; text-align: center; font-size: 28px; font-weight: 600;
  letter-spacing: .18em; background: var(--fila-suave); border: 1px dashed var(--borde-control); border-radius: var(--r); user-select: all; }
.codigo-estado.malo { color: var(--rojo-txt); }

/* Varios: bloques que comparten pestaña (Correo y almacén, Plantillas y firma, Programa y asunto) */
#v-bd-varios .pestana.activa ~ .pestana.activa { margin-top: 18px; }

/* padrón: barra con buscador y filtros múltiples, sin partir los botones */
.barra-padron { flex-wrap: wrap; row-gap: 8px; column-gap: 14px; }
.barra-padron .entrada-busqueda { width: 320px; }
.barra-padron .btn, .barra-padron .casilla, .barra-padron .nota { white-space: nowrap; }

/* proveedor dado de baja: aviso bajo las notas con la vuelta al padrón */
.prov-baja-aviso { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 14px; padding: 10px 12px; border: 1px solid #e4b4ae; border-radius: 8px;
  background: #fbefed; color: #8a2016; font: 600 12.5px var(--cuerpo); }
.pregunta-reparto { margin: 0 0 8px; font-weight: 600; font-size: 12.5px; color: var(--texto); }

/* banner lleno de familia de cargo: Resumen › Buques y sistemas, Peticiones */
.banner-familia {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 2px; padding: 6px 10px;
  border-radius: var(--r-sm); background: var(--base, var(--relleno)); color: var(--marino);
  box-shadow: inset 4px 0 0 var(--contorno); font: 600 12px var(--cuerpo);
}
.banner-familia:first-child { margin-top: 4px; }
.banner-familia .cap { font: 600 11.5px var(--mono); opacity: .75; }
.banner-familia .n { margin-left: auto; font-weight: 400; color: var(--marino-2); }
tr.fila-banner td, tr.fila-banner:hover td { padding: 4px 8px 2px; background: transparent; border-bottom: 0; }
tr.fila-banner .banner-familia { margin: 6px 0 0; }

/* Varios › Registros: fallos · IT · actividad */
.registros-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.registros-barra .segmentado { width: 320px; margin: 0; }
.pestana[data-pestana="errores"] > .panel[hidden] { display: none; }
.reg-buscar { width: 220px; margin: 0; }
.reg-csv, #btn-errores-csv { white-space: nowrap; }
#tabla-reg-it td:first-child, #tabla-reg-trabajo td:first-child, #tabla-reg-it td:nth-child(2), #tabla-reg-trabajo td:nth-child(2) { white-space: nowrap; }
tr.fila-aviso td { color: var(--rojo-txt-2); }

/* Resumen › Carpetas por buque: reflejo de la carpeta de cada buque */
.carpetas-buque { padding: 0 12px 8px 26px; }
.carpeta { border-bottom: 1px solid var(--divisor); }
.carpeta:last-child { border-bottom: 0; }
.carpeta-fila {
  display: grid; grid-template-columns: 10px 16px minmax(0, 1fr) auto auto auto; align-items: center; gap: 8px;
  padding: 5px 0; cursor: pointer; font: 400 12px var(--cuerpo);
}
.carpeta-fila:hover { background: var(--fila-suave); }
.carpeta-fila .caret { font-size: 9px; color: var(--texto-3); }
.carpeta-fila .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.carpeta-fila .n { color: var(--texto-3); font-size: 11.5px; white-space: nowrap; }
.carpeta.del-programa .nombre { color: var(--texto-2); }
.icono-carpeta { width: 14px; height: 11px; border-radius: 2px; background: #c9a24a; position: relative; }
.icono-carpeta::before { content: ""; position: absolute; left: 0; top: -2px; width: 6px; height: 3px; border-radius: 1px 1px 0 0; background: #c9a24a; }
.carpeta.del-programa .icono-carpeta, .carpeta.del-programa .icono-carpeta::before { background: #8a94a6; }
.carpeta-archivos { padding: 0 0 6px 34px; }
.carpeta-archivos[hidden] { display: none; }
.archivo-fila {
  display: grid; grid-template-columns: minmax(0, 1fr) auto auto auto; align-items: center; gap: 10px;
  padding: 3px 0; border-top: 1px dashed var(--divisor); font: 400 11.5px var(--mono);
}
.archivo-fila .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.archivo-fila .mod, .archivo-fila .tam { color: var(--texto-3); white-space: nowrap; }

/* Correo: confirmación de lectura (pedirla al escribir, enviarla al leer) */
.firma-herramientas .red-confirmacion { margin-left: 14px; font-size: 12px; }
.aviso-confirmacion {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 0 16px 10px;
  padding: 8px 12px; border: 1px solid var(--ambar-borde, #e2c27a); border-radius: var(--r-sm);
  background: #fdf6e6; font: 400 12.5px var(--cuerpo); color: #6b4e0f;
}
.aviso-confirmacion.hecha { border-color: var(--divisor); background: var(--fila-suave); color: var(--texto-3); }

/* Nuevo correo › HTML: código y cómo se verá, lado a lado */
.red-html { flex: 1; display: grid; grid-template-columns: 1fr 1fr; min-height: 0; border-top: 1px solid var(--divisor); }
.red-html[hidden], #red-editor[hidden] { display: none; }
.red-html textarea {
  margin: 0; border: 0; border-right: 1px solid var(--divisor); border-radius: 0; resize: none; padding: 12px 14px;
  font: 400 12px/1.5 var(--mono); background: var(--fila-suave); color: var(--texto); outline: 0;
}
.red-html-previa { display: flex; flex-direction: column; min-height: 0; }
.red-html-previa .rotulo { padding: 6px 14px; border-bottom: 1px solid var(--divisor); }
.red-html-previa iframe { flex: 1; width: 100%; border: 0; background: #fff; }
.he-boton.activo { background: var(--texto); color: #fff; }

/* Correo › Insertar paquete técnico */
.insertar-paquete { width: min(620px, 92vw); }
.ip-cab { display: flex; align-items: center; justify-content: space-between; margin: 12px 0 4px; }
.ip-lista { max-height: 46vh; overflow-y: auto; border: 1px solid var(--divisor); border-radius: var(--r-sm); padding: 4px 8px; }
.ip-trozo { display: flex; gap: 8px; align-items: baseline; padding: 4px 0; border-bottom: 1px solid var(--divisor); font-size: 12px; }
.ip-trozo:last-child { border-bottom: 0; }
.ip-trozo .cod { font: 500 11.5px var(--mono); flex: none; }
.aviso-confirmacion .grupo-btn { flex: none; }
.aviso-confirmacion .btn { white-space: nowrap; }

/* Modo de correo: borrador o envío real */
.modo-correo { width: min(560px, 92vw); }
.mc-opcion {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; margin-bottom: 8px; cursor: pointer;
  border: 1px solid var(--borde-control); border-radius: var(--r-sm); font: 400 12.5px/1.45 var(--cuerpo);
}
.mc-opcion:has(input:checked) { border-color: var(--texto); background: var(--fila-suave); }
.mc-opcion:has(input:disabled) { cursor: default; }
.mc-opcion input { width: auto; margin: 3px 0 0; }
.mc-opcion b { display: block; font-weight: 600; margin-bottom: 2px; }
.nota.malo { color: var(--rojo-txt-2); }

/* filtro múltiple con muchas opciones: buscador dentro del desplegable */
.filtro-busca { margin: 0 0 6px; width: 100%; }
.filtro-lista .casilla[hidden], .filtro-grupo[hidden] { display: none; }

/* Listas de contactos: color de banner (CC / CCO) */
.lista-item { box-shadow: inset 4px 0 0 var(--color-lista, transparent); }
.lista-item.activa { box-shadow: inset 4px 0 0 var(--color-lista, var(--acento)); }
.banner-lista { display: flex; align-items: center; justify-content: space-between; padding: 7px 12px;
  border-radius: var(--r-sm); font: 600 12.5px var(--cuerpo); margin: 6px 0 8px; }
.banner-lista .n { font-weight: 400; opacity: .85; }
.color-lista { margin: 8px 0 4px; }
.color-lista .enlace { margin: 6px 0; }
.le-cab { padding: 6px 10px; margin: -8px -12px 4px; border-radius: var(--r) var(--r) 0 0; border-bottom: 0; }
.le-cab .nota { color: inherit; opacity: .85; }
.le-cab .etiqueta { background: rgba(255,255,255,.85); color: #16181d; }

/* Paquete técnico › Equipment a solicitar y Remarks del buque */
.paq-equipos { margin: 14px 0 16px; padding: 12px 14px; border: 1px solid var(--divisor); border-radius: var(--r); background: var(--fila-suave); }
.paq-equipos[hidden], .paq-remarks[hidden] { display: none; }
.paq-eq-titulo { font: 600 13px var(--cuerpo); margin-bottom: 8px; }
.paq-eq-cols, .rm-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.paq-eq-cab, .rm-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
.paq-eq-col textarea, .rm-col textarea { width: 100%; margin: 0; resize: vertical; font: 400 12.5px/1.5 var(--cuerpo); }
.estado-guardado { font-size: 11px; white-space: nowrap; }
.estado-guardado.malo, .rm-huecos.malo { color: var(--rojo-txt-2); }
/* Remarks del buque: no es un sistema, se distingue con color propio (ámbar) */
.remarks-item { margin-bottom: 8px; background: var(--ambar-fondo); color: var(--ambar-txt);
  box-shadow: inset 3px 0 0 var(--ambar-borde); border-bottom: 1px solid var(--ambar-borde); }
.remarks-item:hover { background: color-mix(in oklab, var(--ambar-fondo) 70%, var(--ambar-borde)); color: var(--ambar-txt); }
.remarks-item.activo { background: color-mix(in oklab, var(--ambar-fondo) 55%, var(--ambar-borde)); color: var(--ambar-txt);
  box-shadow: inset 3px 0 0 var(--ambar-txt); }
.icono-remarks { width: 14px; text-align: center; font-weight: 700; color: var(--ambar-txt); }
.rm-desc { display: grid; gap: 3px; margin-bottom: 8px; }
.rm-desc input { margin: 0; }
.rm-barra { display: flex; align-items: center; gap: 8px; margin-bottom: 4px; }
.rm-barra .btn { margin-left: auto; }
.rm-huecos { display: block; margin-top: 4px; }
.rm-buscar { margin-top: 16px; border-top: 1px solid var(--divisor); padding-top: 12px; }

.dialogo-buque { width: min(520px, 92vw); }
.dialogo-buque label { display: grid; gap: 3px; margin-bottom: 10px; font: 500 12px var(--cuerpo); }
.dialogo-buque input { margin: 0; }

/* Ofertas › Añadir oferta y caducidad */
.anadir-oferta { width: min(1560px, 96vw); height: 92vh; padding: 0; }
.anadir-oferta[open] { display: flex; flex-direction: column; }
.anadir-oferta h3 .nota { font-weight: 400; margin-left: 8px; color: var(--marco-texto, #c9ccd3); }
.ao-cuerpo { flex: 1; min-height: 0; display: grid; grid-template-columns: 400px 1fr; }
.ao-izq { min-height: 0; display: grid; grid-template-rows: minmax(160px, 2fr) minmax(0, 3fr); border-right: 3px solid var(--primario); }
.ao-correos { min-height: 0; display: flex; flex-direction: column; border-bottom: 3px solid var(--primario); }
.ao-visor { min-width: 0; min-height: 0; display: flex; flex-direction: column; background: var(--fila-suave); }
.ao-pestanas { flex: none; display: flex; gap: 4px; padding: 8px 10px 0; border-bottom: 2px solid var(--acento-900); overflow-x: auto; }
.ao-pestana { padding: 6px 12px; border: 1px solid transparent; border-bottom: 0; border-radius: var(--r-sm) var(--r-sm) 0 0;
  background: none; font: 500 12px var(--cuerpo); color: var(--texto-2); cursor: pointer; white-space: nowrap; max-width: 260px;
  overflow: hidden; text-overflow: ellipsis; }
.ao-pestana:hover { color: var(--texto); }
.ao-pestana.activa { background: var(--acento-900); border-color: var(--acento-900); color: #fff; }
.ao-pestana.activa:hover { color: #fff; }
.ao-vista { flex: 1; min-height: 0; display: flex; flex-direction: column; background: var(--panel); }
.ao-vista > .vacio { margin: auto; }
.ao-vista .lectura-cuerpo { flex: 1; min-height: 0; }
.ao-vista .vo-pdf, .ao-vista .adjunto-imagen, .ao-vista .adjunto-texto { flex: 1; min-height: 0; overflow: auto; }
.ao-subir { flex: none; margin: 8px 8px 0; padding: 9px 10px; border: 1px dashed var(--borde-control); border-radius: var(--r-sm);
  font-size: 12px; color: var(--texto-2); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.ao-subir:hover, .ao-subir.encima { border-color: var(--acento); background: var(--acento-100); color: var(--acento-800); }
.ao-lista { flex: 1; min-height: 0; overflow-y: auto; padding: 8px; display: grid; align-content: start; gap: 6px; }
.ao-correo { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; text-align: left; padding: 8px 10px;
  border: 1px solid var(--divisor); border-radius: var(--r-sm); background: var(--panel); cursor: pointer; font: 400 12px var(--cuerpo); }
.ao-correo:hover { background: var(--fila-suave); }
.ao-correo.activo { border-color: var(--acento); box-shadow: inset 3px 0 0 var(--acento); background: var(--acento-100); }
.ao-correo .de { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-correo .fecha, .ao-correo .pie { color: var(--texto-3); font-size: 11px; }
.ao-correo .asunto, .ao-correo .pie { grid-column: 1 / -1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ao-correo .pie { font-family: var(--mono); }
.ao-form { overflow-y: auto; padding: 14px 18px; }
.ao-form label { display: grid; gap: 3px; margin-bottom: 10px; font: 500 12px var(--cuerpo); }
.ao-form select, .ao-form input { margin: 0; }
.ao-cab { padding: 10px 12px; margin-bottom: 14px; border-radius: var(--r-sm); background: var(--fila-suave); display: grid; gap: 4px; }
.ao-cab .asunto { font: 600 13px var(--cuerpo); }
.ao-extracto { font-size: 12px; color: var(--texto-2); border-top: 1px solid var(--divisor); padding-top: 6px; }
.ao-caduca.malo, #ao-error { color: var(--rojo-txt-2); }
td.validez .caduca { font-size: 10.5px; color: var(--texto-3); white-space: nowrap; }
td.validez .caduca.caducada { color: var(--rojo-txt-2); font-weight: 600; }
tr.oferta-caducada td { background: color-mix(in oklab, #fbefed 60%, transparent); }
.ao-correo .origen { grid-column: 1 / -1; justify-self: start; font: 500 10px var(--cuerpo); text-transform: uppercase; letter-spacing: .04em; color: var(--texto-3); }

/* Varios › Filtros del buzón común */
#filtros-buzon .programa-fila { padding-top: 0; grid-template-columns: 1fr; gap: 10px; }   /* primero el texto, luego el toggle */
#filtros-buzon .programa-fila .segmentado.compacto { width: min(420px, 100%); }
#filtros-buzon .filtros-rotulo { margin-top: 12px; }
.filtros-lista { display: grid; gap: 2px; margin-top: 4px; }
.filtro-fila { display: grid; grid-template-columns: 220px 1fr; gap: 10px; padding: 4px 0; border-bottom: 1px solid var(--divisor); font-size: 12px; }
.filtro-fila .mono { font-size: 11.5px; color: var(--texto-2); }
#correo-filtro { margin-left: 8px; }
.casilla.ya-pedido .dest-nom { color: var(--texto-3); }

/* Buques: Editar y Activar en línea, con aire */
td.acciones-buque { white-space: nowrap; }
td.acciones-buque .btn + .btn { margin-left: 6px; }
#dlg-buque-alta { width: min(620px, 92vw); }
#buque-alta-error { color: var(--rojo-txt-2); }

/* Proveedores › Importar: la hoja tal cual y, encima de cada columna, qué es */
.imp-eleccion { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin-bottom: 10px; }
.imp-eleccion select, .imp-eleccion input { margin: 0 0 0 6px; width: auto; }
.imp-eleccion input[type="number"] { width: 70px; }
.imp-hoja-env { overflow: auto; max-height: 52vh; border: 1px solid var(--divisor); border-radius: var(--r-sm); }
.imp-hoja { border-collapse: separate; border-spacing: 0; font: 400 11.5px var(--cuerpo); }
.imp-hoja th { position: sticky; top: 0; background: var(--panel); padding: 4px; border-bottom: 1px solid var(--divisor); }
.imp-hoja th select { margin: 0; min-width: 140px; font-size: 11.5px; }
.imp-hoja th select.usada { border-color: var(--acento); box-shadow: inset 0 0 0 1px var(--acento); }
.imp-hoja td { padding: 3px 8px; border-bottom: 1px solid var(--divisor); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.imp-hoja td.usada { background: var(--acento-100); }
.imp-hoja tr.imp-cabecera td { font-weight: 600; background: var(--fila-suave); }
.imp-hoja tr.imp-fuera td { color: var(--texto-3); }

/* Equipment y Remarks: barra común arriba y los dos idiomas debajo */
.tb-barra { margin: 6px 0 8px; flex-wrap: wrap; }
.tb-barra .tb-partida { margin-left: auto; }
.tb-cuadros { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }   /* un idioma debajo del otro */
.tb-cuadro { display: grid; gap: 4px; }
.tb-cab { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.tb-cuadro textarea { width: 100%; margin: 0; resize: vertical; font: 400 12.5px/1.5 var(--cuerpo); }
.tb-cuadro.activo textarea { border-color: var(--acento); }
.rm-datos { margin-bottom: 18px; padding: 12px 14px; border: 1px solid var(--divisor); border-radius: var(--r); background: var(--fila-suave); }
.rm-rejilla { display: grid; grid-template-columns: 260px 1fr 1fr; gap: 6px 12px; align-items: center; margin: 8px 0 4px; }
.rm-rejilla input { margin: 0; }
.rm-campo-nom { font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Editar → Guardar: bloqueado, con fondo apagado; editando, el tono de las demás zonas */
.tb-botones { display: flex; gap: 6px; }
.rm-cabeza { margin-bottom: 10px; align-items: center; }
.paq-equipos:not(.editando) textarea, .paq-remarks:not(.editando) textarea,
.paq-remarks:not(.editando) .rm-rejilla input { background: var(--fila-suave); }
.paq-equipos.editando, .paq-remarks.editando .rm-datos { border-color: var(--acento-300); background: linear-gradient(var(--acento-100), transparent 70px); }
.btn.peligro:not(.primario) { color: var(--rojo-txt); }
/* Visor de la especificación */
.visor-especificacion { width: min(1200px, 95vw); height: 90vh; padding: 0; }
.visor-especificacion[open] { display: flex; flex-direction: column; }
.vs-barra { display: flex; align-items: center; gap: 8px; padding: 8px 14px; border-bottom: 1px solid var(--divisor); flex-wrap: wrap; }
.vs-barra .entrada-busqueda { width: 340px; margin: 0; }
.vs-acciones { margin-left: auto; }
.vs-acciones select { margin: 0; }
#vs-marco { flex: 1; width: 100%; border: 0; background: #fff; }
/* Varios › Campos del buque */
.campo-fila { display: grid; grid-template-columns: 180px 1fr 1fr 80px; gap: 10px; align-items: center; padding: 4px 0; }
.campo-fila input { margin: 0; }
.campo-fila.cab { border-bottom: 1px solid var(--divisor); }

/* Especificación › Cortes: un desplegable por sistema, plegado de entrada */
button.corte-grupo-cab { width: 100%; border: 0; text-align: left; cursor: pointer; font: inherit; }
button.corte-grupo-cab:hover { filter: brightness(.97); }
.corte-grupo-cab .caret { font-size: 9px; color: var(--texto-3); width: 10px; flex: none; }
.corte-lista[hidden] { display: none; }

/* ================================================================ 2026-10-05 (2) */
/* Peticiones › Destinatarios: cada uno en su fila, nombre entero y debajo país y aviso */
#rfq-proveedores { gap: 0; padding-right: 4px; }
#rfq-proveedores .casilla {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 8px;
  padding: 6px 2px; border-bottom: 1px solid var(--divisor);
}
#rfq-proveedores .casilla:last-child { border-bottom: 0; }
#rfq-proveedores .casilla input { margin-top: 2px; }
#rfq-proveedores .dest-info { display: grid; gap: 3px; min-width: 0; }
#rfq-proveedores .dest-nom { line-height: 1.35; overflow-wrap: anywhere; }
#rfq-proveedores .dest-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
#rfq-proveedores .dest-meta .etiqueta { white-space: nowrap; }
#rfq-proveedores { max-height: 280px; }

/* Pendientes de envío: qué ha salido, qué no y por qué */
.rfq-aviso-envio { margin: 6px 0 2px; padding: 6px 10px; border-radius: var(--r-sm); font-size: 12px;
  background: var(--verde-fondo); color: var(--verde-txt); border: 1px solid var(--verde-borde); }
.rfq-aviso-envio.falta { background: var(--rojo-fondo); color: var(--rojo-txt); border-color: var(--rojo-borde); }
.envio .est.bueno { color: var(--verde-txt); font-weight: 500; }
.envio.enviado .nom { color: var(--texto-2); }