:root {
  --fondo: #faf8f3;
  --superficie: #ffffff;
  --superficie-2: #f6f3ec;
  --borde: #ebe6da;
  --borde-fuerte: #ddd6c6;
  --texto: #1d2521;
  --texto-2: #4a524d;
  --tenue: #8b918c;
  --primario: #1f4d3a;
  --primario-hover: #173b2c;
  --verde-suave: #e8f2eb;
  --verde-fila: #eef5f0;
  --serie-actual: #1e7a52;
  --serie-anterior: #c28a12;
  --bien: #2e9e5b;
  --bien-fondo: #e6f4ec;
  --aviso: #b7790a;
  --aviso-fondo: #fbf1dc;
  --critico: #c2412d;
  --critico-fondo: #fbe8e4;
  --info: #3a6ea5;
  --info-fondo: #e7eff8;
  --neutro-fondo: #f1efe9;
  --oro: linear-gradient(90deg, #FFB200, #F3EC92);
  --logo: linear-gradient(140deg, #4f8ff7 0%, #2563eb 55%, #1d4ed8 100%);
  --radio: 12px;
  --sombra: 0 1px 2px rgba(40, 35, 20, .04), 0 2px 8px rgba(40, 35, 20, .04);
  --fuente: "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --sobre-primario: #ffffff;
  --borde-acento: #cfe3d6;
  --texto-bien: #1f6b3f;
  --texto-aviso: #8a5a05;
  --texto-critico: #a3321f;
  --borde-aviso: #f1d9a6;
  --tooltip-fondo: #1d2521;
  --tooltip-texto: #ffffff;
  --brillo: rgba(235, 230, 218, .6);
  --zona-activa: rgba(30, 122, 82, .06);
  --sombra-sub: 0 1px 3px rgba(40, 35, 20, .05);
  --sombra-dialogo: 0 20px 60px rgba(20, 20, 10, .25);
  --velo: rgba(29, 37, 33, .35);
  color-scheme: light;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.4 var(--fuente);
  -webkit-font-smoothing: antialiased;
}
[hidden] { display: none !important; }
button, input, select { font: inherit; color: inherit; }
h1 { font-size: 20px; font-weight: 700; margin: 0; }

/* ---------- Iconos ---------- */
.icono { display: inline-flex; width: 16px; height: 16px; flex: none; }
.icono svg { width: 100%; height: 100%; }
.icono-grande { width: 36px; height: 36px; color: var(--borde-fuerte); }

/* ---------- Marca ---------- */
.marca { display: flex; align-items: center; gap: 4px; line-height: 1; }
/* Misma marca que el EDM: la "E" del logo es la inicial y el texto sigue la palabra */
.marca-logo { width: 44px; height: 44px; flex: none; display: block; }
.marca-texto {
  font-family: "Unbounded", system-ui, sans-serif; font-weight: 700; font-size: 21px; letter-spacing: -.2px;
  background: linear-gradient(90deg, #FFB200, #F3EC92); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.marca-by { margin: 2px 0 0; font-size: 11px; color: var(--tenue); }
.marca-grande .marca-logo { width: 58px; height: 58px; }
.marca-grande .marca-texto { font-size: 27px; }

/* ---------- Botones ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--borde-fuerte); background: var(--superficie);
  border-radius: 8px; padding: 7px 14px; cursor: pointer; font-weight: 600;
  white-space: nowrap;
}
.btn:hover { background: var(--superficie-2); }
.btn-primario { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.btn-primario:hover { background: var(--primario-hover); }
.btn-primario:disabled { opacity: .6; cursor: default; }
.btn-bloque { width: 100%; justify-content: center; padding: 10px; }
.btn-icono {
  width: 34px; height: 34px; display: grid; place-items: center;
  border: 0; background: none; border-radius: 8px; cursor: pointer; color: var(--texto-2);
}
.btn-icono:hover { background: var(--superficie-2); }
.btn-icono .icono { width: 19px; height: 19px; }
.enlace { border: 0; background: none; color: var(--texto); font-weight: 600; font-size: 13px; cursor: pointer; display: inline-flex; gap: 4px; align-items: center; padding: 2px 4px; }
.enlace:hover { text-decoration: underline; }
.enlace .icono { width: 13px; height: 13px; }
:focus-visible { outline: 2px solid var(--serie-actual); outline-offset: 2px; }

/* ---------- Login ---------- */
.login { min-height: calc(100vh / var(--zoom, 1)); display: grid; place-items: center; padding: 24px 16px; }
.login-card {
  width: 100%; max-width: 380px; background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 16px; padding: 32px 28px; box-shadow: var(--sombra);
}
.login-card h1 { margin-top: 26px; }
.login-sub { color: var(--tenue); margin: 4px 0 20px; }
.campo { display: block; margin-bottom: 14px; }
.campo span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--texto-2); }
.campo input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--fondo);
}
.campo input:focus { outline: none; border-color: var(--serie-actual); box-shadow: 0 0 0 3px var(--verde-suave); }
.login-error { color: var(--critico); min-height: 20px; margin: 0 0 10px; font-size: 14px; }
.login-estado { margin: 18px 0 0; font-size: 13px; color: var(--tenue); display: flex; align-items: center; gap: 6px; justify-content: center; }

.punto { width: 7px; height: 7px; border-radius: 50%; background: var(--tenue); display: inline-block; flex: none; }
.ok .punto, .punto.ok { background: var(--bien); }
.ko .punto { background: var(--critico); }

/* ---------- Cabecera ---------- */
.cabecera {
  display: flex; align-items: center; gap: 24px;
  padding: 10px 20px; border-bottom: 1px solid var(--borde); background: var(--fondo);
  position: sticky; top: 0; z-index: 10;
}
.modulos { display: flex; gap: 6px; flex: 1; justify-content: center; flex-wrap: wrap; }
.modulo {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 9px;
  border: 1px solid transparent; background: none; cursor: pointer; font-weight: 600; color: var(--texto-2);
}
.modulo:hover { background: var(--superficie-2); }
.modulo[aria-current="page"] { background: var(--verde-suave); border-color: var(--borde-acento); color: var(--texto); }
.cabecera-derecha { display: flex; align-items: center; gap: 10px; }
.selector-empresa {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px;
  border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie);
}
.selector-empresa select { border: 0; background: none; font-weight: 600; max-width: 230px; cursor: pointer; }
.selector-empresa select:focus { outline: none; }
.usuario { color: var(--texto-2); font-size: 14px; padding-left: 10px; border-left: 1px solid var(--borde); }

/* ---------- Contenido ---------- */
.contenido { padding: 16px 20px 32px; max-width: 1880px; margin: 0 auto; }
.titulo-pagina { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.subtitulo { margin: 2px 0 0; color: var(--texto-2); font-size: 14px; }
.acciones-pagina { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }
.pill-estado {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px;
  background: var(--bien-fondo); color: var(--texto-bien); font-size: 13px; font-weight: 600;
}
.pill-estado.ko { background: var(--critico-fondo); color: var(--critico); }
.periodo { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.fecha { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.fecha input { border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 5px 8px; background: var(--superficie); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
  border: 1px solid var(--borde-fuerte); background: var(--superficie); border-radius: 999px;
  padding: 4px 12px; font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap;
}
.chip:hover { background: var(--superficie-2); }
.chip[aria-pressed="true"] { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.chip small { font-weight: 400; opacity: .75; margin-left: 3px; }
.aviso { background: var(--aviso-fondo); color: var(--texto-aviso); border-radius: 8px; padding: 8px 12px; margin: 0 0 12px; }

/* ---------- Tarjetas ---------- */
.tarjeta { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); box-shadow: var(--sombra); }
.tarjeta-cab { display: flex; align-items: center; gap: 12px; }
.tarjeta-titulo {
  display: inline-flex; align-items: center; gap: 7px; flex: 1;
  font-size: 12px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-2);
}

.kpis { display: grid; grid-template-columns: 1fr 1fr 250px; gap: 14px; margin-bottom: 14px; }
.kpi-grupo { padding: 14px 16px 16px; display: flex; flex-direction: column; min-width: 0; }
.kpi-cifra { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; flex-wrap: wrap; }
.kpi-cifra strong { font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -.4px; }
.kpi-cifra span { color: var(--texto-2); font-size: 14px; }
.kpi-comparacion { margin: 6px 0 18px; font-size: 13px; color: var(--tenue); }
.delta { font-weight: 700; }
.delta.sube { color: var(--bien); }
.delta.baja { color: var(--critico); }
.delta.igual { color: var(--tenue); }
.kpi-subs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.kpi-sub {
  border: 1px solid var(--borde); border-radius: 10px; padding: 16px 14px 14px; min-width: 0;
  box-shadow: var(--sombra-sub);
}
.kpi-sub strong { display: block; font-size: 22px; font-weight: 700; color: var(--serie-actual); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-sub strong.t-critico { color: var(--critico); }
.kpi-sub strong.t-aviso { color: var(--aviso); }
.kpi-sub strong.t-neutro { color: var(--texto); }
.etiqueta { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); margin-top: 4px; }
.etiqueta .punto { background: var(--bien); }
.etiqueta .punto.t-critico { background: var(--critico); }
.etiqueta .punto.t-aviso { background: var(--aviso); }
.etiqueta .punto.t-neutro { background: var(--tenue); }
.kpi-sub .mini { display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }
.kpi-laterales { display: grid; gap: 12px; }
.kpi-lateral { padding: 11px 16px; }
.kpi-lateral strong { display: block; font-size: 22px; font-weight: 700; color: var(--texto); }
.kpi-lateral strong.t-critico { color: var(--critico); }
.kpi-lateral .mini { display: block; font-size: 12px; color: var(--tenue); margin-top: 2px; }

.cargando { position: relative; overflow: hidden; color: transparent !important; }
.cargando * { visibility: hidden; }
.cargando::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--brillo), transparent);
  animation: brillo 1.2s infinite;
}
@keyframes brillo { from { transform: translateX(-100%); } to { transform: translateX(100%); } }
.esqueleto { background: var(--superficie-2); border-radius: 6px; height: 14px; margin: 8px 0; }

/* ---------- Gráfico y ranking ---------- */
.analisis { display: grid; grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr); gap: 14px; margin-bottom: 14px; }
.tarjeta-grafico, .tarjeta-ranking { padding: 14px 16px; min-width: 0; }
.leyenda { display: flex; gap: 14px; font-size: 13px; color: var(--texto-2); }
.leyenda span { display: inline-flex; align-items: center; gap: 6px; }
.leyenda i { width: 10px; height: 10px; border-radius: 3px; display: inline-block; }
.grafico { height: 220px; margin-top: 10px; position: relative; }
.grafico svg { width: 100%; height: 100%; display: block; overflow: visible; }
.grafico .rejilla { stroke: var(--borde); stroke-width: 1; }
.grafico .eje { fill: var(--tenue); font-size: 11px; }
.grafico .zona { fill: transparent; cursor: default; }
.grafico .zona:hover, .grafico .zona.activa { fill: var(--zona-activa); }
.grafico-tabla { margin-top: 10px; max-height: 220px; overflow: auto; }
.ranking { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.ranking li { display: grid; grid-template-columns: 22px 1fr auto; gap: 4px 8px; align-items: center; font-size: 14px; }
.ranking .pos { color: var(--tenue); font-weight: 700; }
.ranking .nombre { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ranking .nombre small { color: var(--tenue); margin-left: 4px; }
.ranking .valor { font-weight: 600; font-variant-numeric: tabular-nums; }
.ranking .barra { grid-column: 2 / 4; height: 6px; background: var(--superficie-2); border-radius: 3px; overflow: hidden; }
.ranking .barra i { display: block; height: 100%; background: var(--serie-actual); border-radius: 3px; }
.vacio { color: var(--tenue); font-size: 14px; padding: 16px 0; text-align: center; }
.ranking li.vacio { display: block; }

/* ---------- Documentos ---------- */
.documentos { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(340px, 1fr); gap: 14px; align-items: start; }
.panel-lista { padding: 12px; min-width: 0; }
.lista-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--borde); margin: -2px -2px 12px; padding: 0 2px; overflow-x: auto; }
.lista-tab {
  border: 0; background: none; padding: 8px 12px 10px; font-weight: 600; color: var(--tenue); cursor: pointer;
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.lista-tab[aria-selected="true"] { color: var(--texto); border-bottom-color: var(--primario); }
/* pestañas de las listas con el estilo de los botones de periodo (pastillas; la elegida, azul) */
#lista-tabs { border-bottom: 0; gap: 6px; padding: 2px 2px 10px; margin-bottom: 8px; }
#lista-tabs .lista-tab { border: 1px solid var(--borde-fuerte); background: var(--superficie); border-radius: 999px; padding: 6px 16px;
  margin: 0; font-size: 14px; color: var(--texto-2); transition: background .15s, color .15s, border-color .15s; }
#lista-tabs .lista-tab:hover { background: var(--superficie-2); color: var(--texto); }
#lista-tabs .lista-tab[aria-selected="true"] { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.buscador {
  display: flex; align-items: center; gap: 8px; border: 1px solid var(--borde-fuerte); border-radius: 9px;
  padding: 8px 12px; background: var(--superficie); color: var(--tenue);
}
.buscador input { border: 0; flex: 1; background: none; outline: none; color: var(--texto); min-width: 0; }
.chips-estado { margin: 10px 0; min-height: 26px; }
.tabla-scroll { overflow: auto; max-height: 620px; border-top: 1px solid var(--borde); }
.tabla { width: 100%; border-collapse: collapse; font-size: 14px; }
.tabla th {
  position: sticky; top: 0; background: var(--superficie); z-index: 1;
  text-align: left; font-size: 12px; font-weight: 600; color: var(--tenue);
  padding: 10px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; cursor: pointer; user-select: none;
}
.tabla th:hover { color: var(--texto); }
.tabla th .flecha { opacity: .35; margin-left: 3px; font-size: 10px; }
.tabla th[aria-sort] .flecha { opacity: 1; color: var(--texto); }
.tabla td { padding: 11px 10px; border-bottom: 1px solid var(--borde); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.tabla tbody tr { cursor: pointer; }
.tabla tbody tr:hover { background: var(--superficie-2); }
.tabla tbody tr.sel { background: var(--verde-fila); }
.tabla .n, .tabla th.n { text-align: right; font-variant-numeric: tabular-nums; }
.tabla td.doc { font-weight: 600; }
.tabla td.cod { color: var(--texto-2); }
.tabla td.cod span { background: var(--neutro-fondo); border-radius: 5px; padding: 2px 8px; font-size: 13px; }
.tabla td.cero { color: var(--tenue); }
/* chips de estado a la izquierda y paginación a la derecha, encima de la tabla */
.lista-subbarra { display: flex; align-items: center; justify-content: space-between; gap: 10px 16px; flex-wrap: wrap; margin: 10px 0; }
.lista-subbarra .chips-estado { margin: 0; flex: 1; min-width: 0; }
.paginacion { display: flex; justify-content: flex-end; align-items: center; gap: 14px; font-size: 13px; color: var(--texto-2); margin-left: auto; white-space: nowrap; }
.paginacion .btns { display: flex; gap: 6px; }
.paginacion .btn { padding: 4px 10px; }
.btn-ajustar { display: inline-grid; place-items: center; width: 26px; height: 26px; padding: 0; border: 1px solid var(--borde); border-radius: 7px;
  background: var(--superficie); color: var(--texto-2); cursor: pointer; }
.btn-ajustar:hover { color: var(--texto); border-color: var(--texto-2); }
.btn-ajustar[aria-pressed="true"] { background: var(--lista-1, var(--primario)); border-color: transparent; color: #fff; }
.btn-ajustar .icono, .btn-ajustar svg { width: 15px; height: 15px; }
/* columnas ajustadas: menos aire y el texto largo cortado con «…» (el ancho lo calcula ajustarColumnas) */
.tabla.ajustada { font-size: 13px; }
.tabla.ajustada th { padding: 8px 6px; }
.tabla.ajustada td { padding: 9px 6px; }
.tabla.ajustada td.txt { max-width: var(--max-txt, 260px); }
.tabla.ajustada .th-titulo { white-space: normal; }
.tabla.ajustada .th-contenido { align-items: flex-end; }
.tabla.ajustada td.cod span { padding: 2px 5px; font-size: 12px; }
.tabla.ajustada thead tr:not(.filtros) th[data-orden] { white-space: normal; line-height: 1.25; vertical-align: bottom; min-width: 44px; }

.estado {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px;
  font-size: 13px; font-weight: 600; background: var(--neutro-fondo); color: var(--texto-2);
}
.estado::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.estado.bien { background: var(--bien-fondo); color: var(--texto-bien); }
.estado.aviso { background: var(--aviso-fondo); color: var(--texto-aviso); }
.estado.critico { background: var(--critico-fondo); color: var(--texto-critico); }
.estado.info { background: var(--info-fondo); color: var(--info); }

/* ---------- Detalle ---------- */
.panel-detalle { padding: 16px 18px; position: sticky; top: 72px; max-height: calc(calc(100vh / var(--zoom, 1)) - 88px); overflow: auto; }
.detalle-vacio { text-align: center; color: var(--tenue); padding: 60px 20px; }
.detalle-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.detalle-cab h2 { margin: 0; font-size: 20px; }
.detalle-tipo { background: var(--neutro-fondo); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--texto-2); }
.detalle-sub { color: var(--texto-2); margin: 4px 0 14px; }
.detalle-barra { height: 4px; border-radius: 4px; background: var(--oro); margin: 0 0 16px; }
.campos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 18px; margin: 0 0 18px; }
.campos div { min-width: 0; }
.campos dt { font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.campos dd { margin: 1px 0 0; font-weight: 600; overflow-wrap: anywhere; }
.campos .ancho { grid-column: 1 / -1; }
.sub-bloque { border: 1px solid var(--borde); border-radius: 10px; margin-bottom: 14px; overflow: hidden; }
.sub-bloque h3 {
  margin: 0; padding: 9px 12px; font-size: 12px; font-weight: 700; letter-spacing: .6px;
  text-transform: uppercase; color: var(--texto-2); background: var(--superficie-2);
  display: flex; justify-content: space-between; align-items: center;
}
.sub-bloque h3 small { font-weight: 600; color: var(--tenue); letter-spacing: 0; }
.sub-herr { display: inline-flex; align-items: center; gap: 6px; }
.sub-columnas { padding: 3px; }
.sub-columnas svg { width: 15px; height: 15px; }
.sub-bloque .tabla-scroll { max-height: 320px; border: 0; }
.sub-bloque .tabla { font-size: 13px; }
.sub-bloque .tabla th { cursor: default; }
.sub-bloque .tabla td, .sub-bloque .tabla th { padding: 7px 10px; }
.sub-bloque .tabla tbody tr { cursor: default; }
.error { color: var(--critico); padding: 12px 0; }

/* ---------- Tooltip ---------- */
.tooltip {
  position: fixed; z-index: 50; pointer-events: none; background: var(--tooltip-fondo); color: var(--tooltip-texto);
  border-radius: 8px; padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.18); min-width: 150px;
}
.tooltip b { display: block; margin-bottom: 4px; }
.tooltip div { display: flex; justify-content: space-between; gap: 14px; align-items: center; }
.tooltip i { width: 8px; height: 8px; border-radius: 2px; display: inline-block; margin-right: 6px; }

/* ---------- Adaptación ---------- */
@media (max-width: 1400px) {
  .kpis { grid-template-columns: 1fr 1fr; }
  .kpi-laterales { grid-column: 1 / -1; grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 1100px) {
  .cabecera { flex-wrap: wrap; gap: 10px; }
  .modulos { order: 3; flex-basis: 100%; justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; }
  .analisis, .documentos { grid-template-columns: 1fr; }
  .panel-detalle { position: static; max-height: none; }
}
@media (max-width: 760px) {
  .cabecera, .contenido { padding-left: 16px; padding-right: 16px; }
  .kpis { grid-template-columns: 1fr; }
  .kpi-laterales { grid-template-columns: 1fr; }
  .kpi-subs { grid-template-columns: 1fr 1fr; }
  .usuario { display: none; }
  .acciones-pagina { justify-content: flex-start; }
  .campos { grid-template-columns: 1fr; }
}

/* ---------- Configuración ---------- */
.config { max-width: 760px; }
.config-tarjeta { margin-bottom: 16px; }
.config-cab { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--borde); }
.config-cab > div { flex: 1; min-width: 0; }
.config h2 { margin: 0; font-size: 16px; font-weight: 700; }
.config-icono {
  width: 40px; height: 40px; border-radius: 10px; background: var(--verde-suave); color: var(--primario);
  display: grid; place-items: center; flex: none;
}
.config-icono .icono { width: 20px; height: 20px; }
.insignia {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px;
  background: var(--neutro-fondo); color: var(--texto-2); font-size: 13px; font-weight: 600;
}
.insignia .icono { width: 14px; height: 14px; }
.config-cuerpo { padding: 16px 18px 18px; }
.config-red { border: 0; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; align-items: center; }
.config-red legend { font-weight: 600; margin-bottom: 8px; padding: 0; }
.radio { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; }
.radio input { accent-color: var(--primario); width: 16px; height: 16px; margin: 0; }
.radio .icono { color: var(--tenue); }
.config-estado { flex-basis: 100%; margin: 0; font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 6px; }
.config-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; }
.config-rejilla .campo input { background: var(--superficie); }
.campo em { font-style: normal; font-weight: 400; color: var(--tenue); }
.config-resultado { border-radius: 8px; padding: 9px 12px; margin: 4px 0 14px; font-size: 14px; }
.config-resultado.ok { background: var(--bien-fondo); color: var(--texto-bien); }
.config-resultado.ko { background: var(--critico-fondo); color: var(--texto-critico); }
.config-resultado.info { background: var(--neutro-fondo); color: var(--texto-2); }
.config-botones { display: flex; gap: 10px; padding-top: 14px; border-top: 1px solid var(--borde); }
.config-local { display: flex; align-items: center; gap: 14px; padding: 16px 18px; }
.config-local > div { flex: 1; }
.config-local .subtitulo { font-size: 13px; }
.config-local .btn { text-decoration: none; }
@media (max-width: 760px) {
  .config-rejilla { grid-template-columns: 1fr; }
  .config-local { flex-wrap: wrap; }
}

/* ---------- Administración ---------- */
.config { max-width: 1000px; margin: 0 auto; }
.nuevo-cliente { padding: 16px 18px; }
.nuevo-cliente h2, .tenant-cab h2 { display: flex; align-items: center; gap: 8px; }
.nuevo-cliente h2 .icono { color: var(--tenue); }
.fila-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; align-items: end; margin-top: 12px; }
.fila-form .campo { margin: 0; }
.fila-form .btn { height: 42px; }
.tenant { padding: 16px 18px; }
.tenant-cab { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tenant-cab h2 { font-size: 17px; }
.tenant-cab .acciones { margin-left: auto; display: flex; gap: 8px; }
.tenant-cab .btn { padding: 5px 12px; font-size: 14px; }
.insignia.pendiente { background: var(--aviso-fondo); color: var(--texto-aviso); text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.insignia.conectado { background: var(--bien-fondo); color: var(--texto-bien); text-transform: uppercase; font-size: 12px; letter-spacing: .4px; }
.insignia.falta { background: var(--critico-fondo); color: var(--texto-critico); }
.insignia.cif { font-variant-numeric: tabular-nums; }
.btn-mini { border: 0; background: none; cursor: pointer; color: var(--tenue); padding: 4px; border-radius: 6px; display: inline-grid; place-items: center; }
.btn-mini:hover { background: var(--superficie-2); color: var(--texto); }
.btn-mini.peligro:hover { color: var(--critico); background: var(--critico-fondo); }
.btn-mini .icono { width: 15px; height: 15px; }
.tenant-opcion { display: flex; align-items: center; gap: 10px; margin: 14px 0 4px; font-size: 14px; color: var(--texto-2); flex-wrap: wrap; }
.segmento { display: inline-flex; border: 1px solid var(--borde-fuerte); border-radius: 8px; overflow: hidden; }
.segmento button { border: 0; background: var(--superficie); padding: 4px 14px; cursor: pointer; font-weight: 600; font-size: 13px; color: var(--texto-2); }
.segmento button + button { border-left: 1px solid var(--borde-fuerte); }
.segmento button[aria-pressed="true"] { background: var(--verde-suave); color: var(--primario); }
.bloque { border: 1px solid var(--borde); border-radius: 10px; padding: 14px 14px 12px; margin-top: 12px; }
.bloque h3 { margin: 0 0 10px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; color: var(--texto-2); }
.bloque .config-botones { border-top: 0; padding-top: 4px; }
.agente-bloque { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--borde-fuerte); }
.agente-bloque h4 { margin: 0 0 8px; font-size: 13px; font-weight: 700; display: flex; align-items: center; gap: 7px; color: var(--texto-2); flex-wrap: wrap; }
.agente-ahora { margin-left: auto; font-weight: 500; font-size: 12px; background: var(--neutro-fondo); border-radius: 999px; padding: 2px 10px; }
.agente-ayuda { font-size: 12.5px; color: var(--tenue); margin: 6px 0 8px; line-height: 1.45; }
.agente-vias { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; font-size: 14px; color: var(--texto-2); margin: 4px 0 6px; }
.agente-vias .marca { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.agente-vias .marca input { accent-color: var(--primario); }
.agente-bloque .config-botones { flex-wrap: wrap; }
.agente-activacion { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 4px 0 8px; }
.agente-activacion .campo { margin: 0; flex: 1 1 300px; }
.agente-activacion .campo input { background: var(--superficie); }
.agente-activacion .btn { height: 42px; }
.agente-activacion .insignia { align-self: center; }
.agente-bloque .btn { text-decoration: none; color: inherit; }
.agente-clave { margin-top: 10px; border: 1px solid var(--primario); background: var(--verde-suave); border-radius: 10px; padding: 10px 12px; font-size: 13.5px; }
.agente-clave p { margin: 0 0 6px; }
.agente-clave-fila { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.agente-clave-fila code { flex: 1; min-width: 0; overflow-wrap: anywhere; font-size: 13px; background: var(--superficie); border-radius: 6px; padding: 7px 9px; user-select: all; }
.usuario-fila { display: flex; align-items: center; gap: 10px; border: 1px solid var(--borde); border-radius: 10px; padding: 9px 12px; margin-top: 8px; flex-wrap: wrap; }
.usuario-fila .u-login { font-weight: 600; min-width: 200px; overflow-wrap: anywhere; }
.usuario-fila .u-login small { font-weight: 400; color: var(--tenue); margin-left: 6px; }
.usuario-fila .acciones { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.marca-rol { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--borde); border-radius: 999px; padding: 3px 10px; font-size: 13px; color: var(--texto-2); cursor: pointer; }
.marca-rol input { accent-color: var(--primario); margin: 0; }
.marca-rol.super { border-color: var(--borde-aviso); }
.marca-rol.super:has(input:checked) { background: var(--aviso-fondo); color: var(--texto-aviso); }
.marca-rol:has(input:disabled) { cursor: default; opacity: .7; }
.marca-rol .icono { width: 13px; height: 13px; }
.reset { display: flex; gap: 6px; align-items: center; flex-basis: 100%; }
.reset input { flex: 1; padding: 6px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; }
.nuevo-usuario .fila-form { grid-template-columns: 1fr 1fr auto; }
.nuevo-usuario .roles { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.nuevo-usuario .roles label { display: inline-flex; gap: 6px; align-items: center; font-size: 14px; }
.tenant-msg { margin-top: 10px; }
@media (max-width: 760px) {
  .fila-form, .nuevo-usuario .fila-form { grid-template-columns: 1fr; }
  .tenant-cab .acciones { margin-left: 0; }
  .usuario-fila .acciones { margin-left: 0; }
}
.insignia.principal { background: var(--aviso-fondo); color: var(--texto-aviso); }

.login-acciones { display: flex; justify-content: space-between; margin: 12px 0 0; }
.codigo { font-size: 26px !important; letter-spacing: 10px; text-align: center; font-variant-numeric: tabular-nums; }
#correo-2fa .config-estado { flex-basis: auto; }

/* ---------- Ficha de cliente / proveedor / artículo ---------- */
.ficha {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  background: var(--verde-suave); border: 1px solid var(--borde-acento); border-radius: 10px; padding: 10px 14px; margin-bottom: 14px;
}
.ficha .icono { color: var(--primario); width: 18px; height: 18px; }
.ficha b { font-size: 16px; }
.ficha small { color: var(--texto-2); }
.ficha .btn { margin-left: auto; padding: 5px 12px; }

/* ---------- Persiana de indicadores ---------- */
.persiana { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .35s ease, opacity .25s ease; }
.persiana-interior { min-height: 0; overflow: hidden; }
.persiana.plegada { grid-template-rows: 0fr; opacity: 0; }
@media (prefers-reduced-motion: reduce) { .persiana { transition: none; } }

/* ---------- Herramientas de la lista y filtros por columna ---------- */
.lista-herramientas { display: flex; gap: 8px; align-items: center; }
.lista-herramientas .buscador { flex: 1; }
.lista-herramientas .btn { padding: 8px 12px; }
.tabla thead tr.filtros th { padding: 4px 6px 8px; cursor: default; background: var(--superficie); }
.tabla thead tr.filtros input {
  width: 100%; min-width: 64px; padding: 4px 7px; font-size: 12px; font-weight: 400; color: var(--texto);
  border: 1px solid var(--borde); border-radius: 6px; background: var(--fondo);
}
.tabla thead tr.filtros input:focus { outline: none; border-color: var(--serie-actual); background: var(--superficie); }
.tabla thead tr.filtros input.activo { border-color: var(--serie-actual); background: var(--verde-suave); }
.tabla thead tr.filtros input.invalido { border-color: var(--critico); background: var(--critico-fondo); }
.tabla th.extra { color: var(--info); }

/* ---------- Ventana de columnas ---------- */
.dialogo { border: 0; padding: 0; border-radius: 14px; width: min(980px, calc(calc(100vw / var(--zoom, 1)) - 32px)); max-height: calc(calc(100vh / var(--zoom, 1)) - 48px);
  background: var(--superficie); color: var(--texto); box-shadow: var(--sombra-dialogo); }
.dialogo::backdrop { background: var(--velo); }
.dialogo-cuerpo { display: flex; flex-direction: column; max-height: calc(calc(100vh / var(--zoom, 1)) - 48px); }
.dialogo-cab { display: flex; align-items: flex-start; gap: 12px; padding: 18px 20px 12px; border-bottom: 1px solid var(--borde); }
.dialogo-cab > div { flex: 1; }
.dialogo-cab h2 { margin: 0; font-size: 18px; }
.columnas-paneles { display: grid; grid-template-columns: 1fr 1.3fr; gap: 16px; padding: 14px 20px; min-height: 0; overflow: hidden; flex: 1; }
.columnas-paneles section { display: flex; flex-direction: column; min-height: 0; }
.columnas-paneles h3 { margin: 0 0 8px; font-size: 13px; font-weight: 700; color: var(--texto-2); }
.columnas-paneles h3 small { font-weight: 400; color: var(--tenue); margin-left: 6px; }
.buscador-mini { padding: 6px 10px; margin-bottom: 8px; }
.col-lista { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1; min-height: 200px; max-height: calc(58vh / var(--zoom, 1));
  border: 1px solid var(--borde); border-radius: 10px; }
.col-lista li { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-bottom: 1px solid var(--borde); font-size: 14px; background: var(--superficie); }
.col-lista li:last-child { border-bottom: 0; }
.col-lista li .txt { flex: 1; min-width: 0; }
.col-lista li .txt b { font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.col-lista li .txt small { color: var(--tenue); font-size: 12px; }
.col-lista li .txt code { font-family: ui-monospace, Consolas, monospace; font-size: 11px; background: var(--neutro-fondo); border-radius: 4px; padding: 0 5px; margin-right: 4px; color: var(--texto-2); }
.col-lista .asa { cursor: grab; color: var(--tenue); user-select: none; font-size: 16px; line-height: 1; }
.col-lista li.arrastrando { opacity: .45; }
.col-lista li.antes { box-shadow: inset 0 2px 0 var(--serie-actual); }
.col-lista li.despues { box-shadow: inset 0 -2px 0 var(--serie-actual); }
.col-lista .etiq { font-size: 11px; border-radius: 999px; padding: 1px 8px; background: var(--neutro-fondo); color: var(--texto-2); white-space: nowrap; }
.col-lista .etiq.relleno { background: var(--aviso-fondo); color: var(--texto-aviso); }
.col-lista .etiq.anadido { background: var(--info-fondo); color: var(--info); }
.dialogo-pie { display: flex; gap: 8px; padding: 12px 20px 16px; border-top: 1px solid var(--borde); }
.dialogo-pie .hueco { flex: 1; }
@media (max-width: 760px) { .columnas-paneles { grid-template-columns: 1fr; overflow: auto; } .col-lista { max-height: calc(36vh / var(--zoom, 1)); } }

/* ---------- Vista previa (panel de detalle) ---------- */
.documentos.sin-previa { grid-template-columns: minmax(0, 1fr); }
.documentos.sin-previa .panel-detalle { display: none; }
@media (max-width: 1100px) { .documentos.sin-previa .tabla-scroll { max-height: calc(72vh / var(--zoom, 1)); } }
.btn-previa .casilla {
  width: 15px; height: 15px; border-radius: 4px; border: 1.5px solid var(--borde-fuerte); display: inline-grid; place-items: center;
  background: var(--superficie);
}
.btn-previa[aria-pressed="true"] { background: var(--verde-suave); border-color: var(--borde-acento); }
.btn-previa[aria-pressed="true"] .casilla { background: var(--primario); border-color: var(--primario); }
.btn-previa[aria-pressed="true"] .casilla::after { content: ""; width: 7px; height: 4px; border: 2px solid var(--sobre-primario); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }

.btn-icono.activo { background: var(--verde-suave); color: var(--primario); }

/* ================ Pieles (como en el EDM, más tres propias) ================ */
/* Paper Ledger es la de :root. Cada piel redefine solo variables: ningún componente cambia. */
html[data-piel="ibm"] {
  --fondo: #10151c; --superficie: #161d26; --superficie-2: #1c2530;
  --borde: #2a3542; --borde-fuerte: #3a4757;
  --texto: #eef2f5; --texto-2: #b8c4cf; --tenue: #8a97a8;
  --primario: #5fcfe8; --primario-hover: #7fdcf0; --sobre-primario: #0a1720;
  --verde-suave: #16323a; --verde-fila: #17303a; --borde-acento: #245563;
  --serie-actual: #1b9ab8; --serie-anterior: #c77b16;
  --bien: #4fd18b; --bien-fondo: #12302a; --texto-bien: #7fe0a8;
  --aviso: #e8b04a; --aviso-fondo: #33291a; --texto-aviso: #f0c67a; --borde-aviso: #5a4a2a;
  --critico: #f07a6a; --critico-fondo: #3a1f1e; --texto-critico: #f59a8e;
  --info: #7ab8f5; --info-fondo: #182c40; --neutro-fondo: #202a35;
  --tooltip-fondo: #eef2f5; --tooltip-texto: #10151c;
  --brillo: rgba(60,75,90,.5); --zona-activa: rgba(95,207,232,.08);
  --fuente: "IBM Plex Sans", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --sombra-sub: 0 1px 3px rgba(0,0,0,.3); --sombra-dialogo: 0 20px 60px rgba(0,0,0,.6); --velo: rgba(0,0,0,.55);
  color-scheme: dark;
}
html[data-piel="nordic"] {
  --fondo: #f3f5f7; --superficie: #ffffff; --superficie-2: #f6f8fa;
  --borde: #e1e6ea; --borde-fuerte: #c4ccd3;
  --texto: #1e2a33; --texto-2: #47566a; --tenue: #64748b;
  --primario: #0e7c7b; --primario-hover: #0b5f5e; --sobre-primario: #ffffff;
  --verde-suave: #e2f3ee; --verde-fila: #edf7f4; --borde-acento: #c8e9e0;
  --serie-actual: #00897b; --serie-anterior: #c26a0f;
  --bien: #16915c; --bien-fondo: #e3f5ec; --texto-bien: #0f6b43;
  --aviso: #b7790a; --aviso-fondo: #fbf1dc; --texto-aviso: #8a5a05; --borde-aviso: #f1d9a6;
  --critico: #c2412d; --critico-fondo: #fbe8e4; --texto-critico: #a3321f;
  --info: #2f6fb0; --info-fondo: #e6eff9; --neutro-fondo: #eef1f4;
  --tooltip-fondo: #1e2a33; --tooltip-texto: #ffffff;
  --brillo: rgba(225,230,234,.7); --zona-activa: rgba(14,124,123,.07);
  --fuente: "Public Sans", system-ui, sans-serif;
  
  color-scheme: light;
}
html[data-piel="amber"] {
  --fondo: #1c1b19; --superficie: #242220; --superficie-2: #2c2925;
  --borde: #38342e; --borde-fuerte: #504840;
  --texto: #f7f4ef; --texto-2: #c9c1b3; --tenue: #8c8071;
  --primario: #e8871e; --primario-hover: #f3a04a; --sobre-primario: #1c1b19;
  --verde-suave: #2c2117; --verde-fila: #302418; --borde-acento: #5a3a17;
  --serie-actual: #d9780f; --serie-anterior: #3b95d0;
  --bien: #5cc98a; --bien-fondo: #1d2e22; --texto-bien: #8ddcac;
  --aviso: #f3a04a; --aviso-fondo: #3a2a1a; --texto-aviso: #f6bd7c; --borde-aviso: #6a4a22;
  --critico: #f0776a; --critico-fondo: #3a201c; --texto-critico: #f59a8e;
  --info: #6fb0dc; --info-fondo: #1b2a36; --neutro-fondo: #302c27;
  --tooltip-fondo: #f7f4ef; --tooltip-texto: #1c1b19;
  --brillo: rgba(80,72,64,.5); --zona-activa: rgba(232,135,30,.08);
  --fuente: "Barlow", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --sombra-sub: 0 1px 3px rgba(0,0,0,.3); --sombra-dialogo: 0 20px 60px rgba(0,0,0,.6); --velo: rgba(0,0,0,.55);
  color-scheme: dark;
}
html[data-piel="azul"] {
  --fondo: #f5f7fb; --superficie: #ffffff; --superficie-2: #f1f4f9;
  --borde: #e2e8f0; --borde-fuerte: #cbd5e1;
  --texto: #0f172a; --texto-2: #334155; --tenue: #64748b;
  --primario: #1d4ed8; --primario-hover: #1e40af; --sobre-primario: #ffffff;
  --verde-suave: #e8efff; --verde-fila: #eef3ff; --borde-acento: #c7d7fe;
  --serie-actual: #1d4ed8; --serie-anterior: #d97706;
  --bien: #16a34a; --bien-fondo: #e7f6ec; --texto-bien: #15803d;
  --aviso: #b45309; --aviso-fondo: #fdf3e2; --texto-aviso: #92400e; --borde-aviso: #f6d7a6;
  --critico: #dc2626; --critico-fondo: #fdecec; --texto-critico: #b91c1c;
  --info: #2563eb; --info-fondo: #e8efff; --neutro-fondo: #eef2f7;
  --tooltip-fondo: #0f172a; --tooltip-texto: #ffffff;
  --brillo: rgba(226,232,240,.7); --zona-activa: rgba(29,78,216,.06);
  --fuente: "Inter", system-ui, sans-serif;
  
  color-scheme: light;
}
html[data-piel="medianoche"] {
  --fondo: #0b1020; --superficie: #121a2e; --superficie-2: #18223a;
  --borde: #222d48; --borde-fuerte: #33415f;
  --texto: #e6ebf5; --texto-2: #b4bfd6; --tenue: #8190ad;
  --primario: #818cf8; --primario-hover: #a5b4fc; --sobre-primario: #0b1020;
  --verde-suave: #1c2146; --verde-fila: #1b2144; --borde-acento: #353f80;
  --serie-actual: #6a76f0; --serie-anterior: #c47c20;
  --bien: #4ade80; --bien-fondo: #12281f; --texto-bien: #86efac;
  --aviso: #f0b35a; --aviso-fondo: #30261a; --texto-aviso: #f5c985; --borde-aviso: #5a4a2a;
  --critico: #f87171; --critico-fondo: #361c22; --texto-critico: #fca5a5;
  --info: #7dd3fc; --info-fondo: #14263b; --neutro-fondo: #1c2540;
  --tooltip-fondo: #e6ebf5; --tooltip-texto: #0b1020;
  --brillo: rgba(51,65,95,.5); --zona-activa: rgba(129,140,248,.09);
  --fuente: "Nunito Sans", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --sombra-sub: 0 1px 3px rgba(0,0,0,.3); --sombra-dialogo: 0 20px 60px rgba(0,0,0,.6); --velo: rgba(0,0,0,.55);
  color-scheme: dark;
}
html[data-piel="contraste"] {
  --fondo: #ffffff; --superficie: #ffffff; --superficie-2: #f2f2f2;
  --borde: #767676; --borde-fuerte: #3d3d3d;
  --texto: #000000; --texto-2: #1a1a1a; --tenue: #3d3d3d;
  --primario: #0033cc; --primario-hover: #002299; --sobre-primario: #ffffff;
  --verde-suave: #e6ecff; --verde-fila: #dce5ff; --borde-acento: #0033cc;
  --serie-actual: #1040d8; --serie-anterior: #b35900;
  --bien: #006b2d; --bien-fondo: #e3f5e9; --texto-bien: #005223;
  --aviso: #8a4b00; --aviso-fondo: #fff0d9; --texto-aviso: #6b3a00; --borde-aviso: #8a4b00;
  --critico: #b00020; --critico-fondo: #fde7ea; --texto-critico: #8c0019;
  --info: #0033cc; --info-fondo: #e6ecff; --neutro-fondo: #eeeeee;
  --tooltip-fondo: #000000; --tooltip-texto: #ffffff;
  --brillo: rgba(200,200,200,.6); --zona-activa: rgba(0,51,204,.08);
  --fuente: "Atkinson Hyperlegible", system-ui, sans-serif;
  
  color-scheme: light;
}
html[data-piel="live"] {
  --fondo: #F7F8FA; --superficie: #ffffff; --superficie-2: #F0F3F7;
  --borde: #E1E7EE; --borde-fuerte: #C9D3DE;
  --texto: #0B1B2B; --texto-2: #34485C; --tenue: #6B7C8F;
  --primario: #0B8BC2; --primario-hover: #0A76A5; --sobre-primario: #ffffff;
  --verde-suave: #E3F4FB; --verde-fila: #EDF8FD; --borde-acento: #B6E2F5;
  --serie-actual: #0B8BC2; --serie-anterior: #FFB200;
  --bien: #16a34a; --bien-fondo: #e7f6ec; --texto-bien: #15803d;
  --aviso: #B77A00; --aviso-fondo: #FFF4DC; --texto-aviso: #7A6435; --borde-aviso: #F5D48A;
  --critico: #dc2626; --critico-fondo: #fdecec; --texto-critico: #b91c1c;
  --info: #0B8BC2; --info-fondo: #E3F4FB; --neutro-fondo: #EEF2F6;
  --tooltip-fondo: #0B1B2B; --tooltip-texto: #F7F8FA;
  --brillo: rgba(225,231,238,.7); --zona-activa: rgba(11,139,194,.06);
  --fuente: "Sora", system-ui, sans-serif;
  color-scheme: light;
}
html[data-piel="live-noche"] {
  --fondo: #0B1B2B; --superficie: #102538; --superficie-2: #15304A;
  --borde: #1F3B55; --borde-fuerte: #2E5170;
  --texto: #F7F8FA; --texto-2: #C4D2E0; --tenue: #8FA6BD;
  --primario: #5CC8F2; --primario-hover: #86D8F7; --sobre-primario: #0B1B2B;
  --verde-suave: #133A52; --verde-fila: #123447; --borde-acento: #1E5A7A;
  --serie-actual: #5CC8F2; --serie-anterior: #FFB200;
  --bien: #4ade80; --bien-fondo: #12281f; --texto-bien: #86efac;
  --aviso: #FFB200; --aviso-fondo: #33290F; --texto-aviso: #FFD166; --borde-aviso: #5E4A16;
  --critico: #f87171; --critico-fondo: #361c22; --texto-critico: #fca5a5;
  --info: #5CC8F2; --info-fondo: #123447; --neutro-fondo: #16304A;
  --tooltip-fondo: #F7F8FA; --tooltip-texto: #0B1B2B;
  --brillo: rgba(46,81,112,.5); --zona-activa: rgba(92,200,242,.08);
  --fuente: "Sora", system-ui, sans-serif;
  --sombra: 0 1px 2px rgba(0,0,0,.35), 0 2px 8px rgba(0,0,0,.25); --sombra-sub: 0 1px 3px rgba(0,0,0,.3); --sombra-dialogo: 0 20px 60px rgba(0,0,0,.6); --velo: rgba(0,0,0,.55);
  color-scheme: dark;
}
/* Enterprise Live: títulos en Sora ExtraBold y el naranja del Saturno como acento, como en el manual de marca */
html[data-piel="live"] h1, html[data-piel="live"] h2, html[data-piel="live-noche"] h1, html[data-piel="live-noche"] h2 { font-weight: 800; letter-spacing: -.3px; }
html[data-piel="live"] .detalle-barra, html[data-piel="live-noche"] .detalle-barra { background: linear-gradient(90deg, #FFB200, #AD986D, #918F91); }
html[data-piel] input, html[data-piel] select { color: var(--texto); }

/* ---------- Apariencia ---------- */
.pieles { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.piel {
  text-align: left; border: 1px solid var(--borde); border-radius: 12px; padding: 10px; background: var(--superficie);
  cursor: pointer; display: flex; flex-direction: column; gap: 8px; color: var(--texto);
}
.piel:hover { border-color: var(--borde-fuerte); }
.piel[aria-checked="true"] { border-color: var(--primario); box-shadow: 0 0 0 2px var(--primario); }
.piel .mini { border-radius: 8px; border: 1px solid rgba(128,128,128,.25); padding: 7px; display: grid; gap: 6px; }
.piel .mini-cab { height: 8px; border-radius: 4px; }
.piel .mini-cuerpo { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.piel .mini-tarjeta { border-radius: 6px; padding: 6px; display: flex; flex-direction: column; gap: 4px; }
.piel .mini-num { height: 7px; width: 60%; border-radius: 3px; }
.piel .mini-txt { height: 4px; width: 85%; border-radius: 2px; opacity: .55; }
.piel .mini-barras { display: flex; align-items: flex-end; gap: 3px; height: 26px; }
.piel .mini-barras i { width: 7px; border-radius: 2px 2px 0 0; display: block; }
.piel .nombre { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-weight: 700; }
.piel .nombre small { font-weight: 600; font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.piel .desc { font-size: 13px; color: var(--texto-2); margin: 0; }
.piel .nueva { font-size: 11px; background: var(--info-fondo); color: var(--info); border-radius: 999px; padding: 1px 7px; margin-left: 6px; }
.fuente-fila { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 16px; align-items: end; margin-top: 16px; }
.fuente-fila select { width: 100%; padding: 9px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); }
.fuente-muestra { margin: 0 0 14px; font-size: 17px; color: var(--texto); border: 1px dashed var(--borde-fuerte); border-radius: 8px; padding: 10px 12px; }
@media (max-width: 760px) { .fuente-fila { grid-template-columns: 1fr; } }

/* ---------- Divisor ajustable entre la lista y la vista previa ---------- */
.documentos { grid-template-columns: minmax(360px, var(--fr-lista, 1.6fr)) 14px minmax(300px, 1fr); column-gap: 0; }
.divisor { align-self: stretch; cursor: col-resize; display: flex; justify-content: center; touch-action: none; border-radius: 6px; }
.divisor span { width: 4px; margin: 40px 0; border-radius: 2px; background: var(--borde); transition: background .15s; }
.divisor:hover span, .divisor:focus-visible span, .divisor.arrastrando span { background: var(--primario); }
.divisor:focus-visible { outline: none; }
.documentos.redimensionando { user-select: none; cursor: col-resize; }
.documentos.redimensionando .panel-detalle, .documentos.redimensionando .tabla-scroll { pointer-events: none; }
.documentos.sin-previa .divisor { display: none; }
.documentos.sin-previa { grid-template-columns: minmax(0, 1fr); }
@media (max-width: 1100px) {
  .documentos { grid-template-columns: 1fr; row-gap: 14px; }
  .divisor { display: none; }
}

/* ---------- Filtro de almacén y familia (Logística) ---------- */
.ambito { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.ambito-titulo { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--texto-2); text-transform: uppercase; letter-spacing: .5px; }
.ambito .selector-empresa select { max-width: 320px; }
.ambito-familia select { max-width: 380px !important; }
.ambito .selector-empresa.activo { border-color: var(--primario); background: var(--verde-suave); }
.ambito-nota { font-size: 13px; color: var(--tenue); }

/* ---------- Combo con buscador ---------- */
.combo { position: relative; }
.combo-caja {
  display: flex; align-items: center; gap: 6px; padding: 5px 8px 5px 10px; min-width: 220px;
  border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie);
}
.combo-ancho .combo-caja { min-width: 300px; }
.combo.activo .combo-caja { border-color: var(--primario); background: var(--verde-suave); }
.combo-caja:focus-within { border-color: var(--serie-actual); box-shadow: 0 0 0 3px var(--verde-suave); }
.combo-caja > .icono { color: var(--tenue); }
.combo input { border: 0; background: none; outline: none; flex: 1; min-width: 0; font-weight: 600; color: var(--texto); padding: 2px 0; }
.combo input::placeholder { color: var(--texto-2); font-weight: 600; }
.combo .combo-borrar, .combo .combo-abrir { border: 0; background: none; padding: 2px; cursor: pointer; color: var(--tenue); border-radius: 5px; display: grid; place-items: center; }
.combo .combo-borrar:hover, .combo .combo-abrir:hover { color: var(--texto); background: var(--superficie-2); }
.combo .combo-borrar .icono, .combo .combo-abrir .icono { width: 14px; height: 14px; }
.combo-lista {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content; max-width: min(560px, calc(90vw / var(--zoom, 1)));
  max-height: 340px; overflow: auto; margin: 0; padding: 4px; list-style: none;
  background: var(--superficie); border: 1px solid var(--borde-fuerte); border-radius: 10px; box-shadow: var(--sombra-dialogo);
}
.combo-lista li { padding: 7px 10px; border-radius: 7px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; font-size: 14px; }
.combo-lista li[aria-selected="true"], .combo-lista li:hover { background: var(--verde-fila); }
.combo-lista li .cod { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--texto-2); background: var(--neutro-fondo); border-radius: 4px; padding: 0 5px; flex: none; }
.combo-lista li .txt { flex: 1; }
.combo-lista li .extra { font-size: 12px; color: var(--tenue); flex: none; }
.combo-lista li mark { background: var(--aviso-fondo); color: inherit; border-radius: 2px; padding: 0 1px; }
.combo-lista li.info { cursor: default; color: var(--tenue); font-size: 13px; }
.combo-lista li.info:hover { background: none; }

/* ---------- Ficha de cliente (alta y modificación) ---------- */
.dialogo-ficha { width: min(1240px, calc(calc(100vw / var(--zoom, 1)) - 32px)); height: min(900px, calc(calc(100vh / var(--zoom, 1)) - 48px)); border-radius: 18px; }
.fc-marco { height: 100%; background: var(--fondo); }
.fc-cab { flex: none; display: flex; align-items: center; gap: 16px; padding: 18px 22px; background: var(--superficie); border-bottom: 1px solid var(--borde); }
.fc-avatar { flex: none; width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-weight: 800; font-size: 19px; letter-spacing: .5px;
  background: linear-gradient(135deg, var(--primario), var(--serie-actual)); color: var(--sobre-primario); box-shadow: var(--sombra); }
.fc-avatar svg { width: 22px; height: 22px; }
.fc-titulos { flex: 1; min-width: 0; }
.fc-antetitulo { margin: 0; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .8px; color: var(--tenue); }
.fc-titulos h2 { margin: 1px 0 6px; font-size: 21px; line-height: 1.2; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-chips { display: flex; flex-wrap: wrap; gap: 6px; min-height: 4px; }
.fc-chip { font-size: 12px; padding: 2px 9px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); border: 1px solid var(--borde); }
.fc-chip.fuerte { background: var(--verde-suave); color: var(--primario); border-color: transparent; font-weight: 700; font-family: ui-monospace, Consolas, monospace; }
.fc-chip.tenue { background: none; color: var(--tenue); }
.fc-codigo { display: flex; flex-direction: column; gap: 4px; width: 210px; }
.fc-codigo[hidden] { display: none; }
.fc-codigo span { font-size: 12px; font-weight: 600; color: var(--texto-2); }
.fc-codigo input { padding: 9px 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto);
  font: 600 15px ui-monospace, Consolas, monospace; }
.fc-codigo input:focus { outline: none; border-color: var(--serie-actual); box-shadow: 0 0 0 3px var(--verde-suave); }
.fc-codigo.con-error input { border-color: var(--critico); background: var(--critico-fondo); }

.fc-contenido { flex: 1; min-height: 0; display: grid; grid-template-columns: 250px minmax(0, 1fr); }
.fc-nav { display: flex; flex-direction: column; gap: 4px; padding: 16px 12px; border-right: 1px solid var(--borde); background: var(--superficie); overflow: auto; }
.fc-tab { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left; border: 0; background: none; color: var(--texto-2);
  padding: 9px 10px; border-radius: 12px; cursor: pointer; font: inherit; position: relative; }
.fc-tab:hover { background: var(--superficie-2); color: var(--texto); }
.fc-tab[aria-selected="true"] { background: var(--verde-suave); color: var(--texto); }
.fc-tab[aria-selected="true"]::before { content: ""; position: absolute; left: -12px; top: 10px; bottom: 10px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primario); }
.fc-tab-icono { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--superficie-2); color: var(--texto-2); }
.fc-tab[aria-selected="true"] .fc-tab-icono { background: var(--primario); color: var(--sobre-primario); }
.fc-tab-icono svg { width: 17px; height: 17px; }
.fc-tab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.fc-tab-txt b { font-size: 14px; }
.fc-tab-txt small { font-size: 11.5px; color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fc-tab-info { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.fc-rellenos { font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }
.fc-tab .errores-tab { background: var(--critico); color: #fff; border-radius: 999px; font-size: 11px; font-weight: 700; padding: 0 7px; line-height: 18px; }

.fc-cuerpo { padding: 20px 26px 30px; overflow: auto; min-height: 0; scroll-behavior: smooth; }
.fc-panel-cab { margin: 0 0 16px; }
.fc-panel-cab h3 { margin: 0; font-size: 19px; }
.fc-panel-cab p { margin: 2px 0 0; color: var(--tenue); font-size: 13px; }
.fc-grupo { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; margin: 0 0 16px; padding: 16px 18px 18px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03); }
.fc-grupo h4 { margin: 0 0 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .7px; color: var(--texto-2);
  display: flex; align-items: center; gap: 10px; }
.fc-grupo h4::after { content: ""; flex: 1; height: 1px; background: var(--borde); }
.fc-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 20px; }
.fc-grupo.tres .fc-rejilla { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.campo-ficha { display: flex; flex-direction: column; gap: 5px; min-width: 0; position: relative; }
.campo-ficha.ancho { grid-column: 1 / -1; }
.campo-ficha > span, .campo-ficha .etq { font-size: 12.5px; font-weight: 600; color: var(--texto-2); }
.campo-ficha input, .campo-ficha select {
  width: 100%; height: 40px; padding: 0 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto);
  font-size: 14.5px; transition: border-color .15s, box-shadow .15s, background .15s;
}
.campo-ficha input.num { text-align: right; font-variant-numeric: tabular-nums; }
.campo-ficha input:hover, .campo-ficha select:hover { border-color: var(--tenue); }
.campo-ficha input:focus, .campo-ficha select:focus { outline: none; border-color: var(--serie-actual); box-shadow: 0 0 0 3px var(--verde-suave); }
.campo-ficha.cambiado > span::after, .campo-ficha.cambiado > .etq::after { content: "modificado"; margin-left: 8px; font-size: 10.5px; font-weight: 700;
  color: var(--texto-aviso); background: var(--aviso-fondo); border-radius: 999px; padding: 1px 7px; }
.campo-ficha.cambiado input, .campo-ficha.cambiado select, .campo-ficha.cambiado .combo-caja { border-color: var(--borde-aviso); }
.campo-ficha.con-error input, .campo-ficha.con-error select, .campo-ficha.con-error .combo-caja { border-color: var(--critico); background: var(--critico-fondo); }
.campo-ficha .pendiente { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--aviso-fondo); color: var(--texto-aviso); font-size: 10px; margin-left: 4px; cursor: help; }
.combo-ficha .combo-caja { min-width: 0; width: 100%; height: 40px; padding: 0 8px; border-radius: 10px; }
.combo-ficha input { font-weight: 400; height: auto !important; border: 0 !important; box-shadow: none !important; background: none !important; padding: 0 4px !important; }
.cp-fila { display: flex; gap: 8px; align-items: center; }
.cp-fila .combo-cp { flex: 1; min-width: 0; }
.cp-fila .combo-nacion { flex: 0 0 200px; min-width: 0; }
.cp-fila .combo-nac { flex: 1; min-width: 0; }
.combo.bloqueado .combo-caja { background: var(--superficie-2); }
.combo.bloqueado button { display: none; }
/* ---------- Mantenimiento de tablas auxiliares ---------- */
.dialogo-aux { width: min(720px, calc(calc(100vw / var(--zoom, 1)) - 32px)); border-radius: 18px; }
.dialogo-aux .dialogo-cuerpo { background: var(--fondo); }
.aux-nav { display: flex; gap: 6px; padding: 4px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde); }
.aux-btn { width: 38px; height: 38px; padding: 0; display: grid; place-items: center; border-radius: 9px; }
.aux-btn svg { width: 18px; height: 18px; }
.aux-btn[aria-pressed="true"] { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.aux-modo { display: flex; align-items: center; gap: 10px; margin: 16px 22px 0; padding: 9px 12px; border-radius: 10px; font-size: 13.5px;
  background: var(--superficie); border: 1px solid var(--borde); color: var(--texto-2); }
.aux-modo svg { width: 17px; height: 17px; flex: none; }
.aux-modo.buscar { background: var(--info-fondo); border-color: transparent; color: var(--info); }
.aux-modo.nuevo { background: var(--verde-suave); border-color: transparent; color: var(--primario); }
.aux-cuerpo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 18px; padding: 18px 22px 20px; margin: 14px 22px 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; }
.aux-cuerpo input[readonly] { background: var(--superficie-2); color: var(--texto-2); }
.campo-ficha .oblig { color: var(--critico); }
.fc-pie [data-buscar] { display: inline-flex; align-items: center; gap: 6px; }
.fc-pie [data-buscar] svg { width: 16px; height: 16px; }
.dialogo-aux .fc-resultado { padding-right: 14px; }
/* ---------- Ventana emergente con la lista de una tabla auxiliar ---------- */
.dialogo-lista-aux { width: min(1100px, calc(calc(100vw / var(--zoom, 1)) - 32px)); height: min(820px, calc(calc(100vh / var(--zoom, 1)) - 48px)); border-radius: 18px; }
.dialogo-lista-aux .dialogo-cuerpo { height: 100%; }
.la-barra { padding: 12px 22px 0; }
.la-scroll { flex: 1; min-height: 0; margin: 10px 22px 0; border: 1px solid var(--borde); border-radius: 12px; }
.la-tabla tbody tr { cursor: pointer; }
.la-tabla tbody tr:hover, .la-tabla tbody tr:focus { background: var(--verde-fila); outline: none; }
.la-sub { margin: 10px 22px 0; }
.la-scroll { margin-bottom: 16px !important; }
@media (max-width: 700px) { .aux-cuerpo { grid-template-columns: 1fr; } .cp-fila { flex-wrap: wrap; } .cp-fila .combo-nacion { flex: 1 1 100%; } }
.cp-nuevo { flex: none; width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border-radius: 10px; }
.cp-nuevo svg { width: 18px; height: 18px; }
.marca-mini { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; padding-right: 14px; margin-right: 2px; border-right: 1px solid var(--borde); }
.marca-mini img { width: 34px; height: 34px; display: block; }
.marca-mini span { font-size: 9.5px; color: var(--tenue); white-space: nowrap; letter-spacing: .2px; }
.dialogo-cp { width: min(560px, calc(calc(100vw / var(--zoom, 1)) - 32px)); border-radius: 18px; }
.dialogo-cp .dialogo-cuerpo { background: var(--fondo); }
.cp-sub { margin: 0; font-size: 13px; color: var(--texto-2); }
.cp-cuerpo { display: grid; grid-template-columns: 110px 1fr; gap: 14px 16px; padding: 20px 22px; }
.cp-cuerpo .nacion-cp { text-transform: uppercase; text-align: center; }
.dialogo-cp .fc-resultado { padding-right: 14px; }
.cp-fila .nacion { width: 70px !important; flex: none; text-transform: uppercase; text-align: center; }
.cp-fila input[data-cp] { width: 120px !important; flex: none; font-variant-numeric: tabular-nums; }
.cp-fila .poblacion { font-weight: 600; color: var(--info); font-size: 14px; }

.fc-resultado { flex: none; position: relative; margin: 0 22px 12px; border-radius: 12px; padding: 12px 40px 12px 14px; font-size: 14px; max-height: calc(34vh / var(--zoom, 1)); overflow: auto;
  border: 1px solid transparent; box-shadow: var(--sombra); }
.fc-resultado-cerrar { position: absolute; top: 8px; right: 8px; }
.fc-resultado.ok { background: var(--bien-fondo); color: var(--texto-bien); border-color: var(--bien); }
.fc-resultado.ko { background: var(--critico-fondo); color: var(--texto-critico); border-color: var(--critico); }
.fc-resultado.info { background: var(--superficie); color: var(--texto-2); border-color: var(--borde); }
.fc-resultado ul { margin: 6px 0 0 18px; padding: 0; }
.fc-resultado a { color: inherit; }
.fc-resultado details { margin-top: 8px; color: var(--texto); }
.fc-resultado summary { cursor: pointer; font-weight: 600; }
.fc-resultado table { margin-top: 6px; background: var(--superficie); border-radius: 8px; }
.fc-resultado td.antes { color: var(--tenue); text-decoration: line-through; }
.fc-avisos { color: var(--texto-aviso); }
.fc-pie { flex: none; display: flex; align-items: center; gap: 10px; padding: 14px 22px; background: var(--superficie); border-top: 1px solid var(--borde); }
.fc-pie .hueco { flex: 1; }
.fc-pie .btn { height: 40px; padding: 0 18px; border-radius: 10px; }
.fc-nota { font-size: 13px; color: var(--tenue); }
.fc-nota.pendiente { color: var(--texto-aviso); font-weight: 600; }
.fc-nota.pendiente::before { content: "●"; margin-right: 6px; }
.fc-aviso { margin-bottom: 14px; }
@media (max-width: 900px) {
  .fc-contenido { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .fc-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); padding: 8px; }
  .fc-tab { width: auto; flex: none; }
  .fc-tab-txt small, .fc-tab-info .fc-rellenos, .fc-tab[aria-selected="true"]::before { display: none; }
  .fc-rejilla, .fc-grupo.tres .fc-rejilla { grid-template-columns: 1fr; }
  .fc-cab { flex-wrap: wrap; }
}

/* ---------- Vista previa: totales, pestañas y gráfico ---------- */
.detalle-cab .det-botones { margin-left: auto; display: inline-flex; gap: 8px; }
.detalle-cab .btn-editar { display: inline-flex; align-items: center; gap: 6px; }
.detalle-cab .btn-editar .icono { width: 15px; height: 15px; }
.previa-totales { margin: 0 0 16px; }
.previa-periodo { margin: 0 0 8px; font-size: 12px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.previa-cifras { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 8px; }
.previa-cifra { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.previa-cifra span { display: block; font-size: 11.5px; color: var(--tenue); }
.previa-cifra b { display: block; font-size: 17px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.previa-cifra.destacada { background: var(--verde-suave); border-color: transparent; }
.previa-cifra.destacada b { color: var(--primario); }
.previa-cifra.critico b { color: var(--texto-critico); }
.previa-tabs { margin: 0 0 14px; }
.previa-tabs .lista-tab { display: inline-flex; align-items: center; gap: 6px; }
.previa-tabs .icono { width: 15px; height: 15px; }
.previa-grafico { border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; margin-bottom: 14px; }
.previa-grafico-cab { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.previa-grafico-cab h3 { margin: 0; font-size: 15px; }
.previa-grafico .grafico { height: 200px; }
.previa-datos { margin-top: 8px; font-size: 13px; }
.previa-datos summary { cursor: pointer; color: var(--texto-2); }

/* ---------- Relación entre documentos ---------- */
/* redimensionable desde la esquina inferior derecha; «maximizada» ocupa toda la pantalla */
.dialogo-relaciones { width: min(1320px, calc(calc(100vw / var(--zoom, 1)) - 24px)); height: min(860px, calc(calc(100vh / var(--zoom, 1)) - 32px)); max-width: calc(calc(100vw / var(--zoom, 1)) - 8px);
  max-height: calc(calc(100vh / var(--zoom, 1)) - 8px); min-width: 560px; min-height: 420px; border-radius: 18px; resize: both; overflow: hidden; }
.dialogo-relaciones.maximizada { width: calc(100vw / var(--zoom, 1)); height: calc(100vh / var(--zoom, 1)); max-width: calc(100vw / var(--zoom, 1)); max-height: calc(100vh / var(--zoom, 1)); border-radius: 0; resize: none; margin: 0; }
.dialogo-relaciones::after { content: ""; position: absolute; right: 3px; bottom: 3px; width: 12px; height: 12px; pointer-events: none; opacity: .5;
  background: linear-gradient(135deg, transparent 45%, var(--tenue) 45%, var(--tenue) 52%, transparent 52%, transparent 70%, var(--tenue) 70%, var(--tenue) 77%, transparent 77%); }
.dialogo-relaciones.maximizada::after { display: none; }
.dialogo-relaciones .fc-cab { cursor: default; user-select: none; }
.rel-tip { position: fixed; z-index: 5; max-width: min(620px, calc(90vw / var(--zoom, 1))); background: var(--superficie); color: var(--texto); border: 1px solid var(--borde-fuerte);
  border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .22); padding: 10px 12px; font-size: 12.5px; pointer-events: none;
  animation: rel-aparecer .15s ease-out both; }
.rel-tip-cab { display: flex; align-items: baseline; gap: 6px; margin-bottom: 6px; }
.rel-tip-cab span { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; }
.rel-tip-cab b { font-family: ui-monospace, Consolas, monospace; }
.rel-tip-cab small { margin-left: auto; color: var(--tenue); }
.rel-tip table { border-collapse: collapse; width: 100%; }
.rel-tip th { text-align: left; font-size: 11px; color: var(--tenue); font-weight: 600; padding: 3px 8px; border-bottom: 1px solid var(--borde); }
.rel-tip td { padding: 3px 8px; border-bottom: 1px solid var(--borde); white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.rel-tip th.n, .rel-tip td.n { text-align: right; font-variant-numeric: tabular-nums; }
.rel-tip td.cod { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--texto-2); }
.rel-tip tr:last-child td { border-bottom: 0; }
.rel-tip-mas { margin: 6px 0 0; color: var(--tenue); }
.dialogo-relaciones .dialogo-cuerpo { height: 100%; max-height: none; background: var(--fondo); }
.fc-chip.boton { cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; font-size: 12px; }
.fc-chip.boton svg { width: 13px; height: 13px; }
.fc-chip.boton:hover { background: var(--verde-suave); color: var(--texto); }

.rel-ciclo { flex: none; display: grid; grid-template-columns: 1fr auto; gap: 8px 18px; padding: 14px 22px; border-bottom: 1px solid var(--borde); background: var(--superficie); }
.rel-ciclo-fila { grid-column: 1; display: flex; align-items: stretch; gap: 6px; min-width: 0; }
.rel-ciclo-carril { writing-mode: vertical-rl; transform: rotate(180deg); font-size: 10.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: var(--tenue); text-align: center; }
.rel-paso { flex: 1; min-width: 0; padding: 8px 10px; border-radius: 12px; background: var(--superficie-2); border: 1px solid var(--borde);
  display: flex; flex-direction: column; gap: 2px; position: relative; overflow: hidden; }
.rel-paso::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--color); }
.rel-paso.vacio { opacity: .45; }
.rel-paso-titulo { font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; }
.rel-paso-titulo small { color: var(--color); font-weight: 700; margin-left: 4px; }
.rel-paso b { font-size: 16px; font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-paso-pend { font-size: 11.5px; color: var(--texto-aviso); }
.rel-barra { height: 4px; border-radius: 4px; background: var(--borde); margin-top: 4px; overflow: hidden; }
.rel-barra i { display: block; height: 100%; background: var(--color); border-radius: 4px; transform-origin: left; animation: rel-crecer .9s cubic-bezier(.2,.8,.2,1) both; }
.rel-flecha { align-self: center; color: var(--tenue); flex: none; }
.rel-flecha svg { width: 15px; height: 15px; }
.rel-ciclo-dias { grid-column: 2; grid-row: 1 / span 2; align-self: center; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-width: 124px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, var(--primario), var(--serie-actual)); color: var(--sobre-primario); }
.rel-ciclo-dias b { font-size: 30px; line-height: 1; }
.rel-ciclo-dias span { font-size: 12px; opacity: .9; }
.rel-ciclo-dias small { font-size: 10.5px; opacity: .8; margin-top: 3px; white-space: nowrap; }

.rel-contenido { flex: 1; min-height: 0; display: flex; position: relative; }
.rel-lienzo { flex: 1; min-width: 0; overflow: auto; position: relative; outline: none; display: flex; padding: 12px 0 24px;
  background-image: radial-gradient(var(--borde) 1px, transparent 1px); background-size: 22px 22px; }
.rel-escena { position: relative; margin: auto; flex: none; }
.rel-carril { position: absolute; left: 8px; right: 8px; border-radius: 16px; border: 1px dashed var(--borde-fuerte); background: color-mix(in srgb, var(--superficie) 55%, transparent); }
.rel-carril span { position: absolute; left: -1px; top: 50%; transform: translate(-30%, -50%) rotate(-90deg); font-size: 10.5px; font-weight: 700;
  letter-spacing: 1px; text-transform: uppercase; color: var(--tenue); background: var(--fondo); padding: 0 6px; }
.rel-columna { position: absolute; top: 4px; display: flex; align-items: center; justify-content: space-between; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .6px; color: var(--color); padding: 0 4px; }
.rel-columna span { display: inline-flex; align-items: center; gap: 6px; }
.rel-columna svg { width: 15px; height: 15px; }
.rel-columna small { color: var(--tenue); }
.rel-svg { position: absolute; inset: 0; pointer-events: none; overflow: visible; }
.rel-enlace { fill: none; stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .75;
  animation: rel-dibujar .8s ease-out forwards; animation-delay: var(--retraso); transition: opacity .2s, stroke-width .2s; }
.rel-escena.enfocada .rel-enlace { opacity: .12; }
.rel-escena.enfocada .rel-enlace.en-cadena { opacity: 1; stroke-width: 3.2; stroke-dasharray: .02 .015; animation: rel-fluir 1.2s linear infinite; }
.rel-nodo { position: absolute; width: 214px; height: 92px; padding: 9px 11px 8px 14px; text-align: left; border-radius: 14px; cursor: pointer; font: inherit;
  background: var(--superficie); color: var(--texto); border: 1px solid var(--borde); box-shadow: var(--sombra);
  display: flex; flex-direction: column; gap: 3px; overflow: visible;
  animation: rel-aparecer .45s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--retraso); transition: transform .15s, box-shadow .15s, opacity .2s, border-color .15s; }
.rel-nodo::before { content: ""; position: absolute; left: 0; top: 10px; bottom: 10px; width: 4px; border-radius: 0 4px 4px 0; background: var(--color); }
.rel-nodo:hover, .rel-nodo:focus-visible { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0, 0, 0, .14); border-color: var(--color); outline: none; }
.rel-nodo.sel { border-color: var(--color); box-shadow: 0 0 0 3px color-mix(in srgb, var(--color) 30%, transparent), var(--sombra); }
.rel-escena.enfocada .rel-nodo:not(.en-cadena) { opacity: .35; }
.rel-nodo.inicio { border: 2px solid var(--color); animation: rel-aparecer .45s cubic-bezier(.2,.8,.2,1) both, rel-latido 2.4s ease-in-out 1s infinite; }
.rel-nodo.perdido { border-style: dashed; opacity: .7; }
.rel-nodo-cab { display: flex; align-items: center; gap: 6px; min-width: 0; }
.rel-nodo-cab b { font-size: 14px; font-family: ui-monospace, Consolas, monospace; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-icono { flex: none; width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; color: var(--color);
  background: color-mix(in srgb, var(--color) 14%, transparent); }
.rel-icono svg { width: 13px; height: 13px; }
.rel-mas { margin-left: auto; flex: none; font-size: 11px; font-weight: 700; color: var(--texto-aviso); background: var(--aviso-fondo); border-radius: 999px; padding: 0 7px; }
.rel-nodo-nombre { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rel-nodo-pie { margin-top: auto; display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--tenue); }
.rel-nodo-pie b { color: var(--texto); font-variant-numeric: tabular-nums; }
.rel-estado { position: absolute; right: 8px; top: -10px; transform: scale(.86); transform-origin: right; }
.rel-aqui { position: absolute; left: 12px; bottom: -11px; font-size: 10px; font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
  background: var(--color); color: #fff; border-radius: 999px; padding: 1px 8px; }
.rel-panel { flex: none; width: 320px; border-left: 1px solid var(--borde); background: var(--superficie); padding: 18px; overflow: auto; position: relative;
  animation: rel-panel .25s ease-out; }
.rel-panel h3 { margin: 2px 0 8px; font-family: ui-monospace, Consolas, monospace; }
.rel-panel .campos { grid-template-columns: 1fr; margin-top: 14px; }
.rel-panel-cerrar { position: absolute; top: 10px; right: 10px; }
.rel-panel-botones { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.rel-panel-botones .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.rel-panel-botones svg { width: 15px; height: 15px; }
.rel-mas-txt { font-size: 13px; color: var(--texto-2); background: var(--aviso-fondo); border-radius: 10px; padding: 8px 10px; }
.rel-pie { flex: none; display: flex; align-items: center; gap: 14px; padding: 10px 22px; border-top: 1px solid var(--borde); background: var(--superficie); font-size: 12.5px; color: var(--texto-2); }
.rel-pie > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.rel-pie svg { width: 14px; height: 14px; }
.rel-pie .hueco { flex: 1; }
.rel-aviso { color: var(--texto-aviso); font-weight: 600; }
.rel-leyenda { color: var(--tenue); }
.rel-cargando { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; color: var(--texto-2); }
.rel-pulso { display: flex; gap: 10px; align-items: center; }
.rel-pulso i { width: 14px; height: 14px; border-radius: 50%; background: var(--primario); opacity: .25; animation: rel-onda 1.2s ease-in-out infinite; animation-delay: calc(var(--i) * .12s); }
.rel-error { margin: 30px; }
@keyframes rel-dibujar { to { stroke-dashoffset: 0; } }
@keyframes rel-fluir { to { stroke-dashoffset: -.35; } }
@keyframes rel-aparecer { from { opacity: 0; transform: translateY(8px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes rel-latido { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--color) 35%, transparent), var(--sombra); } 50% { box-shadow: 0 0 0 8px transparent, var(--sombra); } }
@keyframes rel-crecer { from { transform: scaleX(0); } }
@keyframes rel-panel { from { transform: translateX(20px); opacity: 0; } }
@keyframes rel-onda { 0%, 100% { opacity: .25; transform: scale(.8); } 50% { opacity: 1; transform: scale(1.15); } }
@media (prefers-reduced-motion: reduce) { .rel-enlace, .rel-nodo, .rel-barra i, .rel-pulso i { animation: none !important; stroke-dashoffset: 0; } }
@media (max-width: 900px) { .rel-ciclo { grid-template-columns: 1fr; } .rel-ciclo-dias { grid-column: 1; grid-row: auto; flex-direction: row; gap: 8px; }
  .rel-ciclo-fila { overflow-x: auto; } .rel-paso { min-width: 120px; } .rel-panel { position: absolute; right: 0; top: 0; bottom: 0; width: min(320px, 90%); } }

/* ---------- Filtro de columna estilo Excel ---------- */
.th-contenido { display: inline-flex; align-items: center; gap: 4px; max-width: 100%; }
.tabla th.n .th-contenido { flex-direction: row-reverse; }
.th-titulo { white-space: nowrap; }
.th-filtro { flex: none; border: 0; background: none; padding: 2px; margin: -2px 0; border-radius: 5px; cursor: pointer; color: var(--tenue);
  display: inline-grid; place-items: center; opacity: .55; transition: opacity .15s, background .15s, color .15s; }
.th-filtro svg { width: 12px; height: 12px; }
.tabla th:hover .th-filtro, .th-filtro:focus-visible { opacity: 1; }
.th-filtro:hover, .th-filtro.abierto { background: var(--superficie-2); color: var(--texto); opacity: 1; }
.th-filtro.activo { opacity: 1; color: var(--sobre-primario); background: var(--primario); }
.th-filtro.activo svg { fill: currentColor; }
.filtro-pop { position: fixed; z-index: 60; width: 270px; background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, .18); padding: 10px; display: flex; flex-direction: column; gap: 6px;
  font-size: 13.5px; text-transform: none; letter-spacing: 0; font-weight: 400; animation: rel-aparecer .12s ease-out both; }
.fp-cab { display: flex; align-items: center; justify-content: space-between; font-weight: 700; font-size: 13px; }
.fp-cab span { display: inline-flex; align-items: center; gap: 6px; }
.fp-cab svg { width: 13px; height: 13px; }
.fp-texto input { width: 100%; padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; }
.fp-texto input:focus { outline: none; border-color: var(--serie-actual); box-shadow: 0 0 0 3px var(--verde-suave); }
.fp-texto input.invalido { border-color: var(--critico); background: var(--critico-fondo); }
.fp-ayuda { margin: -2px 0 0; font-size: 11px; color: var(--tenue); }
.fp-acciones { display: flex; justify-content: space-between; padding: 4px 2px; border-bottom: 1px solid var(--borde); }
.fp-acciones button { border: 0; background: none; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; padding: 2px 0; }
.fp-acciones button + button { color: var(--tenue); font-weight: 500; }
.fp-acciones button:hover { color: var(--primario); }
.fp-lista { list-style: none; margin: 0; padding: 0; max-height: 240px; overflow: auto; }
.fp-lista li label { display: flex; align-items: center; gap: 8px; padding: 5px 4px; border-radius: 6px; cursor: pointer; }
.fp-lista li label:hover { background: var(--superficie-2); }
.fp-lista input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--primario); flex: none; margin: 0; }
.fp-valor { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-valor.fp-vacia { color: var(--tenue); font-style: italic; }
.fp-lista small { color: var(--tenue); font-variant-numeric: tabular-nums; }
.fp-info { color: var(--tenue); font-size: 12.5px; padding: 6px 4px; }
.fp-pie { display: flex; justify-content: space-between; gap: 8px; padding-top: 6px; border-top: 1px solid var(--borde); }
.fp-pie .btn { padding: 5px 12px; font-size: 13px; }

/* ---------- Vista previa: cabecera fija con acceso rápido a sus tablas ---------- */
.detalle-fija { position: sticky; top: -16px; z-index: 3; margin: -16px -18px 0; padding: 16px 18px 10px; background: var(--superficie);
  border-radius: var(--radio) var(--radio) 0 0; }
.detalle-fija .detalle-cab { row-gap: 8px; }
.det-saltos { display: flex; flex-wrap: wrap; gap: 5px; margin-left: auto; justify-content: flex-end; }
.det-salto { display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--borde); background: var(--superficie-2); color: var(--texto-2);
  border-radius: 999px; padding: 3px 10px; font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, color .15s, border-color .15s; }
.det-salto small { font-weight: 700; color: var(--tenue); font-variant-numeric: tabular-nums; }
.det-salto:hover { background: var(--verde-suave); border-color: var(--borde-acento); color: var(--texto); }
.det-salto.actual { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.det-salto.actual small { color: inherit; opacity: .8; }
.det-salto.arriba { padding: 3px 6px; }
.det-salto.arriba svg { width: 13px; height: 13px; }
.detalle-cab .det-saltos + .det-botones { margin-left: 0; }
.sub-bloque.destacada { animation: sub-destello 1.2s ease-out; }
@keyframes sub-destello { 0% { box-shadow: 0 0 0 3px var(--serie-actual); } 100% { box-shadow: 0 0 0 3px transparent; } }

/* ---------- Tablas enlazadas de la vista previa ---------- */
.sub-bloque tr.enlazable { cursor: pointer; }
.sub-bloque tr.enlazable:hover td { background: var(--verde-fila); }
.sub-bloque tr.enlazable.sel td { background: var(--verde-suave); box-shadow: inset 0 1px 0 var(--borde-acento), inset 0 -1px 0 var(--borde-acento); }
.sub-bloque tr.enlazable.sel td:first-child { box-shadow: inset 3px 0 0 var(--primario), inset 0 1px 0 var(--borde-acento), inset 0 -1px 0 var(--borde-acento); }
.sub-enlace { display: inline-flex; align-items: center; gap: 4px; border: 0; border-radius: 999px; padding: 2px 8px; cursor: pointer; font: inherit;
  font-size: 11px; font-weight: 700; letter-spacing: 0; text-transform: none; background: var(--primario); color: var(--sobre-primario); }
.sub-enlace svg { width: 11px; height: 11px; }

/* ---------- Fechas escritas a mano (dd/mm/aaaa) con botón de calendario ---------- */
input.fecha-texto { font-variant-numeric: tabular-nums; }
.fecha input.fecha-texto { width: 108px; padding-right: 30px; }
.campo-ficha input.fecha-texto { padding-right: 36px; }
.fecha-cal { border: 0; background: none; color: var(--tenue); cursor: pointer; padding: 3px; border-radius: 6px; display: inline-grid; place-items: center;
  margin-left: -32px; width: 26px; height: 26px; position: relative; z-index: 1; flex: none; }
.campo-ficha .fecha-cal { position: absolute; right: 7px; bottom: 7px; margin: 0; }
.fecha-cal:hover { color: var(--texto); background: var(--superficie-2); }
.fecha-cal svg { width: 15px; height: 15px; }
.fecha-nativa { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; border: 0; padding: 0; margin: 0; }

/* ---------- Búsqueda general (cabecera) ---------- */
.gb { position: relative; flex: 0 1 300px; min-width: 200px; display: flex; align-items: center; gap: 6px; height: 40px; padding: 0 8px 0 12px;
  border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde-fuerte); transition: flex-basis .25s ease, box-shadow .2s, border-color .2s; isolation: isolate; }
.gb:focus-within { flex-basis: 420px; border-color: var(--serie-actual); box-shadow: 0 0 0 3px var(--verde-suave); }
.gb input { flex: 1; min-width: 0; border: 0; background: none; outline: none; color: var(--texto); font: inherit; font-size: 14.5px; }
.gb-lupa { color: var(--tenue); display: grid; place-items: center; }
.gb-lupa .icono, .gb-lupa svg { width: 17px; height: 17px; }
.gb-atajo { font: 600 10.5px ui-monospace, Consolas, monospace; color: var(--tenue); border: 1px solid var(--borde); border-radius: 5px; padding: 1px 5px; background: var(--superficie-2); }
.gb:focus-within .gb-atajo, .gb-borrar:not([hidden]) ~ .gb-atajo { display: none; }
.gb input:not(:placeholder-shown) ~ .gb-atajo { display: none; }
.gb-borrar { order: 3; border: 0; background: var(--superficie-2); color: var(--texto-2); width: 24px; height: 24px; border-radius: 50%; cursor: pointer; display: grid; place-items: center; flex: none; }
.gb-borrar:hover { background: var(--critico-fondo); color: var(--texto-critico); }
.gb-borrar .icono, .gb-borrar svg { width: 13px; height: 13px; }
/* borde de colores de Ecinsa que gira mientras busca */
.gb.buscando { border-color: transparent; }
.gb.buscando::before { content: ""; position: absolute; inset: -2px; border-radius: 14px; z-index: -2; padding: 2px;
  background: conic-gradient(from var(--gb-giro, 0deg), #4338CA, #22D3EE, #FFB200, #F3EC92, #4338CA);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude;
  animation: gb-giro 1.4s linear infinite; }
.gb.buscando::after { content: ""; position: absolute; inset: 0; border-radius: 12px; z-index: -1; background: var(--superficie); }
.gb.buscando .gb-lupa { color: var(--primario); animation: gb-lupa 1.1s ease-in-out infinite; }
@property --gb-giro { syntax: "<angle>"; initial-value: 0deg; inherits: false; }
@keyframes gb-giro { to { --gb-giro: 360deg; } }
@keyframes gb-lupa { 0%, 100% { transform: translate(0, 0) rotate(0); } 25% { transform: translate(2px, -2px) rotate(-12deg); } 75% { transform: translate(-2px, 2px) rotate(12deg); } }

/* panel de resultados */
.gb-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(560px, calc(calc(100vw / var(--zoom, 1)) - 24px)); max-height: min(calc(72vh / var(--zoom, 1)), 680px);
  display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22);
  z-index: 40; overflow: hidden; animation: rel-aparecer .18s ease-out both; }
.gb-cab { display: flex; align-items: center; gap: 12px; padding: 14px 14px 10px; }
.gb-anillo { position: relative; width: 44px; height: 44px; flex: none; }
.gb-anillo svg { width: 100%; height: 100%; transform: rotate(-90deg); }
.gb-anillo circle { fill: none; stroke-width: 4; }
.gb-anillo .fondo { stroke: var(--borde); }
.gb-anillo .avance { stroke: var(--primario); stroke-linecap: round; transition: stroke-dashoffset .35s ease; }
.gb-anillo.girando svg { animation: gb-anillo 2.4s linear infinite; }
.gb-anillo span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 11px; font-weight: 800; color: var(--primario); }
.gb-anillo span svg { width: 17px; height: 17px; transform: none; animation: none; }
@keyframes gb-anillo { from { transform: rotate(-90deg); } to { transform: rotate(270deg); } }
.gb-cab-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.gb-cab-txt b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-cab-txt small { color: var(--tenue); font-size: 12px; }
.gb-periodo { border: 0; background: none; color: var(--primario); font: inherit; font-weight: 600; cursor: pointer; padding: 0 0 0 6px; }
.gb-periodo:hover { text-decoration: underline; }
.gb-barra { height: 3px; background: var(--superficie-2); margin: 0 14px; border-radius: 3px; overflow: hidden; }
.gb-barra i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg, #4338CA, #22D3EE, #FFB200); transition: width .35s ease; }
.gb-cuerpo { overflow: auto; padding: 10px 12px 14px; display: flex; flex-direction: column; gap: 12px; }
.gb-grupo h4 { margin: 0 0 6px; display: flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-2); }
.gb-grupo h4 svg { width: 14px; height: 14px; }
.gb-grupo h4 small { color: var(--primario); }
.gb-res { display: flex; flex-direction: column; gap: 3px; width: 100%; text-align: left; border: 1px solid var(--borde); background: var(--superficie); color: var(--texto);
  border-radius: 12px; padding: 9px 11px; margin-bottom: 6px; cursor: pointer; font: inherit; animation: gb-entra .35s cubic-bezier(.2, .8, .2, 1) both;
  animation-delay: calc(var(--i) * 45ms); transition: border-color .15s, transform .15s, box-shadow .15s; }
.gb-res:hover, .gb-res:focus-visible { border-color: var(--serie-actual); transform: translateX(3px); box-shadow: var(--sombra); outline: none; }
.gb-res-cab { display: flex; align-items: center; justify-content: space-between; }
.gb-res-cab b { font-size: 13.5px; }
.gb-num { font-weight: 800; font-size: 12px; color: var(--sobre-primario); background: var(--primario); border-radius: 999px; padding: 1px 9px; }
.gb-fila { display: flex; align-items: baseline; gap: 8px; font-size: 12.5px; color: var(--texto-2); min-width: 0; }
.gb-fila code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--texto); flex: none; }
.gb-fila-txt { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.gb-fila i { font-style: normal; font-variant-numeric: tabular-nums; color: var(--tenue); flex: none; }
.gb-mas { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--primario); font-weight: 600; }
.gb-mas svg { width: 12px; height: 12px; }
.gb-panel mark, mark.gb-marca { background: #FFE58A; color: #1d2521; border-radius: 3px; padding: 0 1px; }
.gb-nada, .gb-errores { margin: 4px 4px 0; color: var(--tenue); font-size: 13px; }
.gb-errores { color: var(--texto-aviso); padding: 0 14px 12px; }
@keyframes gb-entra { from { opacity: 0; transform: translateY(8px); } }
/* radar mientras no hay resultados */
.gb-radar { position: relative; height: 150px; display: grid; place-items: center; }
.gb-radar i { position: absolute; width: 40px; height: 40px; border-radius: 50%; border: 2px solid var(--primario); opacity: 0; animation: gb-onda 1.8s ease-out infinite; }
.gb-radar i:nth-child(2) { animation-delay: .6s; }
.gb-radar i:nth-child(3) { animation-delay: 1.2s; }
.gb-radar span { width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--primario); color: var(--sobre-primario);
  box-shadow: 0 8px 24px color-mix(in srgb, var(--primario) 40%, transparent); animation: gb-lupa 1.1s ease-in-out infinite; }
.gb-radar span svg { width: 20px; height: 20px; }
@keyframes gb-onda { 0% { transform: scale(.6); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }

/* módulos y pestañas: escaneando, encontrado (lupa encendida) y sin resultados */
.modulo, #lista-tabs .lista-tab { position: relative; }
.gb-insignia { display: inline-flex; align-items: center; gap: 3px; margin-left: 4px; font-size: 11px; font-weight: 800; padding: 1px 7px 1px 5px; border-radius: 999px;
  background: #FFB200; color: #1d2521; box-shadow: 0 0 0 2px color-mix(in srgb, #FFB200 30%, transparent), 0 0 14px color-mix(in srgb, #FFB200 55%, transparent); }
.gb-insignia svg { width: 11px; height: 11px; }
.gb-insignia.pop { animation: gb-pop .45s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes gb-pop { 0% { transform: scale(.3); } 100% { transform: scale(1); } }
.modulo.gb-encontrado, #lista-tabs .lista-tab.gb-encontrado { border-color: #FFB200; }
.modulo.gb-escaneando::after, #lista-tabs .lista-tab.gb-escaneando::after { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, #22D3EE 45%, transparent), transparent); background-size: 200% 100%; animation: gb-barrido 1s linear infinite; }
@keyframes gb-barrido { from { background-position: 200% 0; } to { background-position: -200% 0; } }
.modulo.gb-vacio, #lista-tabs .lista-tab.gb-vacio { opacity: .45; }
@media (prefers-reduced-motion: reduce) { .gb.buscando::before, .gb-anillo.girando svg, .gb-radar i, .gb-radar span, .gb-res, .gb-insignia.pop,
  .modulo.gb-escaneando::after { animation: none !important; } }
@media (max-width: 1250px) { .gb { flex-basis: 200px; } .gb:focus-within { flex-basis: 300px; } .gb-atajo { display: none; } }
/* en la cabecera la insignia va como burbuja en la esquina del módulo: no ensancha los botones */
.modulos { flex-wrap: nowrap; }
.modulo { flex: none; }
.modulo .gb-insignia { position: absolute; top: -9px; right: -8px; margin: 0; z-index: 1; pointer-events: none; }
.cabecera-marca { flex: none; }
.gb { flex: 0 1 250px; min-width: 150px; }
.gb:focus-within { flex-basis: 340px; }
.cabecera-derecha { flex: none; min-width: 0; }
.cabecera-derecha .usuario { max-width: 190px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.selector-empresa select { max-width: 230px; text-overflow: ellipsis; }
@media (max-width: 1680px) { .cabecera { gap: 14px; } .modulo { padding: 8px 11px; } .cabecera-derecha .usuario { max-width: 120px; }
  .selector-empresa select { max-width: 190px; } }
/* pantallas más estrechas: los módulos, solo con su icono (el nombre sale al pasar el ratón) */
@media (max-width: 1500px) { .modulo-txt { display: none; } .modulo { padding: 9px 11px; } }
@media (max-width: 1180px) { .cabecera-derecha .usuario { display: none; } }
.gb-lineas { font-style: normal; font-size: 10.5px; font-weight: 700; color: var(--texto-aviso); background: var(--aviso-fondo); border-radius: 999px;
  padding: 0 7px; white-space: nowrap; flex: none; }
.gb-fila-linea { padding-left: 2px; }
.gb-fila-linea .gb-fila-txt { font-size: 12px; }
.gb-en-linea { display: block; margin-top: 3px; font-size: 12px; color: var(--texto-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 420px; }
.gb-omitir { flex: none; display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 600; color: var(--texto-2); cursor: pointer;
  white-space: nowrap; margin-left: -12px; }
.gb-omitir input { width: 15px; height: 15px; accent-color: var(--primario); margin: 0; }
.gb-omitir:has(input:checked) { color: var(--primario); }
.gb-lineas.gb-ficha { color: var(--info); background: var(--info-fondo); }
@media (max-width: 1500px) { .gb-omitir span { display: none; } .gb-omitir::after { content: "Sin fechas"; } }

/* ---------- Globo «Lanzar búsqueda» sobre lo seleccionado ---------- */
.globo-sel { position: fixed; z-index: 70; display: flex; flex-direction: column; gap: 2px; padding: 4px; border-radius: 12px; background: var(--tooltip-fondo, #1d2521);
  color: var(--tooltip-texto, #fff); box-shadow: 0 12px 30px rgba(0, 0, 0, .28); animation: globo-sel .16s cubic-bezier(.3, 1.4, .5, 1) both; }
.globo-sel::after { content: ""; position: absolute; left: var(--flecha, 50%); bottom: -6px; width: 12px; height: 12px; margin-left: -6px; transform: rotate(45deg);
  background: inherit; border-radius: 2px; }
.globo-sel.debajo::after { bottom: auto; top: -6px; }
.globo-sel button { display: flex; align-items: center; gap: 8px; border: 0; background: none; color: inherit; font: inherit; font-size: 13px; padding: 7px 12px;
  border-radius: 9px; cursor: pointer; white-space: nowrap; text-align: left; position: relative; z-index: 1; }
.globo-sel button:hover, .globo-sel button:focus-visible { background: rgba(255, 255, 255, .14); outline: none; }
.globo-sel button svg { width: 15px; height: 15px; flex: none; color: #FFB200; }
.globo-sel button.secundario { font-size: 12px; opacity: .85; }
.globo-sel b { font-weight: 700; }
@keyframes globo-sel { from { opacity: 0; transform: translateY(4px) scale(.95); } }

/* ---------- Indicadores: botón «de dónde sale» ---------- */
.kpi-cifra, .kpi-sub, .kpi-lateral { position: relative; }
.kpi-origen { position: absolute; top: 6px; right: 6px; width: 26px; height: 26px; border-radius: 8px; border: 1px solid transparent; background: none;
  color: var(--tenue); cursor: pointer; display: grid; place-items: center; opacity: 0; transition: opacity .15s, background .15s, color .15s; }
.kpi-origen svg { width: 14px; height: 14px; }
.kpi-cifra .kpi-origen { position: static; margin-left: 8px; opacity: .55; align-self: center; }
.kpi-sub:hover .kpi-origen, .kpi-lateral:hover .kpi-origen, .kpi-cifra:hover .kpi-origen, .kpi-origen:focus-visible { opacity: 1; }
.kpi-origen:hover { background: var(--verde-suave); border-color: var(--borde-acento); color: var(--primario); }
@media (hover: none) { .kpi-origen { opacity: .7; } }

/* ---------- Aviso flotante ---------- */
.aviso-flotante { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 10px;
  padding: 12px 18px; border-radius: 14px; background: var(--tooltip-fondo); color: var(--tooltip-texto); box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
  font-size: 14px; max-width: min(640px, calc(92vw / var(--zoom, 1))); animation: gb-entra .25s cubic-bezier(.2, .8, .2, 1) both; }
.aviso-flotante svg { width: 18px; height: 18px; color: #22c55e; flex: none; }
.aviso-flotante.aviso svg, .aviso-flotante.ko svg { color: #FFB200; }
.aviso-flotante kbd { font: 600 11px ui-monospace, Consolas, monospace; border: 1px solid rgba(255, 255, 255, .35); border-radius: 4px; padding: 0 4px; }
.aviso-flotante.saliendo { opacity: 0; transform: translate(-50%, 8px); transition: opacity .4s, transform .4s; }

/* ---------- Fila de totales encima de los títulos ---------- */
.tabla thead tr.fila-totales th { padding-top: 6px; padding-bottom: 4px; border-bottom: 0; cursor: default; background: var(--superficie); }
.tabla thead tr.fila-totales + tr th { border-top: 0; }
.tot { color: var(--info); font-weight: 800; font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tot-etq { color: var(--info); font-size: 11px; font-weight: 800; letter-spacing: .5px; text-transform: uppercase; }
.esqueleto-total { display: inline-block; width: 60px; height: 10px; border-radius: 4px; background: var(--superficie-2); animation: pulso 1.2s ease-in-out infinite; }
.sub-bloque .tabla thead tr.fila-totales th { padding-top: 5px; padding-bottom: 2px; background: var(--superficie); }
@keyframes pulso { 50% { opacity: .45; } }
.aviso-flotante.fijo { pointer-events: auto; }
.aviso-flotante .btn { flex: none; }
.aviso-flotante .btn-mini { color: inherit; }
.nota-kpi { color: var(--tenue); font-size: 11.5px; }

/* ---------- Autorizaciones: lo no autorizado no se ve ---------- */
body.sin-excel #btn-excel, body.sin-excel [data-excel], body.sin-excel [data-sub-excel] { display: none !important; }
body.sin-busqueda #gb, body.sin-busqueda .gb-omitir { display: none !important; }
body.sin-relaciones #det-relacion { display: none !important; }
body.sin-auxiliares .cp-nuevo { display: none !important; }

/* ---------- Administración: autorizaciones por usuario ---------- */
.permisos-resumen { font-size: 12px; color: var(--texto-2); background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 999px; padding: 2px 10px; white-space: nowrap; }
.permisos-resumen.defecto { color: var(--tenue); font-style: italic; }
.permisos-resumen.todo { color: var(--primario); background: var(--verde-suave); border-color: var(--borde-acento); font-weight: 600; }
.dialogo-permisos { width: min(820px, calc(calc(100vw / var(--zoom, 1)) - 32px)); border-radius: 18px; }
.dialogo-permisos .dialogo-cuerpo { background: var(--fondo); }
.perm-perfiles { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 12px 22px 0; font-size: 13px; color: var(--texto-2); }
.perm-cuerpo { padding: 14px 22px 4px; overflow: auto; display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
.perm-grupo h4 svg { width: 14px; height: 14px; }
.perm-casillas { display: flex; flex-wrap: wrap; gap: 8px; }
.perm-casilla { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid var(--borde); border-radius: 10px; cursor: pointer; font-size: 13.5px; background: var(--superficie); }
.perm-casilla:has(input:checked) { border-color: var(--borde-acento); background: var(--verde-suave); }
.perm-casilla input, .perm-fila input { width: 16px; height: 16px; accent-color: var(--primario); margin: 0; flex: none; }
.perm-casilla .icono, .perm-casilla svg { width: 15px; height: 15px; }
.perm-casilla code { font-family: ui-monospace, Consolas, monospace; font-size: 12px; color: var(--texto-2); }
.perm-casilla small { color: var(--tenue); font-size: 11.5px; }
.perm-todas { margin-bottom: 8px; width: 100%; }
.perm-empresas { max-height: 180px; overflow: auto; }
.perm-empresas .perm-casilla:has(input:disabled) { opacity: .6; }
.perm-fila { display: flex; align-items: flex-start; gap: 10px; padding: 7px 4px; border-radius: 8px; cursor: pointer; }
.perm-fila:hover { background: var(--superficie-2); }
.perm-fila span { display: flex; flex-direction: column; gap: 1px; font-size: 13.5px; }
.perm-fila small { color: var(--tenue); font-size: 12px; }
.perm-aviso { border-color: var(--borde-aviso); }
.perm-nota { margin: -6px 0 6px; font-size: 12px; color: var(--texto-aviso); }
@media (max-width: 760px) { .perm-cuerpo { grid-template-columns: 1fr; } }

/* ---------- Copias de seguridad ---------- */
.config-copias { display: flex; align-items: flex-start; gap: 14px; padding: 16px 18px; }
.config-copias .subtitulo { font-size: 13px; }
@media (max-width: 760px) { .config-copias { flex-wrap: wrap; } }
.copias-cuerpo { flex: 1; min-width: 0; }
.copias-lista { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.copia { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 10px; background: var(--superficie); }
.copia.ultima { border-color: var(--borde-acento); background: var(--verde-suave); }
.copia > .icono svg, .copia > .icono { width: 16px; height: 16px; color: var(--texto-2); }
.copia-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.copia-txt small { color: var(--tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.copia .btn { display: inline-flex; align-items: center; gap: 6px; }
.copia .btn svg { width: 15px; height: 15px; }

/* ---------- Administración / Configuración por pestañas ---------- */
.admin-pestanas { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--borde); }
.admin-pestanas:empty { display: none; }
.admin-pestanas button { display: inline-flex; align-items: center; gap: 7px; border: 1px solid var(--borde-fuerte); background: var(--superficie);
  color: var(--texto-2); border-radius: 999px; padding: 7px 15px; font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.admin-pestanas button:hover { background: var(--superficie-2); }
.admin-pestanas button[aria-selected="true"] { background: var(--primario); border-color: var(--primario); color: #fff; }
.admin-pestanas button .icono { width: 15px; height: 15px; }
.admin-pestanas .aparte { margin-left: auto; }
.admin-pestanas .pp { width: 8px; height: 8px; border-radius: 50%; background: var(--critico); flex: none; }
.admin-pestanas .pp.ok { background: var(--bien); }
.admin-pestanas button[aria-selected="true"] .pp { box-shadow: 0 0 0 2px #fff; }
.sub-pestanas { display: flex; gap: 2px; margin: 14px 0 12px; border-bottom: 1px solid var(--borde); overflow-x: auto; }
.sub-pestanas button { display: inline-flex; align-items: center; gap: 7px; border: 0; border-bottom: 2px solid transparent; background: none;
  padding: 9px 14px; margin-bottom: -1px; font: inherit; font-size: 14px; font-weight: 600; color: var(--texto-2); cursor: pointer; white-space: nowrap; }
.sub-pestanas button:hover { color: var(--primario); }
.sub-pestanas button[aria-selected="true"] { color: var(--primario); border-bottom-color: var(--primario); }
.sub-pestanas button .icono { width: 15px; height: 15px; }
.sub-pestanas small { background: var(--superficie-2); border-radius: 999px; padding: 0 7px; font-size: 12px; color: var(--texto-2); }
.sub-panel > .bloque:first-child, .sub-panel > .tenant-opcion:first-child { margin-top: 0; }
.bloque > .agente-bloque { margin-top: 0; padding-top: 0; border-top: 0; }
.bloque h3 .agente-ahora { margin-left: auto; }
@media (max-width: 760px) { .admin-pestanas .aparte { margin-left: 0; } }

/* pestañas del cliente a la izquierda (mismo estilo que la ficha de alta de clientes) */
.tenant-cuerpo { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 0 18px; margin-top: 14px; }
.sub-pestanas.sub-lateral { flex-direction: column; gap: 4px; margin: 0; padding: 2px 12px 2px 12px; border-bottom: 0; border-right: 1px solid var(--borde); overflow: visible; align-self: start; }
.sub-lateral button.fc-tab { border: 0; margin: 0; padding: 9px 10px; white-space: normal; font-weight: 400; color: var(--texto-2); }
.sub-lateral button.fc-tab[aria-selected="true"] { color: var(--texto); }
.sub-lateral .fc-tab-icono .icono { width: 17px; height: 17px; }
.sub-lateral .pp { width: 9px; height: 9px; border-radius: 50%; background: var(--critico); display: inline-block; }
.sub-lateral .pp.ok { background: var(--bien); }
.tenant-paneles { min-width: 0; }
.tenant-paneles > .tenant-msg { margin-top: 0; }
@media (max-width: 860px) {
  .tenant-cuerpo { grid-template-columns: 1fr; gap: 12px; }
  .sub-pestanas.sub-lateral { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); padding: 0 0 8px; }
  .sub-lateral button.fc-tab { width: auto; flex: none; }
  .sub-lateral .fc-tab-txt small { display: none; }
  .sub-lateral .fc-tab[aria-selected="true"]::before { display: none; }
}
.sub-lateral .fc-tab-txt small { background: none; padding: 0; border-radius: 0; font-size: 11.5px; color: var(--tenue); }
.sub-lateral .fc-rellenos { background: var(--superficie-2); border-radius: 999px; padding: 0 7px; font-size: 11.5px; }

/* lista de clientes: cada uno en una línea hasta que se abre con el lápiz */
.tenant.plegado { padding: 12px 18px; }
.tenant.plegado .tenant-msg:not([hidden]) { margin: 10px 0 0; }
#admin-tenants > .tenant + .tenant { margin-top: 10px; }
.admin-pestanas button small { background: rgba(0, 0, 0, .08); border-radius: 999px; padding: 0 7px; font-size: 12px; }
.admin-pestanas button[aria-selected="true"] small { background: rgba(255, 255, 255, .25); }

.agente-arrancar { margin-top: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; background: var(--critico-fondo); display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.agente-arrancar .btn { color: #fff; }
.agente-arrancar .agente-ayuda { flex: 1 1 280px; margin: 0; }
.btn.peligro { color: var(--critico); border-color: var(--critico); }
.btn.peligro:hover { background: var(--critico-fondo); }

.agente-remoto { display: flex; align-items: end; gap: 10px; flex-wrap: wrap; margin: 6px 0 4px; }
.agente-remoto .campo { margin: 0; flex: 1 1 260px; }
.agente-remoto .campo input { background: var(--superficie); }
.agente-remoto .btn { height: 42px; }
.agente-res { border-radius: 8px; padding: 7px 10px; background: var(--neutro-fondo); color: var(--texto-2); }
.agente-res.ok { background: var(--bien-fondo); color: var(--texto-bien); }
.agente-res.ko { background: var(--critico-fondo); color: var(--texto-critico); }

.agente-actualizar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 8px 0; padding: 10px 12px; border-radius: 10px; background: var(--aviso-fondo); color: var(--texto-aviso); }
.agente-actualizar span { flex: 1 1 260px; }
.agente-actualizar .btn { color: #fff; }

.as400-datos { display: grid; grid-template-columns: 180px 1fr; gap: 6px 14px; font-size: 14px; margin: 10px 0 4px; }
.as400-datos span { color: var(--texto-2); }
.as400-datos b { font-weight: 600; }
.as400-datos small { font-weight: 400; color: var(--tenue); }
@media (max-width: 760px) { .as400-datos { grid-template-columns: 1fr; } .as400-datos span { margin-top: 6px; } }

/* ---------- Nueva oferta: cabecera fija arriba, líneas que se desplazan ---------- */
.dialogo-oferta { width: min(1320px, calc(calc(100vw / var(--zoom, 1)) - 32px)); height: min(940px, calc(calc(100vh / var(--zoom, 1)) - 32px)); }
.of-marco { display: flex; flex-direction: column; }
.of-avatar { background: linear-gradient(135deg, #4338CA, #22D3EE); }
.of-provisional { font-size: 12px; font-weight: 500; color: var(--tenue); margin-left: 6px; }
.of-borrador { background: var(--aviso-fondo); color: var(--texto-aviso); border-color: transparent; font-weight: 700; }
.of-total-cab { flex: none; text-align: right; padding: 6px 14px; border-radius: 14px; background: var(--verde-suave); display: flex; flex-direction: column; min-width: 170px; }
.of-total-cab small { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-2); font-weight: 700; }
.of-total-cab b { font-size: 24px; font-variant-numeric: tabular-nums; color: var(--primario); line-height: 1.15; }
.of-total-cab.pulso { animation: of-pulso .45s ease-out; }
@keyframes of-pulso { 0% { box-shadow: 0 0 0 0 rgba(34, 211, 238, .45); } 100% { box-shadow: 0 0 0 12px rgba(34, 211, 238, 0); } }

.of-fija { flex: none; padding: 14px 22px 12px; background: var(--superficie); border-bottom: 1px solid var(--borde);
  box-shadow: 0 6px 14px -12px rgba(0, 0, 0, .35); position: relative; z-index: 3; }
.of-cliente { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 14px; align-items: end; margin-bottom: 10px; }
.of-etq { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin: 0 0 5px; }
.of-etq em { font-style: normal; font-weight: 400; color: var(--tenue); margin-left: 6px; }
.of-tres { display: grid; grid-template-columns: 160px minmax(0, 1fr) 200px; gap: 8px; }
.of-tres .combo-caja { background: var(--fondo); }
.of-tarjeta-cli { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 7px 12px; border-radius: 12px; border: 1px solid var(--borde); background: var(--fondo); }
.of-tarjeta-cli.vacia { color: var(--tenue); border-style: dashed; justify-content: center; font-size: 14px; }
.of-tarjeta-cli.vacia .icono { width: 18px; height: 18px; }
.of-ini { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, var(--primario), var(--serie-actual)); color: var(--sobre-primario); }
.of-cli-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.of-cli-txt b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-cli-txt small { color: var(--tenue); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.of-rejilla { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; align-items: end; }
.of-rejilla .of-doble { grid-column: span 2; }
.of-rejilla .campo > span small { font-weight: 500; color: var(--tenue); margin-left: 4px; }
.of-cli-txt .of-cli-nom2 { color: var(--texto-2); font-weight: 600; }
.of-rejilla .campo { margin: 0; }
.of-rejilla .campo > span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin: 0 0 5px; }
.of-rejilla input { background: var(--fondo); }
.of-rejilla .combo-caja { background: var(--fondo); }

.of-cuerpo { flex: 1; min-height: 0; overflow: auto; padding: 16px 22px 22px; scroll-behavior: smooth; }
.of-lineas-cab { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; }
.of-lineas-cab h3 { margin: 0; font-size: 16px; }
.of-lineas-cab h3 small { font-weight: 500; color: var(--tenue); margin-left: 6px; font-size: 13px; }
.of-atajos { flex: 1; font-size: 12px; color: var(--tenue); text-align: right; }
.of-atajos kbd { font: 11px ui-monospace, Consolas, monospace; background: var(--superficie-2); border: 1px solid var(--borde); border-bottom-width: 2px; border-radius: 4px; padding: 0 4px; }
.of-tabla-marco { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; overflow: visible; }
.of-tabla { width: 100%; border-collapse: separate; border-spacing: 0; }
.of-tabla th { font-size: 12px; text-align: left; color: var(--texto-2); font-weight: 700; padding: 9px 8px; border-bottom: 1px solid var(--borde);
  position: sticky; top: -16px; background: var(--superficie); z-index: 2; }
.of-tabla th:first-child { border-top-left-radius: 14px; }
.of-tabla th:last-child { border-top-right-radius: 14px; }
.of-tabla th.n, .of-tabla td.n { text-align: right; }
.of-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--borde); vertical-align: middle; }
.of-tabla tbody tr:last-child td { border-bottom: 0; }
.of-tabla tbody tr:hover td { background: var(--superficie-2); }
.of-tabla td input { width: 100%; border: 1px solid transparent; background: transparent; border-radius: 8px; padding: 7px 8px; font: inherit; color: var(--texto); }
.of-tabla td input:hover { border-color: var(--borde); }
.of-tabla td input:focus { outline: none; border-color: var(--serie-actual); background: var(--fondo); box-shadow: 0 0 0 3px var(--verde-suave); }
.of-tabla td.n input { text-align: right; font-variant-numeric: tabular-nums; }
.of-c-n { width: 34px; color: var(--tenue); font-size: 12px; text-align: center !important; }
.of-c-art { width: 230px; }
.of-c-art .combo-caja { background: transparent; border-color: transparent; }
.of-c-art .combo-caja:hover { border-color: var(--borde); }
.of-c-cant { width: 120px; } .of-c-cant { white-space: nowrap; }
.of-c-cant input { width: calc(100% - 24px) !important; display: inline-block; }
.of-c-cant small { display: inline-block; width: 22px; text-align: left; color: var(--tenue); font-size: 11px; margin-left: 2px; }
.of-c-precio { width: 120px; } .of-c-dto { width: 80px; } .of-c-imp { width: 130px; } .of-c-mar { width: 90px; } .of-c-x { width: 40px; }
.of-imp { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.of-mar { font-variant-numeric: tabular-nums; font-size: 13px; }
.of-mar.ok, .of-margen .ok { color: var(--texto-bien); } .of-mar.aviso, .of-margen .aviso { color: var(--texto-aviso); } .of-mar.ko, .of-margen .ko { color: var(--texto-critico); }
.of-vacio { padding: 34px 20px 38px; text-align: center; color: var(--texto-2); }
.of-vacio[hidden] { display: none; }
.of-vacio p { margin: 12px 0 14px; }
.of-vacio-dibujo { display: inline-flex; flex-direction: column; gap: 6px; padding: 14px 18px; border-radius: 14px; background: var(--fondo); border: 1px dashed var(--borde-fuerte); }
.of-vacio-dibujo span { display: block; height: 8px; border-radius: 4px; background: linear-gradient(90deg, var(--verde-suave), var(--superficie-2)); width: 180px;
  animation: of-brillo 1.8s ease-in-out infinite; }
.of-vacio-dibujo span:nth-child(2) { width: 140px; animation-delay: .2s; } .of-vacio-dibujo span:nth-child(3) { width: 160px; animation-delay: .4s; }
@keyframes of-brillo { 50% { opacity: .45; } }
.of-obs { display: block; margin-top: 16px; }
.of-obs textarea { width: 100%; resize: vertical; background: var(--superficie); font: inherit; padding: 10px 12px; border-radius: 10px; }

.of-pie { flex-wrap: wrap; }
.of-resumen { display: flex; gap: 20px; align-items: flex-end; }
.of-resumen span { display: flex; flex-direction: column; }
.of-resumen small { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .5px; font-weight: 700; }
.of-resumen b { font-variant-numeric: tabular-nums; font-size: 15px; }
.of-resumen .of-neto b { font-size: 19px; color: var(--primario); }
.of-margen { position: relative; padding-bottom: 5px; }
.of-margen i { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 2px; background: var(--superficie-2); overflow: hidden; }
.of-margen i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--m); background: linear-gradient(90deg, #f59e0b, #22c55e); transition: width .4s; }
.of-checks { display: flex; gap: 6px; }
.of-check { font-size: 12px; padding: 3px 9px; border-radius: 999px; background: var(--superficie-2); color: var(--tenue); font-weight: 600; }
.of-check.ok { background: var(--bien-fondo); color: var(--texto-bien); }
@media (max-width: 1000px) {
  .of-cliente { grid-template-columns: 1fr; }
  .of-rejilla { grid-template-columns: 1fr 1fr; }
  .of-rejilla .of-doble { grid-column: 1 / -1; }
  .of-tres { grid-template-columns: 110px minmax(0, 1fr); }
  .of-tres .of-combo-cif { grid-column: 1 / -1; }
  .of-total-cab { display: none; }
  .of-atajos { display: none; }
  .of-tabla-marco { overflow-x: auto; }
}

/* ---------- Lista de clientes: botón de documentos en cada fila ---------- */
th.col-docs, td.col-docs { width: 38px; padding-left: 6px !important; padding-right: 0 !important; }
.btn-docs { width: 26px; height: 26px; border-radius: 8px; border: 1px solid var(--borde); background: var(--superficie); color: var(--primario);
  display: grid; place-items: center; cursor: pointer; transition: transform .12s, background .12s; }
.btn-docs:hover { background: var(--verde-suave); transform: scale(1.08); }
.btn-docs .icono { width: 14px; height: 14px; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.menu-docs { position: fixed; z-index: 95; min-width: 220px; padding: 6px; border-radius: 12px; background: var(--superficie); border: 1px solid var(--borde);
  box-shadow: 0 14px 34px -10px rgba(0, 0, 0, .35); animation: of-menu .14s ease-out; }
@keyframes of-menu { from { opacity: 0; transform: translateY(-4px); } }
.menu-docs-tit { margin: 4px 8px 6px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.menu-docs button { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: none; padding: 8px 10px; border-radius: 8px;
  font: inherit; font-weight: 600; color: var(--texto); cursor: pointer; text-align: left; }
.menu-docs button:hover, .menu-docs button:focus { background: var(--superficie-2); outline: none; }
.menu-docs button .icono { width: 16px; height: 16px; color: var(--primario); }
.menu-docs button small { margin-left: auto; font-size: 11px; font-weight: 500; color: var(--tenue); }
.of-cliente-busca, .of-tres > .combo, .of-tres .combo-caja { min-width: 0; }
.of-tres .combo input { min-width: 0; width: 100%; }
.combo-ver { border: 0; background: none; padding: 2px; margin: -2px; border-radius: 6px; color: var(--tenue); display: grid; place-items: center; cursor: default; }
.combo-ver .icono { width: 16px; height: 16px; }
.combo-ver.con-valor { cursor: pointer; color: var(--primario); position: relative; }
.combo-ver.con-valor:hover { background: var(--verde-suave); }
.combo-ver.con-valor::after { content: ""; position: absolute; right: -1px; bottom: -1px; width: 7px; height: 7px; border-radius: 50%;
  background: var(--primario); box-shadow: 0 0 0 2px var(--superficie); }

/* ---------- Nueva oferta (2): pestañas a la izquierda, ventana redimensionable y maximizable ---------- */
.dialogo-oferta { resize: both; overflow: hidden; min-width: 900px; min-height: 560px; max-width: calc(100vw / var(--zoom, 1)); max-height: calc(100vh / var(--zoom, 1)); }
.dialogo-oferta.maximizada { width: calc(100vw / var(--zoom, 1)) !important; height: calc(100vh / var(--zoom, 1)) !important; max-width: calc(100vw / var(--zoom, 1)); max-height: calc(100vh / var(--zoom, 1)); margin: 0; border-radius: 0; resize: none; }
.dialogo-oferta .dialogo-cuerpo { max-height: none; }
.of-cab { cursor: default; user-select: none; }
.of-contenido { flex: 1; min-height: 0; display: grid; grid-template-columns: 230px minmax(0, 1fr); }
.of-nav { border-right: 1px solid var(--borde); background: var(--superficie); }
.of-cuerpo { padding: 16px 20px 20px; }
.of-panel[hidden] { display: none; }
.of-panel .fc-panel-cab { margin: 0 0 14px; }
.of-campos { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 12px 14px; align-items: start; }
.of-campos .campo { margin: 0; }
.of-campos .campo.corto { max-width: 220px; }
.of-campos .campo.of-ancho { grid-column: span 2; }
.of-campos .campo > span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin: 0 0 5px; }
.of-campos input, .of-campos select { width: 100%; background: var(--fondo); }
.of-campos .combo-caja { background: var(--fondo); }
.of-seg { display: inline-flex; flex-wrap: wrap; }
.of-seg button { padding: 6px 12px; }
.of-ayuda { display: block; margin-top: 4px; font-size: 11.5px; color: var(--tenue); }
.of-fijo { padding: 8px 10px; border-radius: 10px; background: var(--superficie-2); color: var(--texto-2); font-weight: 600; min-height: 38px; display: flex; align-items: center; }
.of-nota { color: var(--tenue); margin: 4px 0; font-size: 14px; }
.of-h4-nota { font-weight: 400; color: var(--tenue); font-size: 12px; margin-left: 6px; }
.of-dirs-lista { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 10px; margin-bottom: 14px; }
.of-dir { text-align: left; display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--fondo); cursor: pointer; font: inherit; color: var(--texto); transition: border-color .12s, box-shadow .12s; }
.of-dir:hover { border-color: var(--borde-fuerte); }
.of-dir[aria-pressed="true"] { border-color: var(--primario); box-shadow: 0 0 0 3px var(--verde-suave); background: var(--superficie); }
.of-dir-tit { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); }
.of-dir[aria-pressed="true"] .of-dir-tit { color: var(--primario); }
.of-dir small { color: var(--texto-2); }
.of-dir-editar { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px 14px; }
.of-dir-editar .campo { margin: 0; }
.of-dir-editar .campo > span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin: 0 0 5px; }
.of-dir-editar input { width: 100%; background: var(--fondo); }
.of-tabla-conds { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.of-tabla-conds th { text-align: left; font-size: 12px; color: var(--texto-2); padding: 6px 8px; border-bottom: 1px solid var(--borde); }
.of-tabla-conds td { padding: 7px 8px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.of-tabla-conds code { font-size: 12px; background: var(--superficie-2); border-radius: 4px; padding: 1px 5px; }
.of-com { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.of-com > span { width: 22px; text-align: right; color: var(--tenue); font-size: 12px; }
.of-com input { flex: 1; max-width: 520px; background: var(--fondo); font-family: ui-monospace, Consolas, monospace; }
.of-cli-avisos { color: var(--texto-aviso) !important; font-weight: 600; }
.of-c-desc { position: relative; }
.of-cond { position: absolute; right: 12px; top: 50%; transform: translateY(-50%); font-size: 10.5px; font-weight: 700; color: var(--primario);
  background: var(--verde-suave); border-radius: 999px; padding: 1px 7px; cursor: help; }
.of-cond[hidden] { display: none; }
.of-c-extra { width: 96px; white-space: nowrap; }
.of-dato { color: var(--texto-2); font-variant-numeric: tabular-nums; font-size: 13px; }
.of-dato.ko { color: var(--texto-critico); font-weight: 700; }
.of-c-x { width: 70px; white-space: nowrap; }
.of-btn-obs { position: relative; }
.of-btn-obs.con-texto { color: var(--primario); }
.of-btn-obs.con-texto::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: var(--primario); }
.of-obs-fila td { background: var(--fondo); padding: 8px 8px 10px !important; }
.of-obs-lin { display: grid; grid-template-columns: 20px 1fr; gap: 6px 8px; align-items: center; }
.of-obs-lin > .icono { grid-row: span 3; color: var(--tenue); width: 16px; height: 16px; align-self: start; margin-top: 8px; }
.of-obs-lin input { font-family: ui-monospace, Consolas, monospace; font-size: 13px; }
.of-menu-cols { min-width: 190px; }
.of-menu-cols label { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; cursor: pointer; font-size: 14px; }
.of-menu-cols label:hover { background: var(--superficie-2); }
.of-resumen { flex-wrap: wrap; gap: 8px 18px; }
.of-resumen .of-base b { color: var(--texto); }
@media (max-width: 1000px) {
  .dialogo-oferta { min-width: 0; resize: none; }
  .of-contenido { grid-template-columns: 1fr; }
  .of-nav { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); padding: 8px; }
  .of-nav .fc-tab { width: auto; flex: none; }
  .of-nav .fc-tab small { display: none; }
  .of-dir-editar { grid-template-columns: 1fr; }
}
.of-tabla-marco { overflow-x: auto; }
.of-tabla { min-width: 980px; }
.of-c-desc { min-width: 220px; }
.of-obs-lin input { border-color: var(--borde) !important; background: var(--superficie) !important; }
.of-botones { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.of-pie .hueco { display: none; }
.of-pie { row-gap: 10px; }
@media (max-width: 1250px) { .of-botones .fc-nota { display: none; } }

/* ---------- Direcciones de envío (EFVCLI05) ---------- */
.dir-barra { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.dir-cuenta { flex: 1; color: var(--texto-2); font-size: 14px; }
.dir-adic { color: var(--tenue) !important; }
.dir-editor { margin-top: 6px; padding: 16px 18px; border-radius: 14px; border: 1px solid var(--primario); background: var(--superficie);
  box-shadow: 0 0 0 3px var(--verde-suave); animation: of-menu .18s ease-out; }
.dir-editor[hidden] { display: none; }
.dir-editor h4 { margin: 0 0 12px; }
.dir-rejilla { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; }
.dir-rejilla .campo { margin: 0; }
.dir-rejilla .campo > span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin: 0 0 5px; }
.dir-rejilla input { width: 100%; background: var(--fondo); }
.dir-rejilla .combo-caja { background: var(--fondo); }
.dir-botones { display: flex; gap: 10px; margin-top: 14px; }
.dir-botones .hueco { flex: 1; }
.dialogo-direcciones { width: min(980px, calc(calc(100vw / var(--zoom, 1)) - 32px)); height: min(760px, calc(calc(100vh / var(--zoom, 1)) - 48px)); }
.dir-cuerpo { padding: 18px 22px; overflow: auto; flex: 1; min-height: 0; }
.of-h4-btn { margin-left: auto; padding: 4px 10px; font-size: 13px; text-transform: none; letter-spacing: 0; }
.fc-grupo h4 { display: flex; align-items: center; gap: 8px; }
@media (max-width: 760px) { .dir-rejilla { grid-template-columns: 1fr; } }

/* ---------- Hoja del documento en la vista previa ---------- */
.hoja-doc { display: flex; flex-direction: column; gap: 10px; margin: 4px 0 14px; }
.hd-caja { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); padding: 10px 12px; }
.hd-caja h5 { margin: 0 0 6px; font-size: 11px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); }
.hd-caja p { margin: 0; font-size: 14px; line-height: 1.45; }
.hd-cabecera { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 14px; }
.hd-cabecera div { display: flex; flex-direction: column; min-width: 0; }
.hd-cabecera .hd-ancho { grid-column: span 2; }
.hd-cabecera span { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .5px; }
.hd-cabecera b { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hd-dos { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hd-filas { display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; margin: 0; font-size: 14px; }
.hd-filas dt { color: var(--texto-2); }
.hd-filas dd { margin: 0; text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.hd-filas dd.hd-txt { text-align: right; font-weight: 600; }
.hd-filas small { font-weight: 400; color: var(--tenue); }
.hd-filas .hd-total { border-top: 1px solid var(--borde); padding-top: 6px; margin-top: 2px; font-weight: 800; color: var(--primario); font-size: 15px; }
.hd-banco { display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; padding-top: 8px; border-top: 1px dashed var(--borde); font-size: 13px; }
.hd-banco .icono { width: 16px; height: 16px; color: var(--tenue); margin-top: 2px; flex: none; }
.hd-banco div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hd-banco code { font-size: 12.5px; color: var(--texto-2); overflow-wrap: anywhere; }
.hd-vacio { color: var(--tenue); }
@media (max-width: 760px) { .hd-dos { grid-template-columns: 1fr; } .hd-cabecera { grid-template-columns: 1fr 1fr; } }

.subida-fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.subida-fila input[type=file] { flex: 1; min-width: 220px; }

/* ---------- Marca Enterprise Live: símbolo (el Saturno) + palabra; el Saturno se mueve mientras se busca ---------- */
.marca { gap: 8px; }
.marca-simbolo { position: relative; width: 40px; height: 40px; flex: none; display: block; }
.marca-simbolo img { position: absolute; inset: 0; width: 100%; height: 100%; }
.simbolo-anim { opacity: 0; transform: scale(1.36); transition: opacity .25s; }
.marca-palabra { height: 40px; width: auto; display: block; }
.marca-grande .marca-simbolo { width: 60px; height: 60px; }
.marca-grande .marca-palabra { height: 60px; }
.marca .oscuro { display: none; }
:root[data-piel="ibm"] .marca .claro, :root[data-piel="amber"] .marca .claro, :root[data-piel="medianoche"] .marca .claro, :root[data-piel="live-noche"] .marca .claro { display: none; }
:root[data-piel="ibm"] .marca .oscuro, :root[data-piel="amber"] .marca .oscuro, :root[data-piel="medianoche"] .marca .oscuro, :root[data-piel="live-noche"] .marca .oscuro { display: block; }
body.gb-buscando .marca .simbolo-fijo { opacity: 0; transition: opacity .25s; }
body.gb-buscando .marca .simbolo-anim { opacity: 1; }
.marca-by { letter-spacing: .3px; }
@media (max-width: 760px) { .marca-palabra { height: 32px; } .marca-simbolo { width: 32px; height: 32px; } }

/* ---------- Direcciones de envío: buscador, habitual y acceso desde la ficha ---------- */
.dir-barra .dir-buscador { flex: 1 1 260px; max-width: 420px; }
.of-dir { position: relative; }
.of-dir:focus-visible { outline: 3px solid var(--verde-suave); outline-offset: 1px; }
.dir-habitual { border-color: #FFB200 !important; box-shadow: 0 0 0 3px rgba(255, 178, 0, .18); }
.dir-marca-hab { margin-left: 8px; color: #B77A00; font-weight: 800; letter-spacing: 0; text-transform: none; }
.dir-usar { align-self: flex-start; margin-top: 8px; padding: 3px 10px; font-size: 12.5px; height: auto; }
.campo-ficha.con-acceso { position: relative; }
.campo-ficha.con-acceso input { padding-right: 150px; }
.acceso-dirs { position: absolute; right: 6px; bottom: 5px; height: 32px; padding: 0 10px; display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.acceso-dirs svg { width: 16px; height: 16px; }
.acceso-dirs small { background: var(--verde-suave); color: var(--primario); border-radius: 999px; padding: 0 7px; font-weight: 700; }
.acceso-dirs small:empty { display: none; }

/* ---------- Campos de usuario con título (EFUCVM01) ---------- */
.ayuda-campo { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: var(--superficie-2);
  color: var(--texto-2); font-size: 10px; font-weight: 800; cursor: help; margin-left: 4px; vertical-align: 1px; }
.fc-plegado > summary { list-style: none; cursor: pointer; display: flex; align-items: center; gap: 8px; }
.fc-plegado > summary::-webkit-details-marker { display: none; }
.fc-plegado > summary::before { content: "▸"; color: var(--tenue); transition: transform .15s; }
.fc-plegado[open] > summary::before { transform: rotate(90deg); }
.fc-plegado > summary h4 { margin: 0; }
.fc-plegado[open] > summary { margin-bottom: 12px; }

.dir-usar { display: inline-flex; align-items: center; gap: 6px; }
.dir-usar svg { width: 14px; height: 14px; }

/* hoja de previsualización: documentos de proveedor (sin envío o sin agente) */
.hd-dos.hd-una { grid-template-columns: 1fr; }
.hoja-doc .hd-nombre { margin: 0 0 3px; font-weight: 700; }

/* contactos del cliente (EFRTCO01) */
.con-lista { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.con-tarjeta { gap: 3px; }
.con-cab { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; min-width: 0; }
.con-ini { flex: none; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; font-weight: 800; font-size: 13px;
  background: linear-gradient(135deg, var(--primario), var(--serie-actual)); color: var(--sobre-primario); }
.con-nom { display: flex; flex-direction: column; min-width: 0; }
.con-nom b, .con-nom small { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.con-nom small { color: var(--tenue); }
.con-dato { display: flex; align-items: center; gap: 7px; min-width: 0; }
.con-dato svg { flex: none; width: 14px; height: 14px; color: var(--tenue); }
.con-dato a { color: var(--texto); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.con-dato a:hover { color: var(--primario); text-decoration: underline; }
.con-dato.tenue { color: var(--tenue); }
.dir-rejilla .campo > span em, .cv-rejilla .campo > span em { font-style: normal; font-weight: 500; color: var(--tenue); margin-left: 4px; }
input.mayus { text-transform: uppercase; }

/* condiciones de venta del cliente (EFVCON07 · EFVCON02) */
.cv-grupo h4 { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cv-grupo h4 .of-h4-btn { margin-left: auto; }
.cv-tabla-marco { overflow-x: auto; border: 1px solid var(--borde); border-radius: 12px; }
.cv-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.cv-tabla th { text-align: left; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--tenue);
  padding: 8px 10px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); white-space: nowrap; }
.cv-tabla td { padding: 8px 10px; border-bottom: 1px solid var(--borde); vertical-align: top; }
.cv-tabla tbody tr { cursor: pointer; }
.cv-tabla tbody tr:hover { background: var(--superficie-2); }
.cv-tabla tbody tr[aria-selected="true"] { background: color-mix(in srgb, var(--primario) 10%, transparent); }
.cv-tabla tbody tr:last-child td { border-bottom: 0; }
.cv-tabla .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cv-tabla code, .cv-tabla + code { font-size: 12.5px; }
.cv-nw { white-space: nowrap; }
.cv-tabla .tenue { color: var(--tenue); }
.cv-grupo .dir-editor { margin-top: 12px; }
.cv-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
.cv-rejilla .campo { margin: 0; }
.cv-rejilla .campo > span:first-child { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin: 0 0 5px; }
.cv-rejilla input { width: 100%; background: var(--fondo); }
.cv-rejilla .segmento { flex-wrap: wrap; }
.cv-desc { display: block; margin-top: 4px; color: var(--tenue); font-size: 12px; min-height: 1em; }
.cv-check { display: flex !important; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.cv-check input { width: auto; }
.cv-check span { font-weight: 600; }
.cv-subt { margin: 16px 0 8px; font-size: 13px; }
.cv-subt small { font-weight: 500; color: var(--tenue); margin-left: 6px; }
.cv-tramos { border-collapse: collapse; width: 100%; max-width: 520px; font-size: 13px; }
.cv-tramos th { text-align: left; font-size: 11.5px; color: var(--tenue); font-weight: 700; padding: 4px 6px; }
.cv-tramos td { padding: 3px 6px; }
.cv-tramos td:first-child { width: 28px; color: var(--tenue); font-weight: 700; }
.cv-tramos input { width: 100%; text-align: right; background: var(--fondo); font-variant-numeric: tabular-nums; }
@media (max-width: 760px) { .cv-rejilla { grid-template-columns: 1fr; } }
.cv-tabla .pill, .cv-tabla [class*="estado"] { white-space: nowrap; }
.cv-tramos input { border: 1px solid var(--borde-fuerte); border-radius: 8px; padding: 6px 9px; font: inherit; color: var(--texto); }

/* título de la vista previa: tipo de documento en naranja a la izquierda del número, centrado y separado de los
   accesos a las tablas de abajo */
:root { --titulo-previa: #D97706; }
html[data-piel="ibm"], html[data-piel="amber"], html[data-piel="medianoche"], html[data-piel="live-noche"] { --titulo-previa: #FFB200; }
/* tres columnas: hueco · título centrado · estado en la esquina derecha */
.detalle-titulo { flex: 1 0 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: 10px;
  padding-bottom: 8px; border-bottom: 1px solid var(--borde); }
.detalle-tit-centro { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; text-align: center; }
.detalle-estado { justify-self: end; align-self: start; }
@media (max-width: 520px) {
  .detalle-titulo { grid-template-columns: 1fr auto; }
  .detalle-titulo > span:first-child { display: none; }
}
.detalle-tit-txt { color: var(--titulo-previa); font-size: 18px; font-weight: 800; letter-spacing: .2px; }

/* saturnito: acceso directo a la ficha o al documento (accesos.js). El símbolo del logo (marca/simbolo.svg, vectorial)
   en pequeño; en las pieles oscuras, su versión en negativo */
button.acceso { display: inline-flex; flex: none; width: 22px; height: 22px; margin: 0 6px 0 0; padding: 0; border: 0;
  border-radius: 6px; background: none; vertical-align: -6px; cursor: pointer; transition: transform .15s, filter .15s; }
button.acceso img { width: 100%; height: 100%; display: block; pointer-events: none; }
button.acceso .oscuro { display: none; }
:root[data-piel="ibm"] button.acceso .claro, :root[data-piel="amber"] button.acceso .claro,
:root[data-piel="medianoche"] button.acceso .claro, :root[data-piel="live-noche"] button.acceso .claro { display: none; }
:root[data-piel="ibm"] button.acceso .oscuro, :root[data-piel="amber"] button.acceso .oscuro,
:root[data-piel="medianoche"] button.acceso .oscuro, :root[data-piel="live-noche"] button.acceso .oscuro { display: block; }
/* al pasar el ratón, el Saturno gira (como el icono del agente sin conexión) */
button.acceso:hover, button.acceso:focus-visible { transform: scale(1.12); filter: drop-shadow(0 1px 3px rgba(11, 139, 194, .45)); }
button.acceso:hover img, button.acceso:focus-visible img { animation: acceso-gira 1.4s linear infinite; }
@keyframes acceso-gira { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { button.acceso:hover img, button.acceso:focus-visible img { animation: none; } }
button.acceso:focus-visible { outline: 2px solid #FFB200; outline-offset: 1px; }
td.con-acceso { white-space: nowrap; }
td.cod.con-acceso > span, td.doc.con-acceso { vertical-align: middle; }
.hoja-doc button.acceso { vertical-align: -5px; }
.of-obs-lin > input { grid-column: 2; }

/* tamaño de la aplicación (Configuración › Apariencia) */
.tamano-fila { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; }
.tamano-tit { font-weight: 700; font-size: 13px; color: var(--texto-2); }
.tamano-tit small { font-weight: 500; color: var(--tenue); margin-left: 4px; }
.tamano-seg button small { font-weight: 500; opacity: .75; margin-left: 3px; }

/* comentarios de la oferta y de sus líneas: una sola caja; al grabar se reparten en los campos del AS/400 */
.of-obs-lin textarea, textarea.of-caja-com { grid-column: 2; width: 100%; resize: vertical; min-height: 64px; padding: 9px 11px;
  border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--fondo); color: var(--texto);
  font: inherit; font-size: 14px; line-height: 1.5; }
.of-obs-lin textarea:focus, textarea.of-caja-com:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.of-caja-cuenta { grid-column: 2; display: block; margin-top: 4px; color: var(--tenue); font-size: 12px; }

/* Utilidades: ventana de cajitas (utilidades.js) */
.dialogo-utilidades { width: min(980px, calc(100vw / var(--zoom, 1) - 32px)); min-height: min(520px, calc(100vh / var(--zoom, 1) - 48px)); border-radius: 18px; }
.ut-ruta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; font-size: 13px; color: var(--tenue); }
.ut-ruta button { border: 0; background: none; padding: 2px 4px; border-radius: 6px; color: var(--primario); font: inherit; font-weight: 600; cursor: pointer; }
.ut-ruta button[aria-current="page"] { color: var(--texto); cursor: default; }
.ut-ruta button:hover:not([aria-current]) { background: var(--superficie-2); }
.ut-cuerpo { padding: 22px; overflow: auto; }
.ut-cajas { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; }
.ut-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; min-height: 150px; padding: 18px; text-align: left;
  border: 1px solid var(--borde); border-radius: 16px; background: var(--superficie); color: var(--texto); cursor: pointer; font: inherit;
  transition: transform .15s, box-shadow .15s, border-color .15s; }
.ut-caja:hover:not(:disabled), .ut-caja:focus-visible { transform: translateY(-2px); border-color: var(--primario); box-shadow: 0 8px 22px rgba(11, 27, 43, .12); }
.ut-caja:disabled { opacity: .5; cursor: not-allowed; }
.ut-caja.grupo { background: linear-gradient(160deg, var(--superficie), var(--superficie-2)); }
.ut-icono { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; color: #fff;
  background: linear-gradient(135deg, #0B8BC2, #5CC8F2); }
.ut-caja.grupo .ut-icono { background: linear-gradient(135deg, #F29A00, #FFB200); }
.ut-icono .icono { width: 24px; height: 24px; }
.ut-txt { display: flex; flex-direction: column; gap: 4px; }
.ut-txt b { font-size: 16px; }
.ut-txt small { color: var(--tenue); font-size: 13px; line-height: 1.4; }
.ut-cuenta { margin-top: auto; font-size: 12.5px; font-weight: 700; color: var(--primario); }

/* Numeradores (EFTNUM01) dentro de Utilidades: columnas que avanzan de izquierda a derecha */
.dialogo-utilidades.con-vista { width: min(1320px, calc(100vw / var(--zoom, 1) - 24px)); height: min(820px, calc(100vh / var(--zoom, 1) - 32px)); }
.dialogo-utilidades.con-vista .dialogo-cuerpo { height: 100%; }
.dialogo-utilidades.con-vista .ut-cuerpo { flex: 1; min-height: 0; padding: 16px 18px; display: flex; }
.nm { display: flex; flex-direction: column; gap: 12px; flex: 1; min-height: 0; width: 100%; }
.nm-barra { display: flex; align-items: center; gap: 12px; }
.nm-barra .hueco { flex: 1; }
.nm-ruta { display: flex; gap: 6px; flex-wrap: wrap; }
.nm-ruta > span { display: flex; flex-direction: column; padding: 6px 12px; border-radius: 10px; background: var(--superficie-2); min-width: 84px; }
.nm-ruta small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); }
.nm-ruta b { font-size: 14px; }
.nm-columnas { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(210px, 1.15fr) minmax(150px, .8fr) minmax(160px, .85fr) minmax(170px, .9fr) minmax(300px, 1.5fr);
  border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; background: var(--superficie); }
.nm-col { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); }
.nm-col:last-child { border-right: 0; }
.nm-col h5 { margin: 0; padding: 10px 12px; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue);
  background: var(--superficie-2); border-bottom: 1px solid var(--borde); }
.nm-lista, .nm-series { flex: 1; min-height: 0; overflow: auto; padding: 6px; }
.nm-filtro { display: flex; align-items: center; gap: 6px; margin: 6px 6px 0; padding: 0 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--fondo); }
.nm-filtro .icono { width: 14px; height: 14px; color: var(--tenue); }
.nm-filtro input { border: 0; background: none; padding: 6px 0; width: 100%; font: inherit; font-size: 13px; outline: none; }
.nm-item { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; padding: 8px 26px 8px 10px;
  margin-bottom: 2px; border: 0; border-radius: 9px; background: none; text-align: left; font: inherit; font-size: 13.5px; color: var(--texto); cursor: pointer; }
.nm-item small { color: var(--tenue); font-size: 11.5px; }
.nm-item .icono { width: 15px; height: 15px; margin-right: 6px; vertical-align: -2px; color: var(--primario); }
.nm-item:hover { background: var(--superficie-2); }
.nm-item[aria-selected="true"] { background: color-mix(in srgb, var(--primario) 14%, transparent); color: var(--texto); box-shadow: inset 3px 0 0 var(--primario); }
.nm-item[aria-selected="true"]::after { content: '›'; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); color: var(--primario); font-weight: 800; font-size: 16px; }
.nm-item:focus-visible { outline: 2px solid var(--primario); outline-offset: -2px; }
.nm-marca { position: absolute; right: 24px; top: 9px; font-size: 10px; font-weight: 700; color: #B77A00; background: rgba(255, 178, 0, .18); padding: 1px 6px; border-radius: 999px; }
.nm-cheuron { display: none; }
.nm-mas { margin: 6px; padding: 8px; border: 1px dashed var(--borde-fuerte); border-radius: 9px; background: none; color: var(--primario); font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer; }
.nm-mas:hover { background: var(--superficie-2); }
.nm-serie { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; align-items: center; gap: 2px 10px; padding: 8px 8px 6px;
  border-radius: 10px; margin-bottom: 4px; }
.nm-serie:hover { background: var(--superficie-2); }
.nm-serie.cambiada { background: rgba(255, 178, 0, .12); }
.nm-letra { grid-row: span 2; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; font-weight: 800; font-size: 17px;
  color: #fff; background: linear-gradient(135deg, #0B8BC2, #5CC8F2); }
.nm-letra.vacia { background: var(--superficie-2); color: var(--tenue); }
.nm-valor { width: 100%; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 9px; background: var(--fondo); color: var(--texto);
  font: inherit; font-size: 17px; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.nm-valor:focus { outline: 2px solid var(--primario); outline-offset: 1px; }
.nm-grabar { grid-row: 1; grid-column: 3; }
.nm-quien { grid-column: 2 / 4; color: var(--tenue); font-size: 11px; }
.nm-nueva { grid-template-columns: 70px 1fr auto; grid-template-rows: auto; border-top: 1px dashed var(--borde); border-radius: 0; margin-top: 6px; padding-top: 12px; }
.nm-letra-nueva { padding: 8px; border: 1px solid var(--borde-fuerte); border-radius: 9px; background: var(--fondo); font: inherit; font-weight: 800;
  text-align: center; text-transform: uppercase; }
.nm-nueva .nm-valor { font-size: 15px; font-weight: 500; }
.nm-col-series .config-resultado { margin: 6px; }
.nm-copia { border: 1px solid var(--primario); border-radius: 14px; padding: 14px 16px; background: color-mix(in srgb, var(--primario) 5%, var(--superficie));
  animation: nm-baja .18s ease-out; }
@keyframes nm-baja { from { opacity: 0; transform: translateY(-6px); } }
.nm-copia-rejilla { display: grid; grid-template-columns: auto auto auto 1fr; gap: 14px 18px; align-items: center; }
.nm-copia-lado { display: grid; grid-template-columns: 220px 110px; gap: 8px; }
.nm-copia-lado h6 { grid-column: 1 / -1; margin: 0; font-size: 11.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); }
.nm-copia-lado .campo { margin: 0; }
.nm-copia-lado .campo > span { display: block; font-size: 12px; font-weight: 700; color: var(--texto-2); margin-bottom: 4px; }
.nm-copia-lado select, .nm-copia-lado input { width: 100%; padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--fondo); font: inherit; }
.nm-flecha { font-size: 24px; color: var(--primario); font-weight: 800; padding-top: 18px; }
.nm-copia-resumen p { margin: 0 0 6px; }
.nm-aviso { color: #B42318; font-size: 13px; font-weight: 600; }
@media (max-width: 1100px) { .nm-columnas { grid-template-columns: repeat(5, minmax(190px, 1fr)); overflow-x: auto; } .nm-copia-rejilla { grid-template-columns: 1fr; } .nm-flecha { display: none; } }

/* Direcciones de envío desde Utilidades: cliente arriba y su mantenimiento de direcciones debajo */
.ud { display: flex; flex-direction: column; gap: 14px; width: 100%; min-height: 0; overflow: auto; }
.ud-busca { display: flex; flex-direction: column; gap: 6px; max-width: 720px; }
.ud-etq { font-size: 12px; font-weight: 700; color: var(--texto-2); }
.ud-etq em { font-style: normal; font-weight: 500; color: var(--tenue); margin-left: 4px; }
.ud-combo .combo-caja { background: var(--fondo); }
.ud-tarjeta { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); max-width: 720px; }
.ud-n2 { font-weight: 600; color: var(--texto-2); }
.ud-vacio { padding: 30px 0; text-align: center; }

/* fila de accesos de la vista previa: a la izquierda y ocupando lo que haya; los botones siempre a la derecha
   (antes iban empujados a la derecha y, según el tamaño de letra, se partían dejando un hueco) */
.detalle-cab .det-saltos { flex: 1 1 240px; min-width: 0; margin-left: 0; justify-content: flex-start; align-content: flex-start; }
.detalle-cab .det-botones { flex: none; margin-left: auto; align-self: flex-start; align-items: center; }
.detalle-cab .det-saltos + .det-botones { margin-left: auto; }
.det-plegar { padding: 4px 7px; }
.det-plegar svg { width: 14px; height: 14px; }
/* cabecera del documento plegable: plegada queda una línea de resumen */
.previa-cab .previa-resumen { display: none; }
.previa-cab.plegada .previa-cab-completa { display: none; }
.previa-cab.plegada .previa-resumen { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; margin: 2px 0 14px; padding: 10px 14px;
  border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie-2); cursor: pointer; font-size: 13.5px; }
.previa-resumen span { display: flex; flex-direction: column; min-width: 0; }
.previa-resumen small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); }
.previa-resumen:hover { border-color: var(--primario); }
.previa-cab-completa { animation: previa-abre .18s ease-out; }
@keyframes previa-abre { from { opacity: 0; transform: translateY(-4px); } }
/* con poco sitio (letra grande), el estado no tapa el título: el título se corre o baja de línea */
.detalle-titulo { grid-template-columns: minmax(0, 1fr) minmax(0, max-content) minmax(max-content, 1fr); }
.detalle-tit-centro { min-width: 0; }
.detalle-tit-centro h2 { overflow-wrap: anywhere; }
/* toda la fila (accesos, flechita, Relaciones) centrada a la misma altura */
.detalle-cab .det-saltos { align-self: center; align-items: center; }
.detalle-cab .det-botones { align-self: center; }
.det-salto { height: 26px; box-sizing: border-box; }
.det-plegar { height: 30px; width: 30px; justify-content: center; padding: 0; border-radius: 8px; }

/* lista y vista previa, a la misma altura con cualquier tamaño de letra: la lista aprovecha el alto de la pantalla y
   la vista previa mide lo mismo que la lista (--alto-lista lo pone app.js), con su propio desplazamiento dentro */
@media (max-width: 1100px) { .panel-lista > .tabla-scroll, .panel-lista .tabla-scroll:not(.sub-bloque .tabla-scroll) { max-height: max(360px, calc(100vh / var(--zoom, 1) - 300px)); } }
.panel-detalle { max-height: min(calc(100vh / var(--zoom, 1) - 88px), var(--alto-lista, 100000px)); }
/* la cabecera fija de la vista previa se separa del contenido que pasa por debajo */
.detalle-fija { border-bottom: 1px solid var(--borde); box-shadow: 0 6px 10px -8px rgba(11, 27, 43, .25); margin-bottom: 10px; }

/* cabecera de la oferta plegable (como «Ocultar indicadores») */
.of-persiana { transition: grid-template-rows .3s ease, opacity .2s ease; }
.of-plegable { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.of-persiana.plegada + .of-plegable { margin-top: 8px; }
.of-plegar { margin-left: auto; flex: none; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px; font-size: 13px; }
.of-plegar .icono { width: 15px; height: 15px; }
.of-resumen-cab { flex: 1; min-width: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; padding: 8px 12px; border: 1px solid var(--borde);
  border-radius: 10px; background: var(--superficie-2); cursor: pointer; font-size: 13px; }
.of-resumen-cab[hidden] { display: none; }
.of-resumen-cab:hover { border-color: var(--primario); }
.of-resumen-cab span { display: flex; flex-direction: column; }
.of-resumen-cab small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); }
/* la vista previa se fija justo debajo de la barra superior (su altura real, --alto-cabecera): al subir no asoma
   media fila de lo que hay encima */
.panel-detalle { top: calc(var(--alto-cabecera, 64px) + 8px);
  max-height: min(calc(100vh / var(--zoom, 1) - var(--alto-cabecera, 64px) - 16px), var(--alto-lista, 100000px)); }
/* con pocas filas (p. ej. al buscar un documento), la lista llega igualmente hasta abajo de la pantalla y la vista
   previa, que mide lo mismo, conserva toda su altura para poder recorrerla */
.panel-lista { min-height: calc(100vh / var(--zoom, 1) - var(--alto-cabecera, 64px) - 16px); display: flex; flex-direction: column; }
/* la lista mide justo el alto de la pantalla (menos la barra superior): la tabla ocupa lo que dejan las barras, tengan
   una línea o dos, y el final de la página de filas no se queda a media pantalla */
@media (min-width: 1101px) {
  .panel-lista { height: calc(100vh / var(--zoom, 1) - var(--alto-cabecera, 64px) - 16px); }
  .panel-lista > .tabla-scroll { flex: 1 1 0; min-height: 240px; max-height: none; }
}
@media (max-width: 1100px) { .panel-lista { min-height: 0; } }

/* crear contraseña (enlace de invitación) */
.inv-reglas { list-style: none; margin: 4px 0 8px; padding: 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--tenue); }
.inv-reglas li::before { content: '○'; margin-right: 5px; }
.inv-reglas li.ok { color: var(--texto-bien, #1a7f37); font-weight: 600; }
.inv-reglas li.ok::before { content: '✓'; }

/* Administración › Conexiones */
.cx { padding: 18px 20px; }
.cx-cab h2 { display: flex; align-items: center; gap: 8px; margin: 0 0 4px; }
.cx-cab h2 .icono { width: 20px; height: 20px; color: var(--primario); }
.cx-filtros { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 14px 0 8px; }
.cx-buscar { flex: 1 1 260px; max-width: 380px; }
.cx-filtros select, .cx-fecha input { padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); font: inherit; }
.cx-fecha { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--texto-2); }
.cx-cuenta { margin: 6px 0 10px; font-size: 13px; color: var(--texto-2); }
.cx-ko { color: var(--critico, #b42318); font-weight: 700; }
.cx-aviso { color: #B77A00; font-weight: 700; }
.cx-tabla .te-scroll { max-height: calc(100vh / var(--zoom, 1) - 380px); }
.cx-tabla { width: 100%; }
.cx-nw { white-space: nowrap; }
.cx-tabla code { font-size: 12.5px; }
.cx-detalle { color: var(--tenue); font-size: 12.5px; }
.cx-mas { margin-top: 10px; }
/* usuarios invitados */
.u-pendiente { margin-left: 8px; font-size: 11px; font-weight: 700; color: #B77A00; background: rgba(255, 178, 0, .16); padding: 2px 8px; border-radius: 999px; }
.inv-enlace { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.inv-enlace code { font-size: 12px; word-break: break-all; background: var(--superficie-2); padding: 4px 8px; border-radius: 6px; }

/* usuarios: una línea cada uno (como la lista de clientes); el lápiz despliega sus papeles y acciones */
.usuario-fila { display: block; padding: 0; }
.usuario-fila .u-linea { display: flex; align-items: center; gap: 10px; padding: 8px 10px 8px 14px; flex-wrap: wrap; }
.usuario-fila .u-login { flex: 1 1 260px; min-width: 0; }
.u-papel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; color: var(--texto-2);
  padding: 3px 9px; border-radius: 999px; background: var(--superficie-2); }
.u-papel .icono { width: 13px; height: 13px; }
.u-papel.admin { color: var(--primario); background: color-mix(in srgb, var(--primario) 12%, transparent); }
.u-papel.super { color: #B77A00; background: rgba(255, 178, 0, .16); }
.u-lapiz { margin-left: 4px; }
.usuario-fila.abierta { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 12%, transparent); }
.u-edicion { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 14px 12px; border-top: 1px solid var(--borde);
  background: var(--superficie-2); border-radius: 0 0 10px 10px; animation: previa-abre .18s ease-out; }
.u-roles { display: flex; gap: 8px; flex-wrap: wrap; }
.u-edicion .acciones { margin-left: auto; }
.usuario-fila .reset { flex-basis: 100%; padding: 0 14px 12px; }

/* ---------- anexos (EFTDAD01): clip en la lista, lista emergente, apartado de la vista previa y configuración ---------- */
th.col-anexos, td.col-anexos { width: 34px; padding-left: 4px !important; padding-right: 0 !important; text-align: center; }
.anx-th { width: 14px; height: 14px; color: var(--tenue); vertical-align: middle; }
.btn-anexos { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 24px;
  border: 0; border-radius: 7px; background: var(--info-fondo); color: var(--info); cursor: pointer; transition: transform .15s; }
.btn-anexos:hover { transform: scale(1.12) rotate(-8deg); }
.btn-anexos .icono { width: 14px; height: 14px; }
.btn-anexos small { position: absolute; top: -5px; right: -6px; min-width: 15px; height: 15px; padding: 0 3px; border-radius: 8px;
  background: var(--primario); color: var(--sobre-primario); font-size: 10px; font-weight: 700; line-height: 15px; }
.anx-pop { position: fixed; z-index: 60; width: min(430px, calc(100vw / var(--zoom, 1) - 16px)); max-height: calc(60vh / var(--zoom, 1)); overflow: auto;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; box-shadow: var(--sombra-dialogo); }
.anx-pop header { display: flex; align-items: center; gap: 8px; padding: 10px 10px 8px 14px; border-bottom: 1px solid var(--borde);
  position: sticky; top: 0; background: var(--superficie); }
.anx-pop header > .icono { width: 16px; height: 16px; color: var(--info); }
.anx-pop .anx-doc { color: var(--tenue); font-size: 12.5px; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-lista { list-style: none; margin: 0; padding: 4px 0; }
.anx-fila { display: flex; align-items: center; gap: 10px; padding: 7px 12px; }
.anx-fila + .anx-fila { border-top: 1px solid var(--borde); }
.anx-fila:hover { background: var(--superficie-2); }
.anx-ext { flex: none; width: 38px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .02em; color: #fff; background: #8b918c; }
.anx-ext.rojo { background: #D2463C; } .anx-ext.azul { background: #2F6FD0; } .anx-ext.verde { background: #1E8E4E; }
.anx-ext.morado { background: #8A55C9; } .anx-ext.ambar { background: #C98A12; } .anx-ext.naranja { background: #E07B24; }
.anx-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.anx-txt a { color: inherit; text-decoration: none; }
.anx-txt a:hover b { text-decoration: underline; color: var(--primario); }
.anx-txt b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-txt small { color: var(--tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-acciones { display: flex; gap: 2px; flex: none; }
.anx-acciones .btn-icono { width: 30px; height: 30px; }
.anx-vacio { padding: 12px 14px; color: var(--tenue); font-size: 13px; }
.anx-vacio.error, .anx-estado.ko { color: var(--texto-critico); }
.anx-aviso { font-size: 12px; color: var(--texto-aviso); }
.anx-bloque { padding: 0; }
.anx-cab { display: flex; align-items: center; gap: 10px; padding: 8px 12px; background: var(--superficie-2); border-bottom: 1px solid var(--borde); flex-wrap: wrap; }
.anx-cab h3 { display: flex; align-items: center; justify-content: flex-start; text-align: left; gap: 7px; margin: 0; font-size: 13.5px; flex: 1; }
.anx-cab h3 .icono { width: 15px; height: 15px; color: var(--info); }
.anx-cab h3 small { font-weight: 700; color: var(--tenue); }
.anx-botones { display: flex; gap: 6px; flex-wrap: wrap; }
.anx-botones .btn { padding: 5px 10px; font-size: 12.5px; cursor: pointer; }
.anx-botones .btn .icono { width: 14px; height: 14px; }
.anx-estado { margin: 0; padding: 6px 12px 10px; font-size: 12.5px; color: var(--texto-2); }
.anx-config .anx-raiz { max-width: 720px; }
.anx-config .anx-raiz input, .anx-tipos input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; }
.anx-ayuda { margin: 6px 0 14px; padding-left: 18px; color: var(--texto-2); font-size: 12.5px; line-height: 1.5; }
.anx-tipos { width: 100%; max-width: 900px; margin-bottom: 12px; }
.anx-tipos td { padding: 5px 8px; vertical-align: middle; }
.anx-tipos th em { font-weight: 400; color: var(--tenue); font-style: normal; }
.anx-tipos input { width: 100%; min-width: 180px; padding: 6px 9px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); }
.anx-cod { display: inline-block; min-width: 30px; padding: 2px 6px; border-radius: 6px; background: var(--info-fondo); color: var(--info); font-size: 12px; text-align: center; }
/* botón de anexos en la cabecera de la vista previa: «Anexos n» + «+» pegados */
.det-anexos { display: inline-flex; }
.det-anexos .btn { border-radius: 10px 0 0 10px; }
.det-anexos .btn:only-child, .det-anexos .btn:first-child:has(+ [hidden]) { border-radius: 10px; }
.det-anexos .det-anx-mas { border-radius: 0 10px 10px 0; margin-left: -1px; padding-left: 9px; padding-right: 9px; }
.det-anexos small { min-width: 18px; padding: 0 5px; border-radius: 9px; font-size: 11px; font-weight: 700; line-height: 18px;
  background: var(--superficie-2); color: var(--tenue); text-align: center; }
.det-anexos small:empty { display: none; }
.det-anexos.con [data-det-anx-ver] { color: var(--info); border-color: color-mix(in srgb, var(--info) 45%, var(--borde)); }
.det-anexos.con small { background: var(--primario); color: var(--sobre-primario); }
/* zona de arrastrar y soltar de los anexos */
.anx-soltar { display: flex; align-items: center; gap: 12px; margin: 4px 12px 12px; padding: 14px 16px; border: 2px dashed var(--borde-fuerte);
  border-radius: 10px; color: var(--texto-2); font-size: 13px; transition: background .15s, border-color .15s; }
.anx-soltar-ic { width: 26px; height: 26px; color: var(--info); flex: none; }
.anx-soltar-txt { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px; min-width: 0; }
.anx-soltar-txt small { flex-basis: 100%; color: var(--tenue); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.anx-examinar { color: var(--primario); font-weight: 700; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.anx-examinar:focus-within { outline: 2px solid var(--primario); outline-offset: 2px; border-radius: 4px; }
.anx-arrastrando .anx-soltar { background: var(--info-fondo); border-color: var(--info); }
.anx-arrastrando .anx-soltar-ic { animation: anx-bota .7s ease-in-out infinite alternate; }
@keyframes anx-bota { to { transform: translateY(-4px); } }
/* descripción de los anexos */
.anx-desc { flex-basis: 100%; width: 100%; margin-top: 6px; padding: 6px 9px; border: 1px solid var(--borde); border-radius: 8px;
  background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.anx-desc:focus { outline: 2px solid var(--primario); outline-offset: 0; border-color: var(--primario); }
.anx-txt .anx-desc { margin: 0 0 2px; }
/* registro de actividad */
.ac-fila { cursor: pointer; }
.ac-fila:hover td, .ac-fila.abierta td { background: var(--superficie-2); }
.ac-tenue { color: var(--tenue); }
.ac-extra td { background: var(--superficie-2); padding: 4px 14px 12px !important; }
.ac-dl { display: grid; grid-template-columns: 110px 1fr; gap: 6px 14px; margin: 0; font-size: 13px; }
.ac-dl dt { color: var(--tenue); font-weight: 600; }
.ac-dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.ac-dl code { font-size: 12px; }
.estado.neutro { background: var(--neutro-fondo); color: var(--texto-2); }
.ac-objeto { color: var(--texto-2); font-weight: 600; }
.ac-tabla .cx-detalle { max-width: 520px; }

/* ---------- fotos de artículos y logo de clientes ---------- */
.fc-avatar { position: relative; overflow: hidden; }
.fc-avatar .foto-principal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; border-radius: inherit; }
.det-foto { display: flex; align-items: center; justify-content: flex-start; min-width: 0; }
.det-foto .foto-principal { width: 46px; height: 46px; object-fit: contain; border-radius: 10px; background: #fff; border: 1px solid var(--borde);
  box-shadow: var(--sombra); cursor: zoom-in; }
.ft { position: relative; }
.ft-soltar { display: flex; align-items: center; gap: 12px; margin: 0 0 14px; padding: 14px 16px; border: 2px dashed var(--borde-fuerte);
  border-radius: 12px; color: var(--texto-2); font-size: 13px; transition: background .15s, border-color .15s; }
.anx-arrastrando .ft-soltar { background: var(--info-fondo); border-color: var(--info); }
.anx-arrastrando .ft-soltar .anx-soltar-ic { animation: anx-bota .7s ease-in-out infinite alternate; }
.ft-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 14px; }
.ft-foto { position: relative; margin: 0; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; background: var(--superficie);
  display: flex; flex-direction: column; transition: box-shadow .15s, transform .15s; }
.ft-foto:hover { box-shadow: var(--sombra-sub); transform: translateY(-2px); }
.ft-foto.principal { border-color: #FFB200; box-shadow: 0 0 0 2px rgba(255, 178, 0, .45); }
.ft-marco { display: flex; align-items: center; justify-content: center; aspect-ratio: 4 / 3; padding: 0; border: 0; cursor: zoom-in;
  background: repeating-conic-gradient(var(--superficie-2) 0 25%, var(--superficie) 0 50%) 0 0 / 16px 16px; }
.ft-marco img { width: 100%; height: 100%; object-fit: contain; }
.ft-marca { position: absolute; top: 8px; left: 8px; display: inline-flex; align-items: center; gap: 4px; padding: 3px 8px 3px 6px;
  border-radius: 999px; background: #FFB200; color: #3a2800; font-size: 11px; font-weight: 800; }
.ft-marca .icono, .ft-marca svg { width: 12px; height: 12px; fill: currentColor; }
.ft-foto figcaption { padding: 8px 10px 2px; display: flex; flex-direction: column; min-width: 0; }
.ft-foto figcaption b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ft-foto figcaption small { color: var(--tenue); font-size: 11.5px; }
.ft-acciones { display: flex; justify-content: flex-end; gap: 2px; padding: 2px 6px 6px; }
.ft-acciones .btn-icono { width: 30px; height: 30px; }
.ft-vacio { grid-column: 1 / -1; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px 10px; color: var(--tenue); text-align: center; }
.ft-vacio .icono { width: 34px; height: 34px; }
.dialogo-fotos { width: min(1100px, calc(96vw / var(--zoom, 1))); max-width: none; padding: 0; background: #111; border: 0; border-radius: 14px; }
.dialogo-fotos::backdrop { background: rgba(0, 0, 0, .75); }
.vf { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: calc(60vh / var(--zoom, 1)); }
.vf img { max-width: 100%; max-height: calc(80vh / var(--zoom, 1)); object-fit: contain; }
.vf-pie { margin: 0; padding: 10px 16px; color: #ddd; font-size: 13px; }
.vf-cerrar { position: absolute; top: 10px; right: 10px; background: rgba(255, 255, 255, .15); color: #fff; z-index: 2; }
.vf-flecha { position: absolute; top: 50%; transform: translateY(-50%); width: 46px; height: 64px; border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .12); color: #fff; font-size: 34px; cursor: pointer; z-index: 2; }
.vf-flecha:hover { background: rgba(255, 255, 255, .25); }
.vf-flecha.izq { left: 10px; } .vf-flecha.der { right: 10px; }
/* ficha de artículos */
.fc-grupo.cuatro .fc-rejilla { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.fa-tabla-marco { overflow-x: auto; }
.fa-tabla { width: 100%; font-size: 13px; }
.fa-solo { font-weight: 500; color: var(--tenue); font-size: 11.5px; margin-left: 6px; text-transform: none; letter-spacing: 0; }
.campo-ficha select:disabled, .campo-ficha input:disabled { opacity: 1; color: var(--texto); background: var(--superficie-2); cursor: default; }
@media (max-width: 760px) { .fc-grupo.cuatro .fc-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* tarjeta al pasar el ratón por un artículo o un cliente */
.det-foto .foto-principal { width: 58px; height: 58px; }
.tarjeta-flotante { position: fixed; z-index: 80; display: flex; width: 460px; max-width: calc(100vw / var(--zoom, 1) - 16px);
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; box-shadow: var(--sombra-dialogo); overflow: hidden;
  pointer-events: none; animation: tj-entra .14s ease-out; }
@keyframes tj-entra { from { opacity: 0; transform: translateY(4px); } }
.tj-foto { position: relative; flex: none; width: 170px; min-height: 170px; display: flex; align-items: center; justify-content: center;
  background: var(--superficie-2); border-right: 1px solid var(--borde); }
.tj-foto.logo { background: #fff; }
.tj-ini { font-size: 34px; font-weight: 800; color: var(--tenue); letter-spacing: .04em; }
.tj-foto .tj-img { position: absolute; inset: 8px; width: calc(100% - 16px); height: calc(100% - 16px); object-fit: contain; background: transparent; }
.tj-foto:has(.tj-img) .tj-ini { visibility: hidden; }
.tj-cuerpo { flex: 1; min-width: 0; padding: 12px 14px 12px; }
.tj-ante { margin: 0; font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.tj-ante b { color: var(--primario); }
.tj-cuerpo h4 { margin: 2px 0 8px; font-size: 15px; line-height: 1.25; }
.tj-cuerpo dl { display: grid; grid-template-columns: auto 1fr; gap: 3px 10px; margin: 0; font-size: 12.5px; }
.tj-cuerpo dt { color: var(--tenue); white-space: nowrap; }
.tj-cuerpo dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }
.tj-pend { color: var(--texto-critico); }
@media (max-width: 560px) { .tj-foto { width: 110px; min-height: 110px; } }
.det-foto { position: relative; width: 58px; height: 58px; flex: none; }
.det-foto .foto-principal { position: absolute; inset: 0; }
.det-foto-vacia { width: 58px; height: 58px; padding: 16px; border-radius: 10px; border: 1px dashed var(--borde-fuerte); color: var(--tenue);
  background: var(--superficie-2); box-sizing: border-box; cursor: help; }
/* hoja del artículo en la vista previa */
.ha-cabecera { display: flex; gap: 14px; align-items: flex-start; }
.ha-foto { position: relative; flex: none; width: 132px; height: 132px; padding: 0; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie-2); color: var(--tenue); cursor: pointer; overflow: hidden; display: flex; align-items: center; justify-content: center; }
.ha-foto > .icono { width: 34px; height: 34px; }
.ha-foto .foto-principal { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #fff; }
.ha-foto:hover { border-color: var(--primario); }
.ha-datos { flex: 1; min-width: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.ha-datos > div { display: flex; flex-direction: column; min-width: 0; }
.ha-datos .hd-ancho { grid-column: 1 / -1; }
.ha-datos span { font-size: 11px; color: var(--tenue); text-transform: uppercase; letter-spacing: .05em; }
.ha-datos b { font-weight: 700; overflow-wrap: anywhere; }
.hoja-art .hd-filas code, .ha-datos code { font-size: 12px; margin-right: 4px; }
@media (max-width: 560px) { .ha-cabecera { flex-direction: column; } .ha-foto { width: 100%; } }
.aviso-version { position: fixed; z-index: 90; left: 50%; bottom: 18px; transform: translateX(-50%); display: flex; align-items: center; gap: 12px;
  max-width: calc(100vw / var(--zoom, 1) - 24px); padding: 10px 12px 10px 16px; border-radius: 14px; background: var(--superficie);
  border: 1px solid var(--borde-acento, var(--primario)); box-shadow: var(--sombra-dialogo); font-size: 13.5px; animation: tj-entra .2s ease-out; }
.aviso-version > .icono { width: 20px; height: 20px; color: var(--primario); flex: none; }
/* logo del cliente en la vista previa, más grande */
.det-foto, .det-foto-vacia, .det-foto .foto-principal { width: 84px; height: 84px; }
.det-foto-vacia { padding: 24px; }
/* el logo con su proporción: alto máximo 84 px, ancho hasta 220 px; sin logo, el recuadro con el icono */
.det-foto { width: auto; height: auto; min-height: 84px; }
.det-foto .foto-principal { position: static; width: auto; height: auto; max-height: 84px; max-width: 220px; object-fit: contain; padding: 4px; }
.det-foto:has(.foto-principal) .det-foto-vacia { display: none; }
.det-foto { max-width: 100%; min-width: 0; }
.det-foto .foto-principal { max-width: min(220px, 100%); }
/* aplicación de escritorio */
.escritorio .config-icono img { border-radius: 10px; display: block; }
.esc-cuerpo { display: flex; flex-direction: column; gap: 12px; }
.esc-estado:empty { display: none; }
.esc-estado { margin: 0; display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.esc-estado.ok { color: var(--texto-bien); }
.esc-estado .icono, .esc-estado svg { width: 16px; height: 16px; }
.esc-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.esc-opcion { border: 1px solid var(--borde); border-radius: 12px; padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.esc-opcion h4 { margin: 0; font-size: 14px; }
.esc-opcion p { margin: 0; color: var(--texto-2); font-size: 13px; line-height: 1.5; }
.esc-ayuda:empty { display: none; }
.esc-opcion a.btn { text-decoration: none; color: inherit; display: inline-flex; align-items: center; gap: 6px; }
/* campos corporativos (Ctrl + doble clic) */
.campo-ficha.solo-ver > span::after, .campo-ficha.solo-ver > .etq::after { content: 'solo ver'; margin-left: 6px; padding: 1px 6px; border-radius: 6px;
  font-size: 10px; font-weight: 700; background: var(--neutro-fondo); color: var(--tenue); }
.dialogo-campo { width: min(720px, calc(96vw / var(--zoom, 1))); max-width: none; padding: 0; }
.cc-cuerpo { padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; max-height: calc(64vh / var(--zoom, 1)); overflow: auto; }
.cc-cuerpo h4 { margin: 8px 0 0; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); }
.cc-usuarios th.c, .cc-usuarios td.c { text-align: center; width: 92px; }
.cc-usuarios input[type=radio] { width: 17px; height: 17px; accent-color: var(--primario); }
.cc-admin { color: var(--tenue); font-weight: 600; }
.cc-nota { margin: 0; font-size: 12px; color: var(--tenue); }
.u-erp { display: inline-block; margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: var(--info-fondo); color: var(--info);
  font-size: 11px; font-weight: 700; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
/* usuarios de Enterprise */
.ue { display: flex; flex-direction: column; gap: 10px; }
.ue-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ue-buscar { flex: 1 1 320px; }
[data-ue-tabla] td { vertical-align: middle; }
[data-ue-tabla] select { width: 100%; min-width: 90px; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; background: var(--superficie); color: var(--texto); font: inherit; font-size: 13px; }
.ue-acc { white-space: nowrap; text-align: right; }
.ue-acc .btn { margin-left: 4px; }
.ue-edita td { background: var(--info-fondo); }
.ue-tenue { color: var(--tenue); }
[data-ue-tabla] .ue-acc { width: 1%; } .ue-acc .btn-icono { display: inline-flex; vertical-align: middle; }
/* mantenimiento de tablas auxiliares: grupos, baja, calculados y tablas relacionadas */
.aux-principal { margin-bottom: 12px; }
.aux-grupo { margin-bottom: 12px; }
.aux-check { display: inline-flex; align-items: center; gap: 8px; min-height: 38px; font-size: 13px; }
.aux-check input { width: 17px; height: 17px; accent-color: var(--critico); }
.aux-calc input { background: var(--superficie-2); color: var(--texto-2); border-style: dashed; }
.aux-sub h4 { display: flex; align-items: center; gap: 10px; }
.aux-sub-herr { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; text-transform: none; letter-spacing: 0; }
.aux-sub-tabla tbody tr[data-hijo] { cursor: pointer; }
.aux-sub-tabla tbody tr[data-hijo]:hover td { background: var(--superficie-2); }
/* tarifas por familias */
.tf { display: flex; flex-direction: column; gap: 12px; }
.tf-barra, .tf-herr { display: flex; gap: 12px; align-items: flex-end; flex-wrap: wrap; }
.tf-familia { flex: 1 1 300px; }
.tf-corto { flex: 0 0 170px; }
.tf-herr .hueco { flex: 1; }
.tf-cuenta { font-size: 13px; color: var(--texto-aviso); font-weight: 600; }
.tf-tabla { margin-top: 10px; }
.tf-precio { width: 120px; padding: 5px 8px; border: 1px solid var(--borde); border-radius: 8px; text-align: right; font: inherit; background: var(--superficie); color: var(--texto); }
.tf-precio.con-error { border-color: var(--critico); }
.tf-sube { color: var(--texto-bien); } .tf-baja { color: var(--texto-critico); }
/* mantenimiento: ventana más ancha cuando la tabla tiene apartados (bancos, agentes…) */
.dialogo-aux:has(.aux-grupo) { width: min(1180px, calc(96vw / var(--zoom, 1))); max-width: none; }
.dialogo-aux .aux-grupo .fc-rejilla { grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); }
.dialogo-aux .aux-sub { grid-column: 1 / -1; }
.dialogo-aux:has(.aux-grupo) .aux-principal { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px 18px; margin-bottom: 0; }
.dialogo-aux:has(.aux-grupo) .aux-principal > .ancho { grid-column: span 2; }
/* búsqueda de programas en Utilidades */
.ut-busca { padding: 12px 22px 0; }
.ut-busca .buscador { max-width: 560px; }
.ut-camino { color: var(--primario) !important; font-weight: 600; margin-top: 2px; }
.ut-nada { padding: 30px; text-align: center; }
.dialogo-utilidades.con-vista .ut-busca { display: none; }
.ut-atras { flex: none; }
.ut-atras .icono { width: 20px; height: 20px; }
/* diseño de los documentos (ficha de la empresa) */
.dd { display: flex; flex-direction: column; gap: 14px; }
.dd-barra { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
.dd-colores { display: inline-flex; gap: 6px; align-items: center; }
.dd-color { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--superficie); background: var(--c); box-shadow: 0 0 0 1px var(--borde); cursor: pointer; padding: 0; }
.dd-color.activo { box-shadow: 0 0 0 2px var(--texto); }
.dd-otro { position: relative; overflow: hidden; background: conic-gradient(#f44, #fd4, #4d6, #4bf, #84f, #f4a, #f44); }
.dd-otro input { position: absolute; inset: -8px; opacity: 0; cursor: pointer; }
.dd-sello { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.dd-sello small { color: var(--tenue); }
.dd-muestras { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 14px; }
.dd-muestra { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 10px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); text-align: left; cursor: pointer; color: var(--texto); font: inherit; }
.dd-muestra:hover { box-shadow: var(--sombra-sub); }
.dd-muestra[aria-pressed="true"] { border-color: var(--dd-color, var(--primario)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--dd-color, var(--primario)) 35%, transparent); }
.dd-mini { display: block; width: 100%; aspect-ratio: 210 / 297; overflow: hidden; border-radius: 6px; background: #fff; border: 1px solid var(--borde); position: relative; }
.dd-mini iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; pointer-events: none; transform: scale(var(--dd-escala, .22)); }
.dd-muestra b { font-size: 13.5px; margin-top: 4px; }
.dd-muestra small { color: var(--tenue); font-size: 11.5px; line-height: 1.35; }
.dd-marca { display: none; position: absolute; top: 16px; right: 16px; align-items: center; gap: 4px; padding: 3px 8px 3px 6px; border-radius: 999px;
  background: var(--dd-color, var(--primario)); color: #fff; font-size: 11px; font-weight: 800; box-shadow: var(--sombra); }
.dd-marca svg, .dd-marca .icono { width: 12px; height: 12px; fill: currentColor; }
.dd-muestra[aria-pressed="true"] .dd-marca { display: inline-flex; }
.dd-tipos summary { cursor: pointer; font-weight: 600; font-size: 13px; color: var(--primario); }
.dd-tipos-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-top: 10px; }
.dd-pie { display: flex; align-items: center; gap: 10px; }
.dd-nota { color: var(--texto-aviso); font-weight: 600; font-size: 13px; }
/* muestra de diseño en grande */
.dd-lupa { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 700; color: var(--primario); margin-top: 2px; }
.dd-lupa .icono, .dd-lupa svg { width: 13px; height: 13px; }
.dd-muestra:hover .dd-mini { outline: 2px solid var(--dd-color, var(--primario)); outline-offset: -1px; }
.dialogo-dd { width: calc(100vw / var(--zoom, 1) - 32px); height: calc(100vh / var(--zoom, 1) - 32px); max-width: none; max-height: none; padding: 0;
  border: 0; border-radius: 16px; background: #1F2937; }
.dialogo-dd::backdrop { background: rgba(0, 0, 0, .6); }
.ddg { display: flex; flex-direction: column; height: 100%; color: #fff; }
.ddg-cab { display: flex; align-items: center; gap: 14px; padding: 12px 16px; background: #111827; flex-wrap: wrap; }
.ddg-volver { display: inline-flex; align-items: center; gap: 6px; }
.ddg-tit { display: flex; flex-direction: column; min-width: 0; }
.ddg-tit b { font-size: 16px; }
.ddg-tit small { color: #9CA3AF; font-size: 12px; }
.ddg-cab .segmento button { color: #E5E7EB; }
.ddg-cuerpo { flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; gap: 16px; padding: 12px; }
.ddg-hoja { position: relative; background: #fff; box-shadow: 0 10px 40px rgba(0, 0, 0, .45); overflow: hidden; flex: none; }
.ddg-hoja iframe { position: absolute; top: 0; left: 0; width: 794px; height: 1123px; border: 0; transform-origin: 0 0; transform: scale(var(--k, .8)); }
.ddg-flecha { flex: none; width: 46px; height: 70px; border: 0; border-radius: 12px; background: rgba(255, 255, 255, .1); color: #fff; font-size: 36px; cursor: pointer; }
.ddg-flecha:hover { background: rgba(255, 255, 255, .22); }
.ddg-pie { margin: 0; padding: 6px 16px 12px; text-align: center; color: #9CA3AF; font-size: 12px; }
.ddg-cab .btn:not(.btn-primario) { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .22); }
.ddg-cab .btn:not(.btn-primario):hover { background: rgba(255, 255, 255, .22); }
.ddg-cab .btn:not(.btn-primario) .icono { color: #fff; }
.ddg-cab .segmento { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .22); }
.ddg-cab .segmento button { background: transparent; color: #E5E7EB; border-color: rgba(255, 255, 255, .15); }
.ddg-cab .segmento button[aria-pressed="true"] { background: var(--primario); color: #fff; }
.ddg-cab .btn-primario:disabled { opacity: .7; }

/* ---------------------------------------------------------------- VeriFactu */
.vf-resumen { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.vf-resumen .btn .icono svg, .det-vf .btn .icono svg { width: 16px; height: 16px; }
.dialogo-vf { width: min(820px, calc(100vw - 32px)); }
.dialogo-vf .dialogo-cuerpo { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.vf-cuerpo { overflow: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 14px; }
.vf-cuerpo .fc-grupo { margin: 0; }
.vf-cuerpo code { font-size: 12px; word-break: break-all; }
.vf-activo { flex-direction: row !important; align-items: center; gap: 10px; grid-column: 1 / -1; }
.vf-activo input[type="checkbox"] { width: 18px; height: 18px; flex: none; margin: 0; }
.vf-activo span { font-weight: 600; }
.vf-cert { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 8px; }
.vf-cert svg { width: 18px; height: 18px; color: var(--texto-bien); }
.vf-sif summary { cursor: pointer; font-weight: 600; padding: 4px 0; }
.vf-hist .te-scroll { max-height: 300px; }
.vf-det { max-width: 320px; font-size: 12px; word-break: break-all; }
.det-vf:empty { display: none; }
.det-vf .vf-ok { color: var(--texto-bien); border-color: currentColor; font-weight: 700; letter-spacing: .02em; text-decoration: none; }
.det-vf .vf-mal { color: var(--texto-critico, #b42318); }
@media (max-width: 600px) { .vf-cuerpo { padding: 12px 16px; } }
.vf-bloque h3 small { font-weight: 500; color: var(--texto-suave, #667085); font-size: 12px; margin-left: 6px; }
.vf-bloque h4 { margin: 14px 0 6px; font-size: 13px; }
.vf-previa { display: flex; gap: 18px; align-items: flex-start; flex-wrap: wrap; }
.vf-qr { flex: none; width: 150px; display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center; }
.vf-qr img { width: 140px; height: 140px; display: block; border: 1px solid var(--borde); border-radius: 6px; background: #fff; }
.vf-qr b { font-size: 12px; letter-spacing: .06em; margin-top: 4px; }
.vf-qr small { font-size: 11px; color: var(--texto-suave, #667085); line-height: 1.3; }
.vf-qr-vacio { width: 140px; height: 140px; border: 1px dashed var(--borde); border-radius: 6px; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: var(--texto-suave, #667085); padding: 10px; }
.vf-qr-vacio svg { width: 28px; height: 28px; }
.vf-datos { flex: 1; min-width: 240px; margin: 0; }
.vf-huella { font-family: ui-monospace, monospace; font-size: 11px; word-break: break-all; }
.vf-xml-btns { white-space: nowrap; }
.det-vf .vf-sim { color: var(--info); }
.dialogo-vf-xml { width: min(1000px, calc(100vw - 32px)); }
.dialogo-vf-xml .dialogo-cuerpo { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.vf-xml { flex: 1; overflow: auto; margin: 0; padding: 14px 22px; font: 12px/1.5 ui-monospace, monospace; background: var(--fondo, #f6f7f9);
  white-space: pre; tab-size: 2; }

/* fichas de tablas auxiliares con pestañas (empresas, usuarios de Enterprise…): a la izquierda, como en las demás fichas;
   alto fijo: cabecera, pestañas y pie quietos; solo se desplaza el contenido */
.dialogo-aux:has(.aux-contenido) { width: min(1240px, calc(calc(100vw / var(--zoom, 1)) - 32px)); max-width: none;
  height: min(900px, calc(calc(100vh / var(--zoom, 1)) - 48px)); }
.dialogo-aux:has(.aux-contenido) .dialogo-cuerpo { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.dialogo-aux .aux-modo, .dialogo-aux .fc-resultado { flex: none; }
.aux-contenido { flex: 1 1 auto; min-height: 0; margin-top: 14px; border-top: 1px solid var(--borde); }
.aux-contenido .aux-pestanas { border-right: 1px solid var(--borde); }
.aux-contenido .aux-cuerpo { min-height: 0; overflow: auto; align-content: start; margin: 16px 22px; }
.aux-cuerpo > .aux-fuera { display: none !important; }
.aux-contenido .aux-logo > h4, .aux-contenido .aux-diseno > h4, .aux-contenido .aux-vf > h4 { display: none; }
@media (max-width: 700px) {
  .aux-contenido { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
  .aux-contenido .aux-pestanas { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); padding: 8px; }
  .aux-contenido .aux-pestanas .fc-tab { width: auto; flex: none; }
  .aux-contenido .aux-pestanas .fc-tab-txt small { display: none; }
  .aux-contenido .aux-cuerpo { margin: 12px 16px; }
}
.vf-deshacer { display: flex; align-items: center; gap: 12px; justify-content: space-between; margin: 0; padding: 10px 14px; border-radius: 12px;
  background: var(--info-fondo); color: var(--info); }
.vf-deshacer span { display: flex; align-items: center; gap: 6px; }
.vf-deshacer svg { width: 16px; height: 16px; }

/* ---------------------------------------------------------------- Correo de documentos */
.co-config h4 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .05em; color: var(--texto-2); }
.co-config .co-estado { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.co-config .co-estado small { color: var(--tenue); }
.co-check { flex-direction: row !important; align-items: center; gap: 8px; align-self: end; padding-bottom: 8px; }
.co-check input { width: 17px; height: 17px; flex: none; }
.co-plantilla { border: 1px solid var(--borde); border-radius: 12px; padding: 8px 14px; margin: 8px 0; background: var(--superficie); }
.co-plantilla summary { cursor: pointer; padding: 4px 0; }
.co-plantilla summary small { color: var(--tenue); margin-left: 6px; }
.co-plantilla .campo { margin: 8px 0; }
.co-config textarea, .dialogo-correo textarea { width: 100%; font: inherit; padding: 9px 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px;
  background: var(--superficie); color: var(--texto); resize: vertical; }
.co-config code { font-size: 12px; background: var(--superficie-2); padding: 1px 5px; border-radius: 5px; }
.co-acciones { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.co-acciones .co-prueba { margin: 0; min-width: 240px; }
.co-msg.ok { color: var(--texto-bien); }
.co-msg.ko { color: var(--texto-critico); }
.dialogo-correo { width: min(760px, calc(100vw - 32px)); }
.dialogo-correo .dialogo-cuerpo { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.co-cuerpo { overflow: auto; padding: 16px 22px; display: flex; flex-direction: column; gap: 10px; }
.co-cuerpo .campo { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.co-cuerpo .campo input { padding: 9px 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; }
.co-sugeridos { display: flex; flex-wrap: wrap; gap: 6px; margin-top: -4px; }
.co-sug { cursor: pointer; border: 1px solid var(--borde); }
.co-sug:hover { border-color: var(--primario); }
.co-adjunto { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.co-adjunto svg { width: 18px; height: 18px; color: var(--critico); }
.co-adjunto small { color: var(--tenue); }
.co-aviso { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 10px; background: var(--aviso-fondo, #fff4d6); margin: 0; }
.co-aviso svg { width: 18px; height: 18px; }
.co-cuerpo h4 { margin: 8px 0 0; font-size: 13px; }
.co-hist { font-size: 13px; }
.co-det { max-width: 240px; word-break: break-word; font-size: 12px; }
.co-config .campo.co-check { display: flex; flex-direction: row; align-items: center; gap: 8px; align-self: end; padding-bottom: 10px; cursor: pointer; }
.co-config .campo.co-check span { margin: 0; }
.co-config select { width: 100%; padding: 9px 12px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie);
  color: var(--texto); font: inherit; }

/* ---------------------------------------------------------------- Situación general de un cliente */
.sit { display: flex; flex-direction: column; gap: 12px; padding-top: 6px; }
.sit-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.sit-buscar { flex: 1 1 220px; }
.sit-cif { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.sit-cab { display: flex; align-items: baseline; gap: 12px; font-size: 15px; }
.sit-cab span { color: var(--tenue); font-size: 13px; }
.sit-fichas { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sit-fichas small { color: var(--tenue); }
.sit-fichas .prov { background: var(--aviso-fondo, #fff4d6); }
.sit-grupo h4 { margin: 4px 0 8px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.sit-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.sit-kpi { display: flex; flex-direction: column; gap: 2px; text-align: left; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--borde);
  background: var(--superficie); color: var(--texto); font: inherit; }
button.sit-kpi { cursor: pointer; }
button.sit-kpi:hover { border-color: var(--primario); box-shadow: 0 0 0 3px var(--verde-suave); }
.sit-kpi .sit-tit { display: flex; justify-content: space-between; gap: 6px; font-size: 12px; color: var(--texto-2); }
.sit-kpi .sit-n { color: var(--tenue); font-variant-numeric: tabular-nums; }
.sit-kpi b { font-size: 17px; font-variant-numeric: tabular-nums; }
.sit-kpi .sit-sub { font-size: 11.5px; color: var(--texto-critico); }
.sit-kpi.cero b { color: var(--tenue); }
.sit-kpi.total { background: var(--superficie-2); border-color: transparent; }
.sit-kpi.total b { color: var(--primario); }
.sit-kpi.total.critico:not(.cero) b { color: var(--texto-critico); }
.sit-kpi.negativo b { color: var(--texto-critico); }
.sit-uso { position: relative; height: 22px; border-radius: 11px; background: var(--superficie-2); overflow: hidden; }
.sit-uso span { position: absolute; inset: 0 auto 0 0; background: var(--bien, #1f8a4c); opacity: .35; }
.sit-uso span.alto { background: #e0a100; }
.sit-uso span.lleno { background: var(--critico); }
.sit-uso small { position: relative; display: block; text-align: center; line-height: 22px; font-size: 12px; font-weight: 600; }
.sit-cyc { margin: 0; }
.dialogo-sit { width: min(1100px, calc(100vw - 32px)); }
.dialogo-sit .dialogo-cuerpo { display: flex; flex-direction: column; max-height: calc(100vh - 48px); }
.sit-tabla { flex: 1; min-height: 0; overflow: auto; padding: 8px 22px; }
.sit-tabla tr.vencida td:nth-child(4) { color: var(--texto-critico); font-weight: 600; }
.sit-tabla tfoot td { border-top: 2px solid var(--borde); }
.sit-kpi { min-width: 0; }
.sit-kpi b { overflow-wrap: anywhere; line-height: 1.2; }
.dialogo-falta { width: min(520px, calc(100vw - 32px)); }
.falta-cuerpo { padding: 18px 22px; }
.falta-cuerpo p { margin: 0 0 8px; }

/* ---------------------------------------------------------------- Oferta: totales en «ticket» (columna izquierda) */
.of-lado { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--borde); background: var(--superficie); overflow: auto; }
.of-lado .of-nav { border-right: 0; flex: none; }
.of-ticket { margin: auto 12px 14px; padding: 14px 14px 12px; position: relative; border-radius: 4px 4px 12px 12px;
  background: var(--superficie-2); border: 1px solid var(--borde); box-shadow: 0 1px 0 rgba(0,0,0,.02); }
/* borde perforado de recibo, arriba */
.of-ticket::before { content: ""; position: absolute; left: -1px; right: -1px; top: -6px; height: 7px;
  background: radial-gradient(circle at 5px 0, transparent 4px, var(--superficie-2) 4.5px) 0 0 / 10px 7px repeat-x; }
.of-ticket .of-resumen { display: flex; flex-direction: column; gap: 4px; align-items: stretch; }
.of-t-cab { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 6px; }
.of-t-cab span { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--texto-2); }
.of-t-cab small { font-size: 11px; color: var(--tenue); }
.of-t-fila { display: flex; align-items: baseline; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.of-t-fila span { white-space: nowrap; }
.of-t-fila::after { content: ""; order: 1; flex: 1; border-bottom: 1px dotted var(--borde-fuerte); transform: translateY(-3px); }
.of-t-fila b { order: 2; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.of-t-fila.of-base b { font-weight: 700; }
.of-t-total { display: flex; justify-content: space-between; align-items: baseline; margin-top: 6px; padding-top: 9px; border-top: 1.5px dashed var(--borde-fuerte); }
.of-t-total span { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--texto-2); }
.of-t-total b { font-size: 22px; line-height: 1.1; color: var(--primario); font-variant-numeric: tabular-nums; }
.of-t-margen { margin-top: 8px; padding: 8px 10px; border-radius: 10px; background: var(--superficie); border: 1px solid var(--borde); }
.of-t-margen > div { display: flex; justify-content: space-between; align-items: baseline; font-size: 12px; color: var(--texto-2); }
.of-t-margen b { font-size: 14px; font-variant-numeric: tabular-nums; }
.of-t-margen .ok { color: var(--texto-bien); } .of-t-margen .aviso { color: var(--texto-aviso); } .of-t-margen .ko { color: var(--texto-critico); }
.of-t-margen i { display: block; position: relative; height: 5px; margin: 6px 0 4px; border-radius: 3px; background: var(--superficie-2); overflow: hidden; }
.of-t-margen i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--m); border-radius: 3px;
  background: linear-gradient(90deg, #f59e0b, #22c55e); transition: width .4s; }
.of-t-margen small { font-size: 11px; color: var(--tenue); font-variant-numeric: tabular-nums; }
@media (max-width: 1000px) {
  .of-lado { border-right: 0; border-bottom: 1px solid var(--borde); }
  .of-ticket { margin: 8px 12px 10px; }
  .of-ticket .of-resumen { flex-direction: row; flex-wrap: wrap; gap: 4px 14px; }
  .of-t-fila::after, .of-t-cab { display: none; }
  .of-t-total { border-top: 0; margin: 0; padding: 0; gap: 8px; }
  .of-t-margen { margin: 0; }
}
/* (anula el estilo del antiguo resumen del pie) */
.of-ticket .of-resumen span { display: inline; }
.of-ticket .of-resumen small { font-size: 11px; text-transform: none; letter-spacing: 0; font-weight: 400; }
.of-ticket .of-resumen .of-t-fila b { font-size: 12.5px; }
.of-ticket .of-resumen .of-t-cab span, .of-ticket .of-resumen .of-t-total span { display: inline; }
.of-ticket { position: sticky; bottom: 10px; z-index: 1; flex: none; }
.of-lado::after { content: ""; flex: none; height: 1px; }
@media (max-height: 1100px) {
  .of-lado .of-nav .fc-tab { padding-top: 6px; padding-bottom: 6px; }
  .of-lado .of-nav .fc-tab small { display: none; }
  .of-lado .of-nav .fc-tab-icono { width: 30px; height: 30px; }
}

/* ---------------------------------------------------------------- Oferta: pie de documento como la hoja impresa */
.of-cuerpo { display: flex; flex-direction: column; }
.of-cuerpo > .of-panel { flex: none; }
.of-pie-doc { margin: auto -22px -22px; position: sticky; bottom: -22px; z-index: 2; display: grid; grid-template-columns: minmax(220px, 320px) minmax(260px, 1fr) minmax(280px, 360px);
  gap: 18px; padding: 16px 22px 18px; background: var(--superficie); border-top: 1px solid var(--borde);
  box-shadow: 0 -8px 18px -12px rgba(15, 23, 42, .18); }
.of-pd-pago, .of-pd-totales, .of-pd-com { position: relative; padding: 10px 14px 10px 18px; border-radius: 4px; background: var(--superficie-2); }
/* el lomo de color de los recuadros impresos */
.of-pd-pago::before, .of-pd-totales::before, .of-pd-com::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 2px;
  background: linear-gradient(var(--primario), color-mix(in srgb, var(--primario) 35%, transparent)); }
.of-pd-pago { align-self: end; max-width: 420px; }
.of-pd-com { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.of-pd-com-campos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.of-pd-com-campos .campo > span { font-size: 11.5px; }
.of-pd-com-campos input { width: 100%; }
.of-pd-com textarea.of-caja-com { min-height: 58px; background: var(--superficie); }
.of-pd-etq { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--primario); }
.of-pd-valor { font-size: 14px; font-weight: 700; margin-top: 3px; }
.of-pd-sub { font-size: 12px; color: var(--texto-2); margin-top: 2px; }
.of-pie-doc .of-resumen { display: flex; flex-direction: column; gap: 0; align-items: stretch; }
.of-pie-doc .of-resumen span { display: inline; }
.of-pie-doc .of-t-fila { display: flex; justify-content: space-between; gap: 12px; padding: 3px 0; font-size: 12.5px; color: var(--texto-2);
  border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); }
.of-pie-doc .of-t-fila::after { content: none; }
.of-pie-doc .of-t-fila b { font-size: 12.5px; font-weight: 600; color: var(--texto); font-variant-numeric: tabular-nums; }
.of-pie-doc .of-t-fila.of-base b { font-weight: 800; }
.of-pie-doc .of-t-total { display: flex; align-items: baseline; gap: 8px; margin: 8px -14px -10px -18px; padding: 9px 14px 10px 18px; border: 0;
  border-radius: 0 0 4px 4px; background: color-mix(in srgb, var(--primario) 12%, var(--superficie)); }
.of-pie-doc .of-t-total span { flex: 1; font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--primario); }
.of-pie-doc .of-t-total b { font-size: 21px; line-height: 1; color: var(--primario); font-variant-numeric: tabular-nums; }
.of-pie-doc .of-t-total small { font-size: 10px; font-weight: 600; color: var(--tenue); text-transform: none; letter-spacing: 0; }
.of-pd-pago .of-t-margen { margin-top: 10px; padding: 7px 10px; border-radius: 8px; background: var(--superficie); border: 1px dashed var(--borde-fuerte); }
.of-pd-pago .of-t-margen em { font-style: normal; font-size: 10px; color: var(--tenue); margin-left: 4px; text-transform: uppercase; letter-spacing: .05em; }
.of-pd-pago .of-t-margen small { text-transform: none; font-weight: 400; letter-spacing: 0; }
@media (max-width: 1000px) {
  .of-pie-doc { grid-template-columns: 1fr; gap: 10px; }
  .of-pd-pago { max-width: none; }
}
.ue-ico { display: inline-flex; vertical-align: -3px; }
.ue-ico svg { width: 15px; height: 15px; }

/* ---------------------------------------------------------------- Parámetros de la aplicación */
.pa { display: flex; flex-direction: column; gap: 10px; }
.pa-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; }
.pa-buscar { flex: 1 1 260px; }
.pa-barra select { padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; }
.pa-chk { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; cursor: pointer; }
.pa-chk small { color: var(--tenue); font-weight: 400; }
.pa-marco { max-height: calc(100vh / var(--zoom, 1) - 290px); }
.pa-tabla td { white-space: normal; max-width: none; vertical-align: middle; }
.pa-tabla tbody tr { cursor: default; }
.pa-cod { font: 600 12.5px ui-monospace, Consolas, monospace; }
.pa-apli { display: block; font-size: 10.5px; color: var(--tenue); }
.pa-desc { min-width: 220px; }
.pa-marcas { display: inline-flex; gap: 4px; margin-left: 6px; flex-wrap: wrap; }
.pa-m { font-size: 10.5px; padding: 1px 7px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); white-space: nowrap; }
.pa-m.oblig { background: var(--aviso-fondo, #fff4d6); }
.pa-m.ecinsa { background: var(--info-fondo); color: var(--info); }
.pa-m.ofe { background: var(--verde-suave); color: var(--primario); }
.pa-mod { font-size: 12.5px; color: var(--texto-2); white-space: nowrap; }
.pa-val { white-space: nowrap; }
.pa-val input { width: calc(var(--l) * 1ch + 26px); min-width: 48px; max-width: 360px; padding: 6px 9px; border: 1px solid var(--borde-fuerte); border-radius: 8px;
  font: 600 13px ui-monospace, Consolas, monospace; background: var(--superficie); color: var(--texto); }
.pa-val input[readonly] { background: var(--superficie-2); color: var(--texto-2); cursor: not-allowed; }
.pa-val input:focus { outline: none; border-color: var(--primario); box-shadow: 0 0 0 3px var(--verde-suave); }
.pa-val small { display: block; font-size: 10.5px; color: var(--tenue); margin-top: 2px; }
.pa-acc { white-space: nowrap; }
.pa-acc svg { width: 15px; height: 15px; }
.pa-tabla tr.abierto td { border-bottom-color: transparent; background: var(--verde-fila); }
.pa-obs td { background: var(--verde-fila); }
.pa-texto { margin: 0; padding: 10px 14px; border-radius: 8px; background: var(--superficie); border: 1px solid var(--borde);
  font: 12.5px/1.5 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.pa-n { font-size: 12px; color: var(--tenue); margin: 0; }
.pa-tabla { width: 100%; }
.pa-fuentes { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--texto-2); padding: 6px 10px; border-radius: 10px; background: var(--superficie-2); }
.pa-fuentes > span:first-child svg { width: 15px; height: 15px; display: block; }
.pa-fuentes button { margin-left: auto; }
.pa-cuerpo { display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr); gap: 12px; align-items: start; }
.pa-progs { position: sticky; top: 0; max-height: calc(100vh / var(--zoom, 1) - 320px); overflow: auto; padding: 12px; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--superficie); }
.pa-progs header { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.pa-progs header b { font-size: 13.5px; }
.pa-progs header small { font-size: 11.5px; color: var(--tenue); }
.pa-lprog { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.pa-lprog li { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1px 8px; padding: 6px 4px; border-bottom: 1px solid var(--borde); }
.pa-lprog code { font: 600 12px ui-monospace, Consolas, monospace; grid-row: span 2; }
.pa-lprog span { font-size: 12.5px; }
.pa-lprog small { font-size: 10.5px; color: var(--tenue); }
.pa-tabla tbody tr[data-pa] { cursor: pointer; }
.pa-tabla tbody tr.sel td { background: var(--verde-fila); }
.pa-nprog { font-variant-numeric: tabular-nums; }
@media (max-width: 900px) { .pa-cuerpo { grid-template-columns: 1fr; } .pa-progs { position: static; max-height: 260px; } }
/* los programas, a la derecha de la tabla */
.pa-cuerpo { grid-template-columns: minmax(0, 1fr) minmax(240px, 340px); }
.pa-cuerpo .pa-progs { order: 2; }
@media (max-width: 900px) { .pa-cuerpo { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------------- Móvil: nada ensancha la página, todo se desplaza con ella */
@media (max-width: 1100px) {
  .documentos, .documentos.sin-previa { grid-template-columns: minmax(0, 1fr); }
  .panel-lista, .panel-detalle, .kpis > *, .analisis > *, .documentos > * { min-width: 0; }
}
@media (max-width: 760px) {
  body { overflow-x: clip; }
  .contenido, .cabecera { max-width: 100vw; box-sizing: border-box; }
  .lista-tabs { flex-wrap: nowrap; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
  .lista-tabs::-webkit-scrollbar { display: none; }
  .lista-tabs .lista-tab { flex: none; }
  .lista-herramientas { flex-wrap: wrap; }
  .lista-herramientas .buscador { flex: 1 1 100%; order: -1; }
  .lista-herramientas .btn { flex: 1 1 auto; justify-content: center; }
  .lista-subbarra { flex-wrap: wrap; gap: 8px; }
  .chips-estado { flex-wrap: nowrap; overflow-x: auto; max-width: 100%; scrollbar-width: none; }
  .chips-estado .chip { flex: none; }
  .paginacion { width: 100%; justify-content: space-between; }
  /* la lista y la vista previa se leen con el desplazamiento de la página (sin un scroll dentro de otro) */
  .panel-lista { min-height: 0; }
  .panel-lista > .tabla-scroll, .panel-lista .tabla-scroll:not(.sub-bloque .tabla-scroll), .documentos.sin-previa .tabla-scroll { max-height: none; overflow-y: visible; overflow-x: auto; }
  .panel-detalle { max-height: none; overflow: visible; }
  .detalle-fija { position: static; }
  .tabla-scroll { -webkit-overflow-scrolling: touch; }
  .rango, .fechas, .presets { flex-wrap: wrap; }
  dialog.dialogo { width: calc(100vw - 16px) !important; max-width: calc(100vw - 16px) !important; }
}
@media (max-width: 760px) {
  .detalle-cab { flex-wrap: wrap; }
  .det-botones { flex-wrap: wrap; justify-content: flex-start; max-width: 100%; }
  .det-botones .btn { flex: 0 1 auto; }
  .det-saltos { flex-wrap: wrap; }
  .detalle-titulo { flex-wrap: wrap; }
}
@media (max-width: 760px) {
  /* la cabecera se va con la página (fija ocupaba un tercio de la pantalla) */
  .cabecera { position: static; }
  #desde, #hasta { min-width: 132px; flex: 1 1 132px; }
}

/* ---------------------------------------------------------------- Fichas de actualización: cajas más bajas (caben más líneas) */
.campo-ficha { gap: 3px; }
.campo-ficha > span, .campo-ficha .etq { font-size: 12px; }
.campo-ficha input, .campo-ficha select { height: 34px; padding: 0 10px; font-size: 14px; border-radius: 8px; }
.combo-ficha .combo-caja { height: 34px; border-radius: 8px; }
.fc-rejilla { row-gap: 10px; }
.of-campos { gap: 10px 14px; }
/* líneas de la oferta */
.of-tabla td { padding: 3px 6px; }
.of-tabla td input { padding: 4px 8px; border-radius: 7px; }
.of-tabla .combo-caja { height: 32px; padding-top: 0; padding-bottom: 0; border-radius: 7px; }
.of-tabla td .icono svg, .of-tabla td button .icono { width: 15px; height: 15px; }
/* flechita: solo las líneas */
.of-solo-btn { flex: none; }
.of-solo-btn[aria-pressed="true"] { background: var(--primario); color: var(--sobre-primario); border-color: var(--primario); }
.dialogo-oferta.of-solo-lineas .of-fija, .dialogo-oferta.of-solo-lineas .of-nav, .dialogo-oferta.of-solo-lineas .of-pie-doc { display: none !important; }
.dialogo-oferta.of-solo-lineas .of-contenido { grid-template-columns: minmax(0, 1fr); }

/* ---------------------------------------------------------------- Ventanas maximizadas (botón junto a la X o doble clic en la cabecera) */
dialog.dialogo.maximizada { width: calc(100vw / var(--zoom, 1)) !important; height: calc(100vh / var(--zoom, 1)) !important;
  max-width: none !important; max-height: none !important; min-width: 0 !important; margin: 0; border-radius: 0 !important; resize: none; }
dialog.dialogo.maximizada > .dialogo-cuerpo { height: 100%; max-height: none !important; display: flex; flex-direction: column; }
dialog.dialogo.maximizada :is(.co-cuerpo, .vf-cuerpo, .sit-tabla, .vf-xml, .ut-cuerpo, .aux-contenido, .fc-contenido, .la-scroll, .perm-cuerpo) { flex: 1 1 auto; min-height: 0; }
dialog.dialogo.maximizada .pa-marco { max-height: calc(100vh / var(--zoom, 1) - 250px); }
dialog.dialogo.maximizada .pa-progs { max-height: calc(100vh / var(--zoom, 1) - 250px); }
.btn-max-dlg { flex: none; }

/* ---------------------------------------------------------------- Parámetros: la misma letra que el resto de la aplicación */
.pa-cod, .pa-val input, .pa-texto, .pa-lprog code { font-family: inherit; }
.pa-cod { font-weight: 700; font-size: 13px; letter-spacing: .01em; }
.pa-val input { font-weight: 600; font-size: 13.5px; }
.pa-texto { font-size: 13px; line-height: 1.55; }
.pa-lprog code { font-weight: 700; font-size: 12.5px; }
.dialogo-utilidades.con-vista .ut-cuerpo > * { flex: 1 1 auto; min-width: 0; }
/* parámetros: a la derecha, dos cajas (programas y explicación) */
.pa-lado { position: sticky; top: 0; display: flex; flex-direction: column; gap: 10px; order: 2; min-width: 0; }
.pa-cuerpo .pa-lado { order: 2; }
.pa-caja { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); overflow: auto; }
.pa-caja > h4 { margin: 0 0 6px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--primario); }
.pa-caja header { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; }
.pa-caja header b { font-size: 13px; }
.pa-caja header small { font-size: 11.5px; color: var(--tenue); }
.pa-lado .pa-progs { position: static; max-height: calc((100vh / var(--zoom, 1) - 330px) * .55); }
.pa-lado .pa-coment { max-height: calc((100vh / var(--zoom, 1) - 330px) * .45); }
dialog.dialogo.maximizada .pa-lado .pa-progs { max-height: calc((100vh / var(--zoom, 1) - 260px) * .55); }
dialog.dialogo.maximizada .pa-lado .pa-coment { max-height: calc((100vh / var(--zoom, 1) - 260px) * .45); }
.pa-coment .pa-texto { border: 0; padding: 0; background: none; }
@media (max-width: 900px) { .pa-lado { position: static; } }
.pa-lado .pa-progs { order: 0; } .pa-lado .pa-coment { order: 1; }
.pa-val input.pa-hallado { background: #FFE58A; color: #1d2521; border-color: #e0b400; }
.pa-barra select[data-pa-donde] { padding: 8px 10px; border: 1px solid var(--borde-fuerte); border-radius: 10px; background: var(--superficie); color: var(--texto); font: inherit; }
.pa-en-expl { font-size: 10.5px; font-weight: 600; padding: 1px 6px !important; margin-left: 4px; white-space: nowrap; }
.pa-busca { position: relative; flex: 1 1 320px; min-width: 0; }
.pa-busca .pa-buscar { width: 100%; }
.pa-donde-btn { flex: none; border: 0; background: var(--superficie-2); color: var(--texto-2); font: inherit; font-size: 12px; font-weight: 600;
  padding: 4px 9px; border-radius: 999px; cursor: pointer; white-space: nowrap; max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.pa-donde-btn:hover, .pa-donde-btn[aria-expanded="true"] { background: var(--verde-suave); color: var(--primario); }
.pa-donde { position: absolute; z-index: 20; top: calc(100% + 6px); right: 0; min-width: 250px; padding: 10px 12px; border-radius: 12px;
  background: var(--superficie); border: 1px solid var(--borde); box-shadow: var(--sombra-dialogo, 0 10px 30px rgba(0,0,0,.15)); display: flex; flex-direction: column; gap: 6px; }
.pa-donde[hidden] { display: none; }
.pa-donde p { margin: 0 0 2px; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--tenue); }
.pa-donde label { display: flex; align-items: center; gap: 8px; font-size: 13.5px; cursor: pointer; }
.pa-donde-pie { display: flex; gap: 6px; margin-top: 4px; padding-top: 8px; border-top: 1px solid var(--borde); }

/* ---------------------------------------------------------------- VeriFactu en la lista de facturas */
.tabla td.doc .vf-doc { border-radius: 5px; padding: 1px 7px; border: 1px solid transparent; }
.tabla td.doc .vf-doc.ok { background: var(--bien-fondo); border-color: color-mix(in srgb, var(--texto-bien) 35%, transparent); }
.tabla td.doc .vf-doc.ko { background: var(--critico-fondo); border-color: color-mix(in srgb, var(--texto-critico) 45%, transparent); color: var(--texto-critico); cursor: help; }
.vf-tip { position: absolute; z-index: 1000; max-width: 360px; padding: 10px 12px; border-radius: 10px; background: var(--superficie);
  border: 1px solid color-mix(in srgb, var(--texto-critico) 40%, var(--borde)); box-shadow: 0 8px 24px rgba(15, 23, 42, .18); font-size: 13px; }
.vf-tip b { color: var(--texto-critico); font-size: 12px; text-transform: uppercase; letter-spacing: .05em; }
.vf-tip p { margin: 4px 0 8px; color: var(--texto); line-height: 1.4; }

/* ---------------------------------------------------------------- Tabla estándar */
.te { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.te .te-barra { flex-wrap: wrap; }
.te .te-sub { margin: 0; }
.te .te-scroll { max-height: calc(100vh / var(--zoom, 1) - 340px); min-height: 120px; }
dialog.dialogo.maximizada .te .te-scroll { max-height: calc(100vh / var(--zoom, 1) - 240px); }
.te-tabla tbody tr { cursor: default; }
.te-cols-pop .fp-lista { max-height: 340px; }
.pa-marco { min-width: 0; }
.pa-marco .te-scroll { max-height: calc(100vh / var(--zoom, 1) - 360px); }
dialog.dialogo.maximizada .pa-marco .te-scroll { max-height: calc(100vh / var(--zoom, 1) - 270px); }
.pa-marco .te-tabla tbody tr { cursor: pointer; }
.pa-marco .te-tabla tbody tr.sel td { background: var(--verde-fila); }
.pa-marco .te-tabla td { white-space: normal; max-width: none; vertical-align: middle; }
.sit-tabla { flex: 1 1 auto; min-height: 0; padding: 10px 22px; display: flex; flex-direction: column; } .sit-tabla .te-tabla tbody tr { cursor: pointer; }

/* oferta: parámetros del ERP aplicados a las líneas (avisos, «Ob», tipo bloqueado, ir a línea) */
.of-c-desc { position: relative; }
.of-avisos, .of-ob { position: absolute; top: 50%; transform: translateY(-50%); height: 20px; min-width: 20px; padding: 0 5px; border-radius: 10px;
  border: 0; font: 700 11px/20px inherit; cursor: pointer; }
.of-avisos { right: 4px; }
.of-ob { right: 28px; background: transparent; color: var(--critico); font-weight: 800; text-decoration: underline; }
.of-avisos[hidden], .of-ob[hidden] { display: none; }
.of-avisos.ko { background: var(--critico); color: #fff; }
.of-avisos.aviso { background: var(--aviso, #e8a33d); color: #1c1300; }
.of-avisos.info { background: var(--info-fondo); color: var(--primario); }
.of-c-desc:has(.of-avisos:not([hidden])) input { padding-right: 30px; }
.of-c-desc:has(.of-ob:not([hidden])) input { padding-right: 56px; }
.of-c-desc:has(.of-avisos:not([hidden])) .of-cond { right: 54px; }
.of-pop { position: fixed; z-index: 90; width: min(420px, calc(100vw - 32px)); background: var(--superficie); color: var(--texto); border: 1px solid var(--borde);
  border-radius: 12px; box-shadow: 0 14px 34px rgba(11, 27, 43, .22); font-size: 13px; }
.of-pop-cab { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 6px 14px; border-bottom: 1px solid var(--borde); }
.of-pop-cuerpo { padding: 10px 14px 12px; max-height: 320px; overflow: auto; }
.of-av-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.of-av-lista li { padding: 6px 10px; border-radius: 8px; border-left: 3px solid var(--borde); background: var(--superficie-2); }
.of-av-lista li.ko { border-left-color: var(--critico); }
.of-av-lista li.aviso { border-left-color: var(--aviso, #e8a33d); }
.of-av-lista li.info { border-left-color: var(--primario); }
.of-av-docs { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.of-av-docs li { display: flex; align-items: center; gap: 4px; padding: 0 !important; background: none !important; border: 0 !important; }
.of-ob-texto { margin: 0; white-space: normal; line-height: 1.45; }
.of-bloqueada td { background: var(--superficie-2); }
.of-bloqueada input { color: var(--tenue); }
.of-situada td { animation: of-situada 1.6s ease-out; }
@keyframes of-situada { 0%, 40% { background: var(--info-fondo); } 100% { background: transparent; } }
.of-ir { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--texto-2); }
.of-ir[hidden] { display: none; }
.of-ir input { width: 56px; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; background: var(--superficie); color: var(--texto); text-align: right; }
.of-notas-param { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 6px 18px 8px; font-size: 12.5px; color: var(--texto-2);
  border-top: 1px dashed var(--borde); }
.of-notas-param[hidden] { display: none; }
.of-notas-param .ko { color: var(--texto-critico); font-weight: 700; }
.of-param-cuerpo { padding: 14px 22px; overflow: auto; }
.of-param-tabla td { vertical-align: top; font-size: 13px; white-space: normal; overflow: visible; text-overflow: clip; max-width: none; }
.of-param-tabla code { font-weight: 700; }
.of-c-desc:has(.of-ob:not([hidden])) .of-cond { right: 62px; }

/* historial de cambios */
.dialogo-historial { width: min(980px, calc(100vw - 32px)); }
.hc { padding: 12px 22px 18px; overflow: auto; min-height: 240px; max-height: calc(100vh / var(--zoom, 1) - 190px); }
.hc-resumen { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.hc-chip-erp { background: var(--aviso-fondo, #fff3df) !important; color: var(--texto-aviso) !important; }
.hc-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; }
.hc-buscar { flex: 1 1 240px; }
.hc-dia { margin: 16px 0 6px; font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--tenue); }
.hc-lista { position: relative; }
.hc-apunte { display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 10px; position: relative; padding-bottom: 12px; }
.hc-apunte::before { content: ''; position: absolute; left: 16px; top: 34px; bottom: 0; width: 2px; background: var(--borde); }
.hc-punto { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: var(--info-fondo); color: var(--primario); z-index: 1; }
.hc-punto .icono { width: 16px; height: 16px; }
.hc-apunte.alta .hc-punto { background: var(--verde-suave, #e3f5ea); color: var(--texto-bien); }
.hc-apunte.baja .hc-punto { background: var(--critico-fondo, #fde7e7); color: var(--texto-critico); }
.hc-apunte.erp .hc-punto { background: var(--aviso-fondo, #fff3df); color: var(--texto-aviso); }
.hc-cuerpo { border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); padding: 10px 14px; min-width: 0; }
.hc-apunte.erp .hc-cuerpo { border-color: color-mix(in srgb, var(--aviso, #e8a33d) 55%, var(--borde)); }
.hc-cab { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font-size: 13.5px; }
.hc-cuando { color: var(--tenue); font-size: 12.5px; white-space: nowrap; }
.hc-erp { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--superficie-2); color: var(--texto-2); font-weight: 600; }
.hc-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; font-size: 12px; color: var(--texto-2); align-items: center; }
.hc-nota { font-weight: 700; color: var(--primario); }
.hc-campos { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.hc-campos th { text-align: left; font-weight: 600; padding: 4px 10px 4px 0; width: 32%; vertical-align: top; color: var(--texto-2); }
.hc-campos th code, .hc-campos th small { font-size: 10.5px; color: var(--tenue); font-weight: 500; }
.hc-campos td { padding: 3px 6px; vertical-align: top; word-break: break-word; }
.hc-antes { color: var(--texto-critico); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--critico) 50%, transparent); }
.hc-despues { color: var(--texto-bien); font-weight: 600; }
.hc-campos mark { background: var(--aviso-fondo, #fff3df); color: inherit; padding: 0 1px; border-radius: 3px; }
.hc-flecha { color: var(--tenue); width: 18px; text-align: center; }
.hc-vacio { color: var(--tenue); font-style: italic; font-weight: 400; text-decoration: none; }
.hc-acciones { display: flex; justify-content: flex-end; margin-top: 8px; }
.hc-vacio-caja { text-align: center; padding: 34px 10px; color: var(--texto-2); }
.hc-vacio-caja > .icono { width: 34px; height: 34px; color: var(--primario); }
.hcg { display: flex; flex-direction: column; gap: 12px; }
.hcg-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.hcg-filtros .campo-ficha { flex: 0 0 160px; }
.hcg-q { flex: 1 1 220px; }
.hcg-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 10px; }
.hcg-kpi { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; background: var(--superficie); display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hcg-kpi span { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); font-weight: 700; }
.hcg-kpi b { font-size: 24px; color: var(--primario); }
.hcg-kpi small { color: var(--texto-2); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hc-pill { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 999px; background: var(--info-fondo); color: var(--primario); white-space: nowrap; }
.hc-pill.alta { background: var(--verde-suave, #e3f5ea); color: var(--texto-bien); }
.hc-pill.baja { background: var(--critico-fondo, #fde7e7); color: var(--texto-critico); }
.hc-pill.erp { background: var(--aviso-fondo, #fff3df); color: var(--texto-aviso); }
.hc-antes-c { color: var(--texto-critico); }
.hc-despues-c { color: var(--texto-bien); font-weight: 600; }
@media (max-width: 760px) { .hc-campos th { width: auto; display: block; padding-bottom: 0; } .hc-campos tr { display: block; padding: 4px 0; } .hc-campos td { display: inline; } }

/* conector (API) */
.cn h3 { display: flex; align-items: center; gap: 8px; }
.cn-nueva { margin-left: auto; }
.cn-tabla td { vertical-align: top; font-size: 13px; }
.cn-acc { white-space: nowrap; text-align: right; }
.cn-prefijo { font-size: 11px; color: var(--tenue); }
.cn-guia, .cn-consola { margin-top: 14px; border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; background: var(--superficie); }
.cn-guia summary, .cn-consola summary { cursor: pointer; font-weight: 700; }
.cn-guia-cuerpo h5 { margin: 14px 0 4px; font-size: 13px; }
.cn-codigo { background: var(--superficie-2); border: 1px solid var(--borde); border-radius: 8px; padding: 8px 12px; font-size: 12px; overflow: auto;
  white-space: pre-wrap; word-break: break-all; margin: 0; }
.cn-clave { font-size: 15px; font-weight: 700; color: var(--primario); user-select: all; }
.cn-entidades { display: flex; flex-wrap: wrap; gap: 4px; }
.cn-fila { display: flex; gap: 8px; align-items: center; }
.cn-q { flex: 1; }
.cn-q input { font-family: ui-monospace, Consolas, monospace; font-size: 12.5px; }
.cn-ejemplos { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.cn-resultado { max-height: 420px; overflow: auto; background: #0f1b2a; color: #d8e6f5; border-radius: 10px; padding: 10px 14px; font-size: 12px; margin: 0; }
.cn-form { padding: 14px 22px; overflow: auto; }
.cn-form h4 { margin: 14px 0 6px; font-size: 13px; } .cn-form h4 small { font-weight: 500; color: var(--tenue); }
.cn-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px 14px; align-items: end; margin-bottom: 8px; }
.cn-checks { display: flex; flex-wrap: wrap; gap: 4px 16px; }
.cn-entidades-sel { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.cn-entidades-sel fieldset { border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; display: flex; flex-direction: column; gap: 2px; }
.cn-entidades-sel legend { font-size: 11.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--tenue); font-weight: 700; }
.cn-escribible { font-weight: 700; }
.dialogo-cn { width: min(960px, calc(100vw - 32px)); }
.cn-acc { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; text-align: left; }
.cn-acc button { font-size: 11.5px; padding: 2px 8px; border: 1px solid var(--borde); border-radius: 6px; background: var(--superficie); color: var(--texto-2); cursor: pointer; }
.cn-acc button:hover { border-color: var(--primario); color: var(--primario); }
.cn-acc button.peligro:hover { border-color: var(--critico); color: var(--texto-critico); }
/* oferta: la línea vacía de abajo para seguir escribiendo */
.of-linea-nueva td { background: color-mix(in srgb, var(--info-fondo) 45%, transparent); }
.of-linea-nueva .of-c-n { color: var(--primario); font-weight: 700; }
.of-linea-nueva [data-quitar], .of-linea-nueva [data-obs] { visibility: hidden; }

/* ventanas propias (en lugar de las del navegador) */
.dialogo-propio { width: min(520px, calc(100vw - 32px)); }
.dp-cuerpo { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding: 18px 22px 8px; align-items: start; }
.dp-icono { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--info-fondo); color: var(--primario); }
.dp-icono .icono { width: 20px; height: 20px; }
.dp-ko .dp-icono { background: var(--critico-fondo, #fde7e7); color: var(--texto-critico); }
.dp-peligro .dp-icono, .dp-aviso .dp-icono { background: var(--aviso-fondo, #fff3df); color: var(--texto-aviso); }
.dp-texto { font-size: 14px; line-height: 1.5; color: var(--texto); min-width: 0; overflow-wrap: anywhere; max-height: 60vh; overflow: auto; }
.dp-texto p { margin: 0 0 10px; } .dp-texto ul { margin: 0 0 10px; padding-left: 18px; }
.dp-input { width: 100%; padding: 8px 10px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; background: var(--superficie); color: var(--texto); }
.btn-peligro { background: var(--critico); border-color: var(--critico); color: #fff; }
.btn-peligro:hover { filter: brightness(1.08); }
.dialogo-visor { width: min(1100px, calc(100vw - 32px)); height: min(900px, calc(100vh / var(--zoom, 1) - 32px)); }
.dialogo-visor .dialogo-cuerpo { height: 100%; display: flex; flex-direction: column; }
.visor-marco { flex: 1; min-height: 0; background: var(--superficie-2); }
.visor-marco iframe { width: 100%; height: 100%; border: 0; display: block; background: #fff; }
.globo-app { position: fixed; z-index: 2000; max-width: 360px; padding: 6px 10px; border-radius: 8px; background: #16263a; color: #eef4fb; font-size: 12.5px;
  line-height: 1.4; white-space: pre-line; pointer-events: none; box-shadow: 0 8px 22px rgba(11, 27, 43, .28); animation: globo-in .12s ease-out; }
@keyframes globo-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
.calendario-app { position: fixed; z-index: 1500; width: 252px; padding: 10px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie);
  color: var(--texto); box-shadow: 0 14px 34px rgba(11, 27, 43, .22); font-size: 13px; }
.cal-cab { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cal-cab b { text-transform: capitalize; }
.cal-sem, .cal-dias { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; text-align: center; }
.cal-sem span { font-size: 11px; color: var(--tenue); font-weight: 700; padding: 2px 0; }
.cal-dia { border: 0; background: none; border-radius: 8px; padding: 6px 0; font: inherit; color: var(--texto); cursor: pointer; }
.cal-dia:hover { background: var(--superficie-2); }
.cal-dia.fuera { color: var(--tenue); opacity: .6; }
.cal-dia.hoy { box-shadow: inset 0 0 0 1px var(--primario); }
.cal-dia.sel { background: var(--primario); color: var(--sobre-primario, #fff); font-weight: 700; }
.cal-pie { display: flex; justify-content: space-between; margin-top: 6px; }
.cal-pie button { border: 0; background: none; color: var(--primario); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 6px; }
.dialogo-visor a.btn { text-decoration: none; } .dialogo-visor .fc-pie[hidden] { display: none; }
.hc-ref { display: inline-flex; align-items: center; gap: 2px; flex-wrap: wrap; }
.hc-subclave { color: var(--tenue); font-weight: 500; margin-left: 4px; }
/* historial por grabaciones y comparación */
.hc-inst-marco { border: 1px solid var(--borde); border-radius: 12px; max-height: none; }
.hc-inst td { vertical-align: top; font-size: 13px; }
.hc-inst small { color: var(--tenue); }
.hc-fila-inst { cursor: pointer; }
.hc-fila-inst:hover td { background: var(--superficie-2); }
.hc-fila-inst.abierta td { background: var(--info-fondo); }
.hc-fila-inst.erp td:first-child { box-shadow: inset 3px 0 0 var(--aviso, #e8a33d); }
.hc-c-chk { width: 28px; } .hc-c-flecha { width: 24px; color: var(--tenue); } .hc-c-flecha svg { width: 14px; height: 14px; }
.hc-nw { white-space: nowrap; }
.hc-que { min-width: 220px; }
.hc-detalle-inst > td { padding: 10px 12px 4px 40px !important; background: var(--superficie-2); }
.hc-nota-comp { margin-top: 6px; }
.hc-vs { font-weight: 500; color: var(--tenue); font-size: .7em; margin: 0 6px; }
.hc-comp { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; margin-bottom: 10px; background: var(--superficie); }
.hc-comp.alta { border-left: 3px solid var(--texto-bien); } .hc-comp.baja { border-left: 3px solid var(--texto-critico); }
.hc-comp header small { color: var(--tenue); margin-left: 6px; }
.hc-campos-comp thead th { font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .4px; padding: 6px 6px 4px 0; }
.dialogo-hc-comp { width: min(1100px, calc(100vw - 32px)); }
.hc-inst td { white-space: normal; overflow: visible; text-overflow: clip; max-width: none; } .hc-inst .hc-nw { white-space: nowrap; }

/* aceptar oferta → pedido */
.detalle-acepta { display: flex; align-items: center; gap: 12px; margin: 2px 0 8px; padding: 8px 12px; border: 1px dashed color-mix(in srgb, var(--primario) 45%, var(--borde));
  border-radius: 10px; background: color-mix(in srgb, var(--info-fondo) 60%, transparent); font-size: 12.5px; color: var(--texto-2); }
.dialogo-acepta { width: min(1100px, calc(100vw - 32px)); }
.ac-cli { font-size: .6em; font-weight: 500; color: var(--tenue); margin-left: 8px; }
.ac-cuerpo { padding: 14px 22px; overflow: auto; }
.ac-pregunta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-bottom: 10px; }
.ac-pregunta b { font-size: 15px; } .ac-pregunta span:not(.hueco) { font-size: 12px; color: var(--tenue); }
.ac-pregunta .hueco { flex: 1; }
.ac-marco { border: 1px solid var(--borde); border-radius: 12px; max-height: calc(100vh / var(--zoom, 1) - 300px); }
.ac-tabla tbody tr { cursor: pointer; user-select: none; }
.ac-tabla tbody tr:hover td { background: var(--superficie-2); }
.ac-tabla tbody tr.sel td { background: var(--info-fondo); }
.ac-chk { width: 30px; }
.ac-cant { width: 80px; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 8px; text-align: right; font: inherit; background: var(--superficie); color: var(--texto); }
.ac-cant:disabled { opacity: .45; }
.ac-cant.con-error { border-color: var(--critico); }
.of-modo-pedido .of-cab { box-shadow: inset 0 -3px 0 var(--serie-actual, #e8a33d); }
.of-origen { display: inline-flex; align-items: center; gap: 2px; }
.ac-resumen { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 12px; margin-bottom: 14px; align-items: stretch; }
.ac-cli-tarjeta { margin: 0; }
.ac-datos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px 14px; margin: 0; padding: 10px 14px; border: 1px solid var(--borde);
  border-radius: 12px; background: var(--superficie-2); }
.ac-datos dt { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--tenue); font-weight: 700; }
.ac-datos dd { margin: 0; font-weight: 600; font-size: 13.5px; }
.ac-acepta-imp dd { color: var(--primario); font-size: 16px; font-weight: 800; }
.of-chip-acc { display: inline-flex; align-items: center; gap: 2px; }
@media (max-width: 760px) { .ac-resumen { grid-template-columns: 1fr; } .ac-datos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
/* buscadores con valor (cliente, artículo…): la lupa pasa a ser el saturnito */
.combo-ver .combo-sat { display: none; width: 18px; height: 18px; }
.combo-ver .combo-sat img { width: 100%; height: 100%; display: block; pointer-events: none; }
/* solo en los buscadores de código (cliente, artículo, proveedor): el nombre y el CIF no lo llevan */
:is(.combo[data-icono-combo="cliente"], .combo[data-icono-combo="articulos"], .combo[data-icono-combo="proveedor"]) .combo-ver.con-valor .combo-sat { display: inline-flex; }
:is(.combo[data-icono-combo="cliente"], .combo[data-icono-combo="articulos"], .combo[data-icono-combo="proveedor"]) .combo-ver.con-valor > .icono { display: none; }
:is(.combo[data-icono-combo="cliente"], .combo[data-icono-combo="articulos"], .combo[data-icono-combo="proveedor"]) .combo-ver.con-valor::after { display: none; }
:is(.combo[data-icono-combo="cliente"], .combo[data-icono-combo="articulos"], .combo[data-icono-combo="proveedor"]) .combo-ver.con-valor { margin-right: 2px; }
.combo-ver .combo-sat img.oscuro { display: none; }
:root[data-piel="ibm"] .combo-ver .combo-sat img.claro, :root[data-piel="amber"] .combo-ver .combo-sat img.claro,
:root[data-piel="medianoche"] .combo-ver .combo-sat img.claro, :root[data-piel="live-noche"] .combo-ver .combo-sat img.claro { display: none; }
:root[data-piel="ibm"] .combo-ver .combo-sat img.oscuro, :root[data-piel="amber"] .combo-ver .combo-sat img.oscuro,
:root[data-piel="medianoche"] .combo-ver .combo-sat img.oscuro, :root[data-piel="live-noche"] .combo-ver .combo-sat img.oscuro { display: block; }

/* servir pedidos → albarán */
.dialogo-servir, .dialogo-sv-pedidos { width: min(1200px, calc(100vw - 32px)); }
.sv-mas { display: flex; align-items: center; gap: 12px; margin: 0 0 12px; padding: 10px 14px; border-radius: 12px;
  background: color-mix(in srgb, var(--aviso-fondo, #fff3df) 70%, transparent); border: 1px solid color-mix(in srgb, var(--aviso, #e8a33d) 40%, var(--borde)); }
.sv-mas[hidden] { display: none; }
.sv-mas small { color: var(--texto-2); margin-left: 6px; }
.sv-mas .hueco, .sv-filtros .hueco { flex: 1; }
.sv-grupo td { background: var(--superficie-2) !important; font-size: 12.5px; padding-top: 8px; }
.sv-grupo td > span { color: var(--tenue); margin-left: 10px; }
.sv-grupo button { margin-left: 12px; }
.sv-corto { color: var(--texto-critico); font-weight: 700; }
.sv-filtros { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 8px; }
.sv-filtros .buscador { flex: 1 1 260px; }
.sv-filtros .campo-ficha { flex: 0 0 150px; }
.sv-pedidos .sv-cab { cursor: pointer; }
.sv-pedidos .sv-cab.sel td { background: var(--info-fondo); }
.sv-pedidos .sv-lin td { font-size: 12.5px; background: color-mix(in srgb, var(--superficie-2) 60%, transparent); }
.sv-pedidos .sv-lin.sel td { background: var(--info-fondo); }
.sv-bloq td { opacity: .6; }
.of-modo-albaran .of-cab { box-shadow: inset 0 -3px 0 var(--serie-anterior, #6c8ebf); }
.sv-tabla .te-scroll { max-height: calc(100vh / var(--zoom, 1) - 420px); }
.sv-tabla tbody tr.sv-cab { cursor: pointer; }
.sv-tabla tbody tr.sv-cab.sel td { background: var(--info-fondo); }
.sv-lin td { background: color-mix(in srgb, var(--superficie-2) 70%, transparent); padding: 4px 10px 4px 46px !important; cursor: pointer; }
.sv-lin.sel td { background: var(--info-fondo); }
.sv-lin-fila { display: grid; grid-template-columns: 20px 34px minmax(120px, 180px) minmax(0, 1fr) 90px 90px 100px; gap: 10px; align-items: center; font-size: 12.5px; }
.sv-lin-fila .n { text-align: right; }
.sv-parcial { color: var(--primario); margin-left: 6px; }

/* varios documentos marcados (como Outlook) */
#tabla tbody tr.multi td { background: color-mix(in srgb, var(--primario) 14%, var(--superficie)) !important; }
#tabla tbody tr.multi td:first-child { box-shadow: inset 3px 0 0 var(--primario); }
.multi-previa { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 28px 18px; gap: 6px; }
.multi-ilu svg { width: 170px; height: 140px; }
.multi-n { margin: 6px 0 0; font-size: 16px; }
.multi-sub { margin: 0; color: var(--texto-2); }
.multi-todo { border: 0; background: none; color: var(--texto); font: inherit; font-weight: 600; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.multi-todo:hover { background: var(--superficie-2); color: var(--primario); }
.multi-acciones { display: flex; flex-direction: column; align-items: stretch; gap: 2px; margin-top: 10px; min-width: 260px; }
.multi-acciones hr { border: 0; border-top: 1px solid var(--borde); margin: 6px 0; width: 100%; }
.multi-accion { display: flex; align-items: center; gap: 12px; text-align: left; border: 0; background: none; padding: 8px 12px; border-radius: 10px;
  cursor: pointer; color: var(--primario); font: inherit; }
.multi-accion:hover { background: var(--info-fondo); }
.multi-accion .icono { width: 20px; height: 20px; flex: none; }
.multi-accion b { display: block; font-size: 14.5px; }
.multi-accion small { display: block; color: var(--tenue); font-size: 12px; }
.multi-docs { display: flex; flex-wrap: wrap; gap: 4px; justify-content: center; margin-top: 14px; max-width: 520px; }
.multi-docs .fc-chip { display: inline-flex; align-items: center; }
.dialogo-ficha.dialogo-multi-correo, .dialogo-ficha.dialogo-multi-alb { width: min(1100px, calc(calc(100vw / var(--zoom, 1)) - 32px)); height: fit-content; max-height: min(900px, calc(calc(100vh / var(--zoom, 1)) - 48px)); }
.mc-para { width: 100%; min-width: 220px; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; background: var(--superficie); color: var(--texto); }
.ma-docs { display: flex; flex-wrap: wrap; gap: 4px; }
.ma-docs .fc-chip { display: inline-flex; align-items: center; }
.ma-fuera { font-size: 12px; color: var(--tenue); }
.ma-tabla td { vertical-align: middle; }

/* lista continua: huecos de las páginas aún no cargadas y barra de desplazamiento siempre visible */
#tabla tbody tr.hueco-pag td { padding: 0; vertical-align: top; color: var(--tenue); font-size: 12px;
  background: repeating-linear-gradient(to bottom, transparent 0, transparent calc(var(--alto-fila, 46px) - 1px), var(--borde) calc(var(--alto-fila, 46px) - 1px), var(--borde) var(--alto-fila, 46px)); }
#tabla tbody tr.hueco-pag td span { position: sticky; top: 40px; display: inline-block; padding: 12px 16px; }
@media (min-width: 761px) { .panel-lista > .tabla-scroll { overflow-y: scroll; }
@supports not selector(::-webkit-scrollbar) { .panel-lista > .tabla-scroll { scrollbar-width: auto; scrollbar-color: color-mix(in srgb, var(--texto-2) 55%, transparent) var(--superficie-2); } }
.panel-lista > .tabla-scroll::-webkit-scrollbar { width: 14px; height: 14px; }
.panel-lista > .tabla-scroll::-webkit-scrollbar-track { background: var(--superficie-2); }
.panel-lista > .tabla-scroll::-webkit-scrollbar-thumb { background: color-mix(in srgb, var(--texto-2) 55%, transparent); border-radius: 8px; border: 3px solid var(--superficie-2); min-height: 40px; }
.panel-lista > .tabla-scroll::-webkit-scrollbar-thumb:hover { background: var(--lista-1, var(--primario)); } }

/* facturas en VeriFactu: verde si la AEAT la aceptó, rojo si dio error; pedidos bloqueados en rojo */
#tabla tbody tr.vf-fila-ok td { color: var(--texto-bien); }
#tabla tbody tr.vf-fila-ok td:first-child { box-shadow: inset 3px 0 0 var(--texto-bien); }
#tabla tbody tr.vf-fila-ko td, #tabla tbody tr.fila-bloqueada td { color: var(--texto-critico); }
#tabla tbody tr.vf-fila-ko td:first-child, #tabla tbody tr.fila-bloqueada td:first-child { box-shadow: inset 3px 0 0 var(--texto-critico); }
#tabla tbody tr.fila-bloqueada:not(.sel):not(.multi) td { background: color-mix(in srgb, var(--critico-fondo) 55%, transparent); }
.detalle-acepta.bloqueado { border-color: color-mix(in srgb, var(--texto-critico) 45%, var(--borde)); background: color-mix(in srgb, var(--critico-fondo) 60%, transparent); }
.detalle-acepta.bloqueado span { color: var(--texto-critico); }

/* «¿Has olvidado la contraseña?» */
.login-olvido { text-align: center; margin: 12px 0 0; }
.login-olvido .enlace { font-size: 13.5px; }
.login-ok { margin: 0 0 12px; padding: 10px 12px; border-radius: 10px; font-size: 13.5px; line-height: 1.45;
  background: var(--bien-fondo); color: var(--texto-bien); }

/* lista: columnas omitidas porque al cliente le falta el campo; % cargado de la lista continua */
.avisos-campos { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 8px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: var(--aviso-fondo, #fff4d6); color: var(--texto-aviso, #7a5200); }
.avisos-campos .icono { width: 18px; height: 18px; flex: none; }
.pct-cargado { color: var(--tenue); }
/* la barra de desplazamiento horizontal de la lista, siempre a la vista abajo (aunque quepan las columnas) */
@media (min-width: 1101px) { .panel-lista > .tabla-scroll { overflow-x: scroll; } }

/* Cabecera que se compacta sola hasta caber en el ancho de la pantalla (ajustarCabecera en app.js), por pasos:
   1 = menos huecos y el email más corto · 2 = además, módulos solo con icono · 3 = además, sin el email */
.cabecera { min-width: 0; }
.cabecera .modulos { min-width: 0; }
.cabecera[data-compacta] { gap: 12px; }
.cabecera[data-compacta] .modulo { padding: 8px 10px; }
.cabecera[data-compacta] .cabecera-derecha .usuario { max-width: 110px; }
.cabecera[data-compacta] .gb { flex-basis: 190px; }
.cabecera[data-compacta] .gb:focus-within { flex-basis: 300px; }
.cabecera[data-compacta] .selector-empresa { max-width: 210px; min-width: 0; }
.cabecera[data-compacta] .selector-empresa select { min-width: 0; width: 100%; text-overflow: ellipsis; }
.cabecera[data-compacta="2"] .modulo-txt, .cabecera[data-compacta="3"] .modulo-txt { display: none; }
.cabecera[data-compacta="3"] .cabecera-derecha .usuario { display: none; }
/* «de dónde sale» junto al título de la gráfica mensual y del ranking */
#grafico-origen .kpi-origen, #ranking-origen .kpi-origen { position: static; margin-left: 6px; opacity: .6; vertical-align: middle; display: inline-grid; place-items: center; }
#grafico-origen .kpi-origen:hover, #ranking-origen .kpi-origen:hover { opacity: 1; }
.ranking .nombre small .acceso { margin-right: 3px; }

/* ---------- Ficha de stock del artículo (Logística, al elegir un artículo) ---------- */
.stock-art { margin: 0 0 14px; }
.sa-cab { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 18px; margin: 0 0 10px; }
.sa-art { font-size: 17px; display: inline-flex; align-items: center; gap: 6px; }
.sa-datos { color: var(--texto-2); font-size: 13px; }
.sa-rejilla { display: grid; grid-template-columns: minmax(300px, 1.2fr) minmax(220px, .8fr) minmax(320px, 1.2fr); gap: 12px; }
@media (max-width: 1100px) { .sa-rejilla { grid-template-columns: 1fr; } }
.sa-tarjeta { padding: 12px 16px; }
.sa-tarjeta h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 8px; font-size: 12px; letter-spacing: .6px; text-transform: uppercase; color: var(--texto-2); }
.sa-tarjeta h4 .icono { width: 16px; height: 16px; }
.sa-tabla { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.sa-tabla th, .sa-tabla td { padding: 5px 6px; border-bottom: 1px solid var(--borde); text-align: left; white-space: nowrap; }
.sa-tabla thead th { font-size: 11.5px; color: var(--tenue); font-weight: 600; }
.sa-tabla tbody th { font-weight: 600; }
.sa-tabla .n { text-align: right; font-variant-numeric: tabular-nums; }
.sa-tabla tr:last-child th, .sa-tabla tr:last-child td { border-bottom: 0; }
.sa-ultcompra th, .sa-ultcompra td { color: var(--texto-2); }
.sa-ver { font-size: 12.5px; display: inline-flex; align-items: center; gap: 3px; }
.sa-ver .icono { width: 13px; height: 13px; }
.sa-precios { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.sa-precios div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--borde); padding: 4px 0; }
.sa-precios dt { color: var(--texto-2); font-size: 13px; }
.sa-precios dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.sa-almacenes { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.dialogo-ficha.dialogo-pendientes-art { width: min(1150px, calc(calc(100vw / var(--zoom, 1)) - 32px)); height: fit-content; max-height: min(900px, calc(calc(100vh / var(--zoom, 1)) - 48px)); }

/* ================================================================ Cuadros de mando «¿Y si…?» */
.cuadros { padding: 0 0 40px; }
.cm-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin: 4px 0 14px; }
.cm-cab h1 { margin: 2px 0 4px; font-size: 26px; }
.cm-ante { margin: 0; font-size: 12px; letter-spacing: .8px; text-transform: uppercase; color: var(--primario); font-weight: 700; }
.cm-sub { margin: 0; color: var(--texto-2); font-size: 13.5px; max-width: 760px; }
.cm-tabs { margin-bottom: 14px; }
.cm-tabs .lista-tab { display: inline-flex; align-items: center; gap: 6px; }
.cm-tabs .lista-tab .icono { width: 16px; height: 16px; }
.cm-marca { width: 7px; height: 7px; border-radius: 50%; background: transparent; margin-left: 2px; }
.cm-marca.activa { background: var(--acento, #f59e0b); box-shadow: 0 0 0 3px color-mix(in srgb, var(--acento, #f59e0b) 25%, transparent); }
.cm-rejilla { display: grid; grid-template-columns: minmax(300px, 360px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 1100px) { .cm-rejilla { grid-template-columns: 1fr; } }
.cm-palancas { padding: 16px 18px; position: sticky; top: calc(var(--alto-cabecera, 64px) + 10px); }
.cm-palancas h3 { margin: 0 0 14px; font-size: 15px; line-height: 1.35; }
.cm-lista-palancas { display: flex; flex-direction: column; gap: 14px; }
.cm-palanca { display: flex; flex-direction: column; gap: 4px; }
.cm-pal-cab { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.cm-pal-tit { font-weight: 600; font-size: 13.5px; }
.cm-pal-val { font-weight: 800; font-variant-numeric: tabular-nums; color: var(--texto-2); padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); font-size: 13px; }
.cm-pal-val.movida { color: #fff; background: var(--primario); }
.cm-palanca input[type="range"] { width: 100%; accent-color: var(--primario); cursor: pointer; }
.cm-pal-ayuda { font-size: 11.5px; color: var(--tenue); }
.cm-extra:empty { display: none; }
.cm-extra { margin-top: 12px; }
.cm-check { display: flex; gap: 8px; align-items: center; font-size: 13px; }
.cm-acciones { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; }
.cm-escenarios { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.cm-esc-tit { width: 100%; margin: 0; font-size: 11.5px; color: var(--tenue); text-transform: uppercase; letter-spacing: .5px; }
.cm-esc { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--borde); border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; }
.cm-esc .btn-mini svg { width: 12px; height: 12px; }
.cm-resultados { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.cm-tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.cm-kpi { background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; }
.cm-kpi.destacado { border-color: color-mix(in srgb, var(--primario) 45%, var(--borde)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 10%, transparent); }
.cm-kpi-tit { font-size: 12px; color: var(--texto-2); text-transform: uppercase; letter-spacing: .4px; font-weight: 600; }
.cm-kpi strong { font-size: 24px; font-variant-numeric: tabular-nums; }
.cm-kpi-base { font-size: 12px; color: var(--tenue); }
.cm-delta { align-self: flex-start; font-size: 12.5px; font-weight: 700; padding: 1px 8px; border-radius: 999px; background: var(--superficie-2); color: var(--texto-2); }
.cm-delta.bien { background: var(--bien-fondo); color: var(--texto-bien); }
.cm-delta.mal { background: var(--critico-fondo); color: var(--texto-critico); }
.cm-kpi-nota { font-size: 11.5px; color: var(--tenue); }
.cm-grafico, .cm-detalle { padding: 14px 18px; }
.cm-grafico h4, .cm-detalle h4 { margin: 0 0 10px; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-2); }
.cm-h4-sub { text-transform: none; letter-spacing: 0; color: var(--tenue); font-weight: 500; }
.cm-svg { width: 100%; height: auto; display: block; }
.cm-eje { stroke: var(--borde); stroke-dasharray: 3 4; }
.cm-cero { stroke: var(--texto-2); stroke-width: 1; opacity: .5; }
.cm-eje-t, .cm-lab { font-size: 11px; fill: var(--tenue); }
.cm-val { font-size: 11.5px; font-weight: 700; fill: var(--texto); }
.cm-b.total { fill: var(--primario); }
.cm-b.sube { fill: #22a06b; }
.cm-b.baja { fill: #e5484d; }
.cm-zona-neg { fill: color-mix(in srgb, #e5484d 9%, transparent); }
.cm-linea { fill: none; stroke-width: 2.5; }
.cm-linea.antes { stroke: var(--tenue); stroke-dasharray: 5 4; }
.cm-linea.despues { stroke: var(--primario); }
.cm-punto { fill: var(--primario); }
.cm-punto.neg { fill: #e5484d; }
.cm-leyenda { display: flex; gap: 14px; align-items: center; font-size: 12px; color: var(--texto-2); margin: 8px 0 0; }
.cm-leyenda span { display: inline-block; width: 16px; height: 6px; border-radius: 3px; margin-right: -8px; }
.cm-leyenda .antes { background: var(--tenue); opacity: .6; }
.cm-leyenda .despues { background: var(--primario); }
.cm-leyenda .activo { background: var(--primario); }
.cm-leyenda .muerto { background: #e5484d; }
.cm-pares { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.cm-par-tit { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.cm-par { display: flex; align-items: center; gap: 8px; height: 18px; margin: 3px 0; }
.cm-par i { display: block; height: 14px; border-radius: 4px; min-width: 2px; transition: width .25s; }
.cm-par i.antes { background: color-mix(in srgb, var(--tenue) 45%, transparent); }
.cm-par i.despues { background: var(--primario); }
.cm-par em { font-style: normal; font-size: 12px; font-variant-numeric: tabular-nums; color: var(--texto-2); white-space: nowrap; }
.cm-apiladas { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.cm-apiladas li { display: grid; grid-template-columns: 80px 1fr 110px; align-items: center; gap: 10px; }
.cm-apiladas .cm-par-tit { margin: 0; }
.cm-apilada { display: flex; height: 22px; border-radius: 6px; overflow: hidden; background: var(--superficie-2); }
.cm-apilada i { display: block; height: 100%; transition: width .25s; }
.cm-apilada i.activo { background: var(--primario); }
.cm-apilada i.muerto { background: #e5484d; }
.cm-apiladas em { font-style: normal; font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; }
.cm-barras-h { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.cm-barras-h li { display: grid; grid-template-columns: minmax(160px, 260px) 1fr 150px; gap: 10px; align-items: center; font-size: 13px; }
.cm-bh-tit { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cm-bh-barra { position: relative; height: 14px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.cm-bh-barra i { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--tenue) 45%, transparent); }
.cm-barras-h li.negocia .cm-bh-barra i { background: var(--primario); }
.cm-bh-barra b { position: absolute; right: auto; top: 0; bottom: 0; left: 0; background: #22a06b; opacity: .85; }
.cm-bh-val { text-align: right; font-variant-numeric: tabular-nums; }
.cm-bh-val small { color: #22a06b; font-weight: 700; }
.cm-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.cm-tabla th, .cm-tabla td { padding: 6px 8px; border-bottom: 1px solid var(--borde); text-align: left; }
.cm-tabla thead th { font-size: 11.5px; color: var(--tenue); font-weight: 600; }
.cm-tabla .n { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.cm-tabla tr.cm-perdido td { color: var(--texto-critico); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--texto-critico) 50%, transparent); }
.cm-tabla tr.cm-perdido td:first-child { text-decoration: none; }
.cm-var { font-size: 10.5px; color: var(--tenue); border: 1px solid var(--borde); border-radius: 999px; padding: 0 6px; }
.cm-nota { font-size: 12px; color: var(--tenue); margin: 10px 0 0; }
.cm-dl { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 6px 18px; margin: 0; }
.cm-dl div { display: flex; justify-content: space-between; gap: 10px; border-bottom: 1px solid var(--borde); padding: 5px 0; }
.cm-dl dt { color: var(--texto-2); font-size: 13px; }
.cm-dl dd { margin: 0; font-weight: 700; font-variant-numeric: tabular-nums; }
.cm-resumen { display: flex; flex-direction: column; gap: 14px; }
.cm-resumen .tarjeta { padding: 14px 18px; }
.cm-resumen-lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.cm-resumen-lista li { display: grid; grid-template-columns: 150px 1fr minmax(120px, 260px) 150px; gap: 12px; align-items: center; }
.cm-resumen-lista .enlace { display: inline-flex; gap: 6px; align-items: center; font-weight: 700; }
.cm-res-palancas { font-size: 12px; color: var(--texto-2); }
.cm-res-barra { height: 12px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.cm-res-barra i { display: block; height: 100%; }
.cm-res-barra i.bien { background: #22a06b; }
.cm-res-barra i.mal { background: #e5484d; }
.cm-res-val { display: flex; flex-direction: column; align-items: flex-end; }
.cm-res-caja { font-size: 12px; color: var(--texto-2); }
.cm-res-barra:empty { background: none; }
.cm-vacio-resumen { text-align: center; padding: 50px 20px; color: var(--texto-2); }
.cm-vacio-resumen .icono { width: 40px; height: 40px; opacity: .5; }

/* cuadros de mando: explicación, origen y ayuda */
.cm-cab-der { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.cm-kpi { position: relative; }
.cm-kpi-tit { display: inline-flex; align-items: center; gap: 5px; cursor: help; }
.cm-i { display: inline-grid; place-items: center; width: 14px; height: 14px; border-radius: 50%; border: 1px solid currentColor; font-size: 9.5px; font-weight: 800; font-style: italic; opacity: .55; text-transform: none; }
.cm-kpi .cm-origenes { order: 10; display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.cm-kpi .cm-origen { border: 1px solid var(--borde); border-radius: 999px; height: 22px; padding: 0 8px 0 6px; opacity: .8; background: var(--superficie); }
.cm-kpi .cm-origen svg { width: 12px; height: 12px; }
.cm-dl .cm-origenes, .cm-dl dt .cm-origenes { position: static; display: inline-flex; margin-left: 6px; vertical-align: middle; }
.cm-origen { position: static; width: auto; min-width: 26px; height: 24px; padding: 0 5px; display: inline-flex; align-items: center; gap: 3px; opacity: .6; }
.cm-origen:hover { opacity: 1; }
.cm-origen small { font-size: 10.5px; font-weight: 600; }
.cm-dl > div[title] { cursor: help; }
.cm-tabla th[title] { cursor: help; text-decoration: underline dotted; text-underline-offset: 3px; }
.dialogo-ficha.dialogo-ayuda-cm { width: min(1150px, calc(calc(100vw / var(--zoom, 1)) - 32px)); }
.cm-ay { display: grid; grid-template-columns: 250px 1fr; gap: 0; min-height: 0; flex: 1; overflow: hidden; }
@media (max-width: 800px) { .cm-ay { grid-template-columns: 1fr; } .cm-ay-indice { display: none; } }
.cm-ay-indice { display: flex; flex-direction: column; gap: 2px; padding: 14px 10px; border-right: 1px solid var(--borde); overflow: auto; }
.cm-ay-indice button { text-align: left; border: 0; background: none; padding: 8px 10px; border-radius: 8px; font: inherit; font-size: 13.5px; color: var(--texto-2); cursor: pointer; }
.cm-ay-indice button:hover { background: var(--superficie-2); }
.cm-ay-indice button[aria-current="true"] { background: var(--verde-suave, var(--info-fondo)); color: var(--texto); font-weight: 700; }
.cm-ay-texto { overflow: auto; padding: 6px 26px 40px; line-height: 1.55; font-size: 14px; }
.cm-ay-texto section { padding: 14px 0 18px; border-bottom: 1px solid var(--borde); }
.cm-ay-texto h3 { margin: 6px 0 10px; font-size: 18px; }
.cm-ay-texto h4 { margin: 14px 0 4px; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--primario); }
.cm-ay-texto p { margin: 0 0 8px; }
.cm-ay-texto ul { margin: 4px 0 8px; padding-left: 20px; }
.cm-ay-texto li { margin: 3px 0; }
.cm-formula { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; background: var(--superficie-2); border-radius: 8px; padding: 10px 12px; line-height: 1.7; }
.cm-ay-clave { background: var(--info-fondo); border-left: 3px solid var(--primario); padding: 8px 12px; border-radius: 6px; }
.cm-ay-glosario { display: grid; grid-template-columns: 1fr; gap: 6px; margin: 0; }
.cm-ay-glosario div { display: grid; grid-template-columns: 220px 1fr; gap: 12px; border-bottom: 1px solid var(--borde); padding: 6px 0; }
.cm-ay-glosario dt { font-weight: 700; }
.cm-ay-glosario dd { margin: 0; color: var(--texto-2); }

/* ---------- Cuadros de mando de análisis ---------- */
.cm-modo { display: inline-flex; border: 1px solid var(--borde); border-radius: 10px; overflow: hidden; background: var(--superficie); }
.cm-modo button { display: inline-flex; align-items: center; gap: 6px; border: 0; background: none; padding: 7px 12px; font: inherit; font-weight: 600; font-size: 13.5px; color: var(--texto-2); cursor: pointer; }
.cm-modo button .icono { width: 15px; height: 15px; }
.cm-modo button[aria-pressed="true"] { background: var(--primario); color: #fff; }
.an { display: flex; flex-direction: column; gap: 14px; }
.an-tarjeta { padding: 14px 18px; min-width: 0; }
.an-tarjeta h4 { margin: 0 0 12px; font-size: 12.5px; letter-spacing: .5px; text-transform: uppercase; color: var(--texto-2); }
.an-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 1100px) { .an-dos { grid-template-columns: 1fr; } }
.an-gris, .an-dias { color: var(--tenue); font-size: 11.5px; }
/* segmentos de clientes */
.an-tira { display: flex; height: 14px; border-radius: 7px; overflow: hidden; margin-bottom: 12px; background: var(--superficie-2); }
.an-tira i { display: block; height: 100%; }
.an-segmentos { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.an-seg { text-align: left; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); padding: 10px 12px; cursor: pointer; font: inherit; display: flex; flex-direction: column; gap: 2px; }
.an-seg:hover { border-color: var(--primario); }
.an-seg.activo { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 14%, transparent); }
.an-seg-tit { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 700; color: var(--texto-2); }
.an-seg b { font-size: 22px; }
.an-seg small { color: var(--tenue); font-size: 11.5px; }
.an-punto { width: 9px; height: 9px; border-radius: 50%; }
.an-s-nuevos .an-punto, .an-tira .an-s-nuevos { background: #3b82f6; }
.an-s-crecen .an-punto, .an-tira .an-s-crecen { background: #16a34a; }
.an-s-estables .an-punto, .an-tira .an-s-estables { background: #84cc16; }
.an-s-bajan .an-punto, .an-tira .an-s-bajan { background: #eab308; }
.an-s-riesgo .an-punto, .an-tira .an-s-riesgo { background: #f97316; }
.an-s-dormidos .an-punto, .an-tira .an-s-dormidos { background: #ef4444; }
.an-s-perdidos .an-punto, .an-tira .an-s-perdidos { background: #6b7280; }
.an-seg-ayuda { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 13px; margin: 0 0 8px; }
.an-seg-ayuda .cm-origen, .an .cm-tabla .cm-origen, .an-tramos .cm-origen { border: 1px solid var(--borde); border-radius: 999px; height: 22px; padding: 0 8px 0 6px; background: var(--superficie); }
.an-seg-ayuda .cm-origen svg, .an .cm-tabla .cm-origen svg, .an-tramos .cm-origen svg { width: 12px; height: 12px; }
/* Pareto y burbujas */
.an-area { fill: color-mix(in srgb, var(--primario) 12%, transparent); }
.an-guia { stroke: var(--primario); stroke-dasharray: 4 4; }
.an-burbuja { fill: color-mix(in srgb, var(--primario) 35%, transparent); stroke: var(--primario); stroke-width: 1.5; }
.an-burbuja.neg { fill: color-mix(in srgb, #e5484d 30%, transparent); stroke: #e5484d; }
.an-burbuja:hover { fill: color-mix(in srgb, var(--primario) 60%, transparent); }
.an-prov li { grid-template-columns: minmax(110px, 170px) 1fr 160px; }
/* antigüedad de la deuda */
.an-tramos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.an-tramos li { display: grid; grid-template-columns: 110px 1fr 150px 30px; gap: 10px; align-items: center; font-size: 13px; }
.an-t-barra { height: 16px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.an-t-barra i { display: block; height: 100%; }
.an-t0 i { background: #16a34a; } .an-t1 i { background: #a3e635; } .an-t2 i { background: #facc15; } .an-t3 i { background: #fb923c; }
.an-t4 i { background: #f97316; } .an-t5 i { background: #ef4444; } .an-t6 i { background: #991b1b; }
.an-t-val { display: flex; flex-direction: column; text-align: right; font-variant-numeric: tabular-nums; }
.an-t-val small { color: var(--tenue); font-size: 11px; }
.an-meses, .an-semana { list-style: none; margin: 0; padding: 0; display: flex; gap: 10px; align-items: flex-end; height: 200px; }
.an-meses li, .an-semana li { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; font-size: 12px; }
.an-mes-barra, .an-sem-barra { flex: 1; width: 70%; display: flex; align-items: flex-end; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.an-mes-barra i, .an-sem-barra i { display: block; width: 100%; background: var(--primario); border-radius: 6px 6px 0 0; }
.an-meses b, .an-semana b { font-size: 11.5px; font-variant-numeric: tabular-nums; }
.an-semana li.mejor .an-sem-barra i { background: #16a34a; }
/* ABC */
.an-abc { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.an-abc li { display: grid; grid-template-columns: 40px 1fr; gap: 12px; align-items: center; }
.an-abc-l { display: grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; font-weight: 800; font-size: 18px; color: #fff; }
.an-abc-A { background: #16a34a; } .an-abc-B { background: #eab308; } .an-abc-C { background: #9ca3af; }
.an-abc-barras { display: flex; flex-direction: column; gap: 4px; }
.an-abc-b { position: relative; height: 18px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.an-abc-b i { display: block; height: 100%; background: color-mix(in srgb, var(--tenue) 45%, transparent); }
.an-abc-b.ventas i { background: var(--primario); }
.an-abc-b em { position: absolute; left: 8px; top: 1px; font-style: normal; font-size: 11.5px; font-weight: 600; color: var(--texto); }
/* mapa de calor */
.an-calor { width: 100%; border-collapse: separate; border-spacing: 3px; font-size: 11.5px; }
.an-calor th { color: var(--tenue); font-weight: 600; text-align: center; }
.an-calor tbody th { text-align: right; padding-right: 4px; }
.an-calor td { height: 30px; border-radius: 5px; background: color-mix(in srgb, var(--primario) calc(var(--i, 0) * 85% + 4%), var(--superficie)); }
.an-calor td button { width: 100%; height: 100%; border: 0; background: none; cursor: pointer; font: inherit; font-size: 10.5px; font-weight: 700; color: var(--texto); }
.an-calor td button:hover { outline: 2px solid var(--primario); border-radius: 5px; }
.an-calor td.an-futuro { background: none; border: 1px dashed var(--borde); }
.an-calor tr.an-indice td { background: none; font-weight: 700; font-size: 10.5px; text-align: center; }
.an-calor tr.an-indice td.sube { color: var(--texto-bien); }
.an-calor tr.an-indice td.baja { color: var(--texto-critico); }
.an-calor tr.an-indice th { color: var(--texto-2); }

/* ---------- Cuadros de mando: Acción y Dirección ---------- */
.cm-modo button { padding: 7px 11px; }
.mn-correo { gap: 6px; }
.mn-correo .btn { align-self: flex-start; }
.mn-alertas { display: flex; flex-direction: column; gap: 8px; }
.mn-alerta { display: grid; grid-template-columns: 34px 1fr auto; gap: 12px; align-items: center; background: var(--superficie); border: 1px solid var(--borde);
  border-left: 5px solid var(--tenue); border-radius: 12px; padding: 10px 14px; }
.mn-alerta.mn-g-alta { border-left-color: #e5484d; } .mn-alerta.mn-g-media { border-left-color: #f59e0b; } .mn-alerta.mn-g-info { border-left-color: var(--primario); }
.mn-al-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--superficie-2); }
.mn-g-alta .mn-al-ico { background: var(--critico-fondo); color: var(--texto-critico); } .mn-g-media .mn-al-ico { background: var(--aviso-fondo); color: var(--texto-aviso); }
.mn-al-ico .icono, .mn-al-ico svg { width: 18px; height: 18px; }
.mn-al-txt b { font-size: 14px; } .mn-al-txt p { margin: 2px 0 0; font-size: 13px; color: var(--texto-2); }
.mn-alerta .cm-origen, .mn-problema .cm-origen, .mn-paso .cm-origen, .mn-obj-tabla .cm-origen { border: 1px solid var(--borde); border-radius: 999px; height: 24px; padding: 0 8px 0 6px; background: var(--superficie); }
.mn-chips { margin-bottom: 10px; }
.mn-problemas { display: flex; flex-direction: column; gap: 8px; }
.mn-problema { padding: 0; border-left: 5px solid var(--tenue); overflow: hidden; }
.mn-problema.mn-g-alta { border-left-color: #e5484d; } .mn-problema.mn-g-media { border-left-color: #f59e0b; } .mn-problema.mn-g-info { border-left-color: var(--primario); }
.mn-problema[data-vacio] { opacity: .6; }
.mn-problema summary { display: grid; grid-template-columns: 70px 1fr auto auto; gap: 14px; align-items: center; padding: 12px 16px; cursor: pointer; list-style: none; }
.mn-problema summary::-webkit-details-marker { display: none; }
.mn-pb-n { font-size: 24px; font-weight: 800; text-align: center; }
.mn-pb-txt { display: flex; flex-direction: column; gap: 2px; } .mn-pb-txt small { color: var(--texto-2); font-size: 12.5px; }
.mn-pb-imp { font-variant-numeric: tabular-nums; }
.mn-problema .cm-tabla { margin: 0 16px 12px; width: calc(100% - 32px); }
.mn-problema > .cm-nota { margin: 0 16px 12px; }
.mn-dir-cab { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.mn-dir-cab h3 { margin: 0; font-size: 18px; }
.mn-dir-acc { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.mn-dir { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 12px; }
.mn-dir-kpi { position: relative; display: flex; flex-direction: column; background: var(--superficie); border: 1px solid var(--borde); border-radius: 14px; overflow: hidden; }
.mn-dir-kpi .cm-kpi { border: 0; border-radius: 0; }
.mn-dir-kpi.mn-e-bien { border-color: #16a34a; } .mn-dir-kpi.mn-e-aviso { border-color: #f59e0b; } .mn-dir-kpi.mn-e-mal { border-color: #e5484d; }
.mn-sem { position: absolute; top: 12px; right: 12px; width: 14px; height: 14px; border-radius: 50%; background: var(--borde); z-index: 1; }
.mn-sem-bien { background: #16a34a; } .mn-sem-aviso { background: #f59e0b; } .mn-sem-mal { background: #e5484d; }
.mn-obj { padding: 8px 16px 12px; font-size: 12.5px; border-top: 1px dashed var(--borde); }
.mn-obj input, .mn-input { width: 130px; padding: 4px 8px; border: 1px solid var(--borde); border-radius: 8px; font: inherit; background: var(--superficie); color: var(--texto); text-align: right; }
.mn-obj label { display: flex; gap: 8px; align-items: center; justify-content: space-between; }
.mn-barra { position: relative; display: block; min-width: 120px; height: 18px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.mn-barra i { display: block; height: 100%; background: var(--primario); }
.mn-barra.mn-e-bien i { background: #16a34a; } .mn-barra.mn-e-aviso i { background: #f59e0b; } .mn-barra.mn-e-mal i { background: #e5484d; }
.mn-barra em { position: absolute; left: 6px; top: 1px; font-style: normal; font-size: 11.5px; font-weight: 700; color: var(--texto); }
/* previsión */
.mn-pv { display: flex; align-items: flex-end; gap: 6px; height: 240px; }
.mn-pv-mes { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; height: 100%; font-size: 11px; color: var(--tenue); }
.mn-pv-col { position: relative; flex: 1; width: 80%; display: flex; align-items: flex-end; }
.mn-pv-col i { display: block; width: 100%; border-radius: 5px 5px 0 0; }
.mn-pv-col.real i { background: var(--primario); }
.mn-pv-col.prev i { position: absolute; bottom: 0; left: 0; background: color-mix(in srgb, var(--primario) 30%, transparent); border: 1px dashed var(--primario); border-bottom: 0; }
.mn-pv-col.prev i.mn-pv-cart { background: #16a34a; border: 0; opacity: .75; width: 60%; left: 20%; }
.mn-pv-rango { position: absolute; left: 50%; width: 2px; background: var(--texto-2); opacity: .5; }
.mn-pv-sep { width: 2px; align-self: stretch; background: var(--borde); margin: 0 4px; }
.mn-l-prev { background: color-mix(in srgb, var(--primario) 30%, transparent) !important; } .mn-l-cart { background: #16a34a !important; } .mn-l-rango { background: var(--texto-2) !important; width: 3px !important; }
/* rentabilidad */
.mn-interes { max-width: 520px; background: var(--superficie); border: 1px solid var(--borde); border-radius: 12px; padding: 10px 14px; }
.mn-rent { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mn-rent li { display: grid; grid-template-columns: minmax(160px, 260px) 1fr 190px; gap: 10px; align-items: center; font-size: 13px; }
.mn-rent-b { position: relative; height: 18px; background: var(--superficie-2); border-radius: 5px; overflow: hidden; }
.mn-rent-b i { position: absolute; left: 0; top: 0; bottom: 0; }
.mn-rent-b i.bruto { background: color-mix(in srgb, var(--tenue) 45%, transparent); }
.mn-rent-b i.real { background: var(--primario); top: 4px; bottom: 4px; border-radius: 3px; }
.mn-rent-b i.real.neg { background: #e5484d; }
/* embudo */
.mn-embudo { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
.mn-paso { flex: 1; min-width: 180px; display: flex; flex-direction: column; gap: 6px; background: var(--superficie-2); border-radius: 12px; padding: 12px 14px; }
.mn-paso-t { font-weight: 700; font-size: 13px; }
.mn-paso-pct b { font-size: 24px; } .mn-paso-pct small { display: block; color: var(--tenue); font-size: 11.5px; }
.mn-paso-barra { height: 8px; background: var(--superficie); border-radius: 4px; overflow: hidden; } .mn-paso-barra i { display: block; height: 100%; background: var(--primario); }
.mn-paso-dias { font-size: 12.5px; color: var(--texto-2); }
.mn-paso .cm-origen { align-self: flex-start; }
.mn-flecha { align-self: center; font-size: 22px; color: var(--tenue); }
/* imprimir el cuadro de dirección: solo el cuadro */
@media print {
  body.cm-imprimir .cabecera, body.cm-imprimir .cm-tabs, body.cm-imprimir .cm-cab-der, body.cm-imprimir .mn-dir-acc, body.cm-imprimir .cm-origen,
  body.cm-imprimir #vista-panel, body.cm-imprimir .aviso-version { display: none !important; }
  body.cm-imprimir .cuadros { padding: 0; max-width: none; }
  body.cm-imprimir .mn-dir { grid-template-columns: repeat(3, 1fr); }
  body.cm-imprimir .mn-dir-kpi { break-inside: avoid; }
}

/* barra de periodo a la derecha (pantalla general y EnterpriseBI, en la misma posición) */
.acciones-pagina { margin-left: auto; }
.cm-cab.titulo-pagina { margin: 4px 0 10px; align-items: flex-end; }
.cm-barra { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
@media (max-width: 760px) { .acciones-pagina { margin-left: 0; } }
/* cajas que filtran lo de abajo */
.cm-kpi.filtra { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.cm-kpi.filtra:hover { border-color: var(--primario); }
.cm-kpi.filtra.activa { border-color: var(--primario); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primario) 20%, transparent); background: color-mix(in srgb, var(--primario) 5%, var(--superficie)); }
.cm-kpi .cm-filtro-txt { font-size: 11px; color: var(--primario); font-weight: 600; }

/* el periodo, a la derecha y en la misma posición en el panel general y en EnterpriseBI */
#vista-panel .acciones-pagina .periodo { order: 2; }
#vista-panel .acciones-pagina .periodo, .cm-periodo-bar { justify-content: flex-end; }
/* EnterpriseBI: periodo desactivado en las pestañas que miran la situación de hoy */
.cm-periodo-bar { flex-wrap: wrap; justify-content: flex-end; }
.cm-periodo-bar.desactivado .fecha, .cm-periodo-bar.desactivado .chips { opacity: .4; pointer-events: none; }
.cm-sin-periodo { flex-basis: 100%; margin: 2px 0 0; text-align: right; font-size: 12px; color: var(--texto-2, #667); }
.cm-sin-periodo::before { content: 'ⓘ '; }

/* ================================================================ Alarmas y buzón */
.btn-buzon { position: relative; }
.btn-buzon .bz-insignia { position: absolute; top: 2px; right: 0; min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--critico); color: #fff; font-size: 10px; font-weight: 700; line-height: 17px; text-align: center; display: none; }
.btn-buzon.con-nuevos .bz-insignia { display: block; }
.al, .bz { width: 100%; min-width: 0; }
.al-barra { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.al-barra h3 { margin: 0 0 4px; font-size: 18px; }
.al-botones { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.al-aviso { margin-bottom: 12px; }
.al-lista { display: flex; flex-direction: column; gap: 10px; }
.al-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 6px 16px; align-items: center; padding: 14px 16px;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.al-item.inactiva { opacity: .62; }
.al-item h4 { margin: 0; font-size: 15px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.al-desc { margin: 3px 0 0; color: var(--texto-2); font-size: 13px; }
.al-meta { margin: 6px 0 0; display: flex; gap: 14px; flex-wrap: wrap; font-size: 12.5px; color: var(--texto-2); }
.al-meta span { display: inline-flex; align-items: center; gap: 5px; }
.al-meta svg, .al-canales svg, .al-canales-ed svg { width: 15px; height: 15px; }
.al-canales { gap: 10px !important; }
.al-item-estado { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; font-size: 12px; color: var(--texto-2); white-space: nowrap; }
.al-item-acc { display: flex; gap: 2px; }
.al-item-acc .girando svg { animation: girar 1s linear infinite; }
.al-error { grid-column: 2 / -1; margin: 0; font-size: 12.5px; color: var(--texto-critico); background: var(--critico-fondo); border-radius: 8px; padding: 6px 10px; }
.al-estado { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.al-estado.bien { background: var(--bien-fondo); color: var(--texto-bien); }
.al-estado.mal { background: var(--critico-fondo); color: var(--texto-critico); }
.al-estado.aviso { background: var(--aviso-fondo); color: var(--texto-aviso); }
.al-estado.neutro { background: var(--neutro-fondo); color: var(--texto-2); }
.al-interruptor { position: relative; width: 38px; height: 22px; flex: none; cursor: pointer; }
.al-interruptor input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.al-interruptor span { position: absolute; inset: 0; border-radius: 11px; background: var(--borde-fuerte); transition: background .15s; }
.al-interruptor span::after { content: ''; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: transform .15s; }
.al-interruptor input:checked + span { background: var(--primario); }
.al-interruptor input:checked + span::after { transform: translateX(16px); }
.al-interruptor input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }
.al-vacio { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 16px; text-align: center; color: var(--texto-2); }
.al-vacio > .icono svg { width: 40px; height: 40px; opacity: .5; }
.al-vacio p { margin: 0; }
.dialogo-alarmas { width: min(1100px, calc(100vw - 32px)); max-height: calc(100vh - 32px); border-radius: 18px; }
.dialogo-alarmas .dialogo-cuerpo { display: flex; flex-direction: column; max-height: calc(100vh - 32px); }
.dialogo-buzon { width: min(1320px, calc(100vw - 24px)); height: min(820px, calc(100vh - 32px)); }
.dialogo-buzon .dialogo-cuerpo { height: 100%; }
.bz-marco { flex: 1; min-height: 0; padding: 16px 18px; display: flex; overflow: auto; }
.al-cat { padding: 18px 22px 24px; overflow: auto; }
.al-cat h3 { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-2); }
.al-cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 10px; }
.al-cat-caja { display: flex; flex-direction: column; align-items: flex-start; gap: 5px; text-align: left; padding: 14px; cursor: pointer;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); color: var(--texto); font: inherit; }
.al-cat-caja:hover, .al-cat-caja:focus-visible { border-color: var(--primario); box-shadow: var(--sombra); }
.al-cat-caja > .icono { color: var(--primario); }
.al-cat-caja b { font-size: 14px; }
.al-cat-caja small { color: var(--texto-2); font-size: 12.5px; line-height: 1.4; }
.al-cat-caja em { font-style: normal; font-size: 12px; color: var(--primario); margin-top: auto; }
.al-ed { padding: 4px 22px 8px; overflow: auto; flex: 1; min-height: 0; }
.al-sec { padding: 14px 0; border-bottom: 1px solid var(--borde); }
.al-sec:last-child { border-bottom: 0; }
.al-sec h3 { margin: 0 0 10px; font-size: 15px; }
.al-fila { display: flex; gap: 12px; flex-wrap: wrap; align-items: flex-end; }
.al-campo { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; min-width: 140px; font-size: 13px; }
.al-campo > span { font-weight: 600; color: var(--texto-2); }
.al-campo > span em, .al-check em { font-weight: 400; font-style: normal; color: var(--tenue); }
.al-campo input, .al-campo select, .al-campo textarea { font: inherit; padding: 7px 10px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); color: var(--texto); }
.al-campo.al-ancho { flex: 1 1 320px; }
.al-campo[hidden], .al-dias[hidden] { display: none; }
.al-sql { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12.5px; line-height: 1.5; resize: vertical; min-height: 160px; tab-size: 2; }
.al-ayuda-sql code, .al-param code { font-size: 11.5px; background: var(--superficie-2); padding: 1px 4px; border-radius: 4px; }
.al-params-tit { margin: 4px 0 6px; font-weight: 600; font-size: 13px; }
.al-param { min-width: 200px; }
.al-param input { width: 140px; }
.al-probar { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; margin-top: 4px; }
.al-resultado { margin-top: 12px; }
.al-tabla-scroll { overflow: auto; max-height: 52vh; border: 1px solid var(--borde); border-radius: 10px; }
.al-tabla { width: 100%; }
.al-tabla th { position: sticky; top: 0; background: var(--superficie); z-index: 1; white-space: nowrap; }
.al-tabla td.n, .al-tabla th.n { text-align: right; white-space: nowrap; }
.al-cod { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.al-dias { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 8px; }
.al-dias label { position: relative; }
.al-dias input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.al-dias span { display: inline-flex; width: 34px; height: 34px; align-items: center; justify-content: center; border-radius: 50%;
  border: 1px solid var(--borde-fuerte); font-weight: 600; font-size: 13px; }
.al-dias input:checked + span { background: var(--primario); border-color: var(--primario); color: var(--sobre-primario); }
.al-dias input:focus-visible + span { outline: 2px solid var(--primario); outline-offset: 2px; }
.al-plan-txt { margin: 2px 0 10px; color: var(--primario); font-weight: 600; font-size: 13px; }
.al-check { display: flex; gap: 8px; align-items: center; margin: 6px 0; font-size: 13.5px; cursor: pointer; }
.al-check svg { width: 16px; height: 16px; }
.al-canales-ed { display: flex; gap: 22px; flex-wrap: wrap; margin-bottom: 6px; }
.al-usuarios { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 0 14px; margin-bottom: 10px; }
.al-nota-bi { display: flex; gap: 8px; align-items: center; }
.al-nota-bi svg { width: 18px; height: 18px; }
.al-pie { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; padding: 12px 22px; border-top: 1px solid var(--borde); background: var(--superficie); flex-wrap: wrap; }
.al-hist summary { cursor: pointer; font-size: 13px; color: var(--texto-2); }
.al-hist ul { margin: 6px 0 0; padding: 0 0 0 4px; list-style: none; font-size: 12.5px; max-height: 160px; overflow: auto; }
.al-hist li { margin: 3px 0; }
.al-error-txt { color: var(--texto-critico); }
.bz { display: grid; grid-template-columns: minmax(260px, 340px) 1fr; gap: 16px; min-height: 0; height: 100%; }
.bz-lado { display: flex; flex-direction: column; min-height: 0; border: 1px solid var(--borde); border-radius: var(--radio); background: var(--superficie); }
.bz-barra { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--borde); font-size: 12.5px; color: var(--texto-2); }
.bz-lista { overflow: auto; flex: 1; min-height: 0; }
.bz-item { display: grid; grid-template-columns: 10px 1fr; gap: 2px 8px; width: 100%; text-align: left; padding: 10px 12px; border: 0;
  border-bottom: 1px solid var(--borde); background: transparent; color: var(--texto); font: inherit; cursor: pointer; }
.bz-item:hover { background: var(--superficie-2); }
.bz-item.activo { background: var(--verde-suave); }
.bz-item b { font-weight: 500; font-size: 13.5px; }
.bz-item.nuevo b { font-weight: 700; }
.bz-item small, .bz-item time { grid-column: 2; font-size: 12px; color: var(--texto-2); }
.bz-punto { grid-row: 1 / span 3; width: 8px; height: 8px; border-radius: 50%; margin-top: 6px; }
.bz-item.nuevo .bz-punto { background: var(--primario); }
.bz-detalle { min-width: 0; overflow: auto; }
.bz-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.bz-cab h3 { margin: 2px 0 4px; font-size: 18px; }
.bz-resumen { margin: 4px 0 0; font-weight: 600; color: var(--primario); }
@media (max-width: 760px) {
  .al-item { grid-template-columns: auto 1fr; }
  .al-item-estado { align-items: flex-start; grid-column: 2; }
  .al-item-acc { grid-column: 2; }
  .bz { grid-template-columns: 1fr; grid-template-rows: minmax(160px, 35%) 1fr; }
}
@keyframes girar { to { transform: rotate(360deg); } }
/* Alarmas «cuando suceda» y autorizaciones */
.al-aut { color: var(--primario); font-weight: 600; }
.al-evento { margin-top: 4px; }
.al-controlados { max-height: 220px; overflow: auto; border: 1px solid var(--borde); border-radius: 10px; padding: 6px 10px; }
.al-controlados small { font-size: 11.5px; }
.al-necesarias { gap: 22px; margin: 4px 0 6px; }
.btn-buzon.con-firmas .bz-insignia { background: var(--aviso); color: #1b1b1b; }
.aut { padding: 14px 16px; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); }
.aut.pendiente { border-left: 4px solid var(--aviso); }
.aut-cab { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.aut-cab h4 { margin: 2px 0 4px; font-size: 16px; display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.aut-cab .al-estado { display: inline-flex; align-items: center; gap: 4px; }
.aut-cab .al-estado svg { width: 13px; height: 13px; }
.aut-meta { margin: 0; font-size: 13px; color: var(--texto-2); display: flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.aut-firmas { list-style: none; margin: 10px 0 0; padding: 0; font-size: 13px; display: flex; flex-direction: column; gap: 3px; }
.aut-firmas li { padding: 5px 10px; border-radius: 8px; }
.aut-firmas li.si { background: var(--bien-fondo); color: var(--texto-bien); }
.aut-firmas li.no { background: var(--critico-fondo); color: var(--texto-critico); }
.aut-firmas li.espera { background: var(--aviso-fondo); color: var(--texto-aviso); }
.aut-nota { margin: 8px 0 0; }
.aut-motivo { margin-top: 10px; }
.aut-motivo summary { cursor: pointer; font-size: 13px; color: var(--texto-2); margin-bottom: 8px; }
.bz-aut { margin: 0 0 14px; }
.al-grupo { margin: 18px 0 8px; font-size: 13px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-2); }
.al-grupo small { font-weight: 400; color: var(--tenue); margin-left: 4px; }
.al-sistema { background: var(--info-fondo); color: var(--info); }
.al-grabar { margin: 10px 0; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 10px; }
.al-grabar-tit { margin: 0 0 4px; display: flex; gap: 6px; align-items: center; }
.al-grabar-tit svg { width: 16px; height: 16px; color: var(--primario); }
.al-grabar .al-tabla-scroll { max-height: 220px; margin: 6px 0; }
.dialogo-aut-nueva { width: min(900px, calc(100vw - 24px)); }
.dialogo-aut-nueva .bz-marco { flex-direction: column; gap: 10px; max-height: 60vh; }
/* Licencias de EnterpriseBI (Ecinsa) */
.cm-lic { display: flex; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin: 0 0 14px; padding: 10px 14px;
  border: 1px dashed var(--primario); border-radius: var(--radio); background: var(--info-fondo); font-size: 13.5px; }
.cm-lic.off { border-color: var(--critico); background: var(--critico-fondo); }
.cm-lic-tit { display: inline-flex; align-items: center; gap: 6px; }
.cm-lic-tit svg { width: 16px; height: 16px; }
.cm-lic-sw, .cm-lic-n { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; cursor: pointer; }
.cm-lic-n input { width: 80px; font: inherit; padding: 5px 8px; border: 1px solid var(--borde-fuerte); border-radius: 8px; background: var(--superficie); color: var(--texto); }
.cm-lic small { color: var(--texto-2); }
.cm-lic-uso { margin-left: auto; color: var(--texto-2); }
.cm-tab-off { opacity: .55; }
.cm-tab-off .icono { color: var(--critico); }
.perm-subtit { margin: 10px 0 4px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-2); }
.ct h4 { margin: 14px 0 6px; font-size: 13px; }
.ct-paneles { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: 999px; font-size: 12.5px;
  background: var(--bien-fondo); color: var(--texto-bien); }
.ct-chip svg { width: 14px; height: 14px; }
.ct-chip small { opacity: .75; font-weight: 700; }
.ct-chip.off { background: var(--neutro-fondo); color: var(--texto-2); text-decoration: line-through; }
/* Efecto de carga en EnterpriseBI y en las listas (como los indicadores de la pantalla principal) */
.cm-esqueleto .cm-kpi { min-height: 118px; }
.cm-esq-fila { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 14px; margin-top: 14px; }
.cm-esq { min-height: 260px; padding: 18px; }
.cm-esq .esqueleto:first-child { width: 35%; height: 12px; margin-bottom: 18px; }
.cm-esq .esqueleto:nth-child(even) { width: 85%; }
.fila-esqueleto td { padding-top: 9px; padding-bottom: 9px; }
.fila-esqueleto .esqueleto { margin: 0; height: 12px; position: relative; overflow: hidden; }
.fila-esqueleto .esqueleto::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brillo), transparent); animation: brillo 1.2s infinite; }
.hueco-pag td { position: relative; overflow: clip;
  background-image: repeating-linear-gradient(180deg, transparent 0 9px, var(--superficie-2) 9px calc(var(--af, 32px) - 9px), transparent calc(var(--af, 32px) - 9px) var(--af, 32px));
  background-size: 92% 100%; background-repeat: no-repeat; background-position: center; }
.hueco-pag td::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--brillo), transparent); animation: brillo 1.2s infinite; }
.hueco-pag td span { z-index: 1; background: var(--superficie); border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { .cargando::after, .hueco-pag td::after, .fila-esqueleto .esqueleto::after { animation: none; } }
/* Vista previa: cargando y vacía */
.detalle-esqueleto { display: flex; flex-direction: column; gap: 12px; margin-top: 10px; }
.det-esq { padding: 16px; min-height: 70px; }
.det-esq-alta { min-height: 220px; }
.det-esq-rejilla { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.det-esq-mini { padding: 14px; min-height: 64px; }
.detalle-vacio .multi-ilu { margin: 0 auto 14px; }

/* ================================================================ EnterpriseBI: aspecto estable y paneles nuevos */
/* la cabecera no cambia de alto al cambiar de grupo: el periodo siempre en su fila, el subtítulo con su sitio */
.cm-cab .acciones-pagina { flex-basis: 100%; }
.cm-cab .cm-sub { min-height: 2.9em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.cm-sin-periodo[hidden] { display: block !important; visibility: hidden; }
/* las cajas de cifras tienen el mismo alto cargando y cargadas */
#cm-cuerpo .cm-tarjetas > .cm-kpi, .cm-esqueleto .cm-kpi { min-height: 158px; }
#cm-cuerpo { min-height: 60vh; }
@media (max-width: 760px) { .cm-cab .cm-sub { min-height: 0; -webkit-line-clamp: 4; } }

/* Dirección: cifras pulsables y su detalle */
.mn-dir-kpi.dir-pulsable { cursor: pointer; transition: box-shadow .15s, border-color .15s; }
.mn-dir-kpi.dir-pulsable:hover { border-color: var(--primario); }
.mn-dir-kpi.dir-pulsable.activa { border-color: var(--primario); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primario) 35%, transparent); }
.mn-dir-kpi.dir-pulsable:focus-visible { outline: 2px solid var(--primario); outline-offset: 2px; }
#dir-detalle { margin-top: 18px; min-height: 340px; }
.dir-det-cab { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 10px; }
.dir-det-cab h3 { margin: 0; font-size: 16px; display: inline-flex; gap: 6px; align-items: center; }
.dir-det-cab h3 svg { width: 18px; height: 18px; color: var(--primario); }
.dir-det-esq { min-height: 320px; }
.cm-b.antes { fill: color-mix(in srgb, var(--tenue) 45%, transparent); }
.cm-barra-h { position: relative; height: 14px; background: var(--superficie-2); border-radius: 4px; overflow: hidden; }
.cm-barra-h i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--primario); border-radius: 4px; }
.cm-barras-h li em { font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.an-sube { color: #16a34a; } .an-baja { color: #e5484d; }

/* Ratios financieros */
.rt-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.rt { position: relative; display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); }
.rt .mn-sem { top: 12px; right: 12px; }
.rt-t { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); padding-right: 22px; }
.rt b { font-size: 22px; font-variant-numeric: tabular-nums; }
.rt small { color: var(--texto-2); font-size: 12px; line-height: 1.35; }
.rt-tabla tr.rt-fuerte td { font-weight: 700; border-top: 1px solid var(--borde-fuerte); }
.bal { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.bal-t { margin: 0 0 6px; font-size: 13px; font-weight: 700; }
.bal-pila { display: flex; flex-direction: column; height: 260px; border-radius: 10px; overflow: hidden; }
.bal-pila i { display: flex; align-items: center; justify-content: center; min-height: 0; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; overflow: hidden; }
.bal-pila i span { padding: 2px 6px; white-space: nowrap; }
.bal-pila .anc { background: #6d7f95; } .bal-pila .ex { background: #c08a3e; } .bal-pila .deu { background: #3f8fc9; }
.bal-pila .inv { background: #7c6bc4; } .bal-pila .tes { background: #22a06b; }
.bal-pila .pn { background: #1f4d7a; } .bal-pila .pnc { background: #b0663f; } .bal-pila .pc { background: #d1495b; }

/* RFM */
.rfm { display: flex; flex-wrap: wrap; gap: 8px; }
.rfm-seg { flex: 1 1 150px; min-height: 92px; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 12px;
  border: 2px solid transparent; border-radius: 12px; cursor: pointer; text-align: left; font: inherit; color: #12202e; }
.rfm-seg b { font-size: 14px; } .rfm-seg span { font-size: 13px; } .rfm-seg small { font-size: 12px; opacity: .8; }
.rfm-seg.activo { border-color: var(--texto); box-shadow: var(--sombra); }
.rfm-campeones { background: #bfe8cf; } .rfm-leales { background: #d6efc4; } .rfm-potenciales { background: #e3f1d0; }
.rfm-nuevos { background: #cfe6f7; } .rfm-atencion { background: #fbe8c2; } .rfm-riesgo { background: #f8d3b5; }
.rfm-noperder { background: #f5b9b3; } .rfm-hibernando { background: #e2e4e9; } .rfm-perdidos { background: #d3d6dc; }

/* ABC-XYZ */
table.abc { border-collapse: separate; border-spacing: 6px; width: 100%; }
table.abc th { font-size: 13px; text-align: center; } table.abc th small { display: block; font-weight: 400; color: var(--texto-2); font-size: 11px; }
.abc-c { width: 100%; min-height: 78px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer;
  border: 2px solid transparent; border-radius: 10px; font: inherit; color: var(--texto);
  background: color-mix(in srgb, var(--primario) calc(8% + var(--i) * 55%), var(--superficie)); }
.abc-c b { font-size: 16px; } .abc-c span { font-size: 12.5px; } .abc-c small { font-size: 11.5px; opacity: .8; }
.abc-c.activo { border-color: var(--texto); }

/* Cohortes */
.tabla-ancha { overflow-x: auto; }
table.coh { border-collapse: separate; border-spacing: 3px; font-size: 12.5px; }
table.coh th { padding: 4px 8px; text-align: left; white-space: nowrap; } table.coh th small { display: block; font-weight: 400; color: var(--texto-2); }
table.coh td { min-width: 64px; padding: 6px 8px; text-align: center; border-radius: 6px; background: color-mix(in srgb, var(--primario) calc(var(--p, 0) * 85%), var(--superficie-2)); }
table.coh td b { display: block; } table.coh td small { opacity: .75; }

/* Ciclo de caja */
.ciclo { display: flex; flex-direction: column; gap: 10px; }
.ciclo-f { display: grid; grid-template-columns: 140px 1fr; gap: 10px; align-items: center; font-size: 13px; }
.ciclo-b { display: flex; height: 26px; background: var(--superficie-2); border-radius: 6px; overflow: hidden; }
.ciclo-b i { display: flex; align-items: center; justify-content: center; color: #fff; font-style: normal; font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; }
.ciclo-b .dio { background: #c08a3e; } .ciclo-b .dso { background: #3f8fc9; } .ciclo-b .dpo { background: #22a06b; } .ciclo-b .cic { background: #d1495b; }
@media (max-width: 900px) { .bal { grid-template-columns: 1fr; } .ciclo-f { grid-template-columns: 1fr; } }

/* ================================================================ Finanzas › Cuentas: extracto dibujado */
.fx { display: flex; flex-direction: column; gap: 12px; margin: 4px 0 14px; container-type: inline-size; }
.fx-hero { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; padding: 18px 20px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, #1f4d7a, #0b8bc2); box-shadow: 0 8px 24px -14px rgba(11, 60, 100, .7); }
.fx-hero.fx-acreedor { background: linear-gradient(135deg, #7a1f3d, #d1495b); }
.fx-hero.fx-saldada { background: linear-gradient(135deg, #4a5563, #8a96a6); }
.fx-hero.fx-deudor { background: linear-gradient(135deg, #14532d, #16a34a); }
.fx-ante { margin: 0; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
.fx-hero h3 { margin: 4px 0; font-size: 19px; color: #fff; }
.fx-periodo { margin: 0; font-size: 12.5px; opacity: .85; }
.fx-hero-der { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.fx-hero-der small { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .85; }
.fx-hero-der b { font-size: clamp(20px, 5.2cqi, 30px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.fx-lado { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 700; }
.fx-raro { font-size: 11.5px; background: rgba(0,0,0,.22); padding: 2px 8px; border-radius: 6px; }
/* la cabecera fija de la vista previa de una cuenta */
.fx-hero-cab { container-type: inline-size; width: 100%; padding: 14px 18px; flex-wrap: nowrap; box-shadow: 0 8px 20px -12px rgba(11, 27, 43, .45); }
.fx-hero-cab .fx-hero-izq { min-width: 0; flex: 1; }
.fx-hero-cab h3 { display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 12px; margin: 3px 0; }
.fx-tit { overflow: hidden; text-overflow: ellipsis; }
.fx-cta { display: inline-flex; align-items: center; gap: 4px; padding: 1px 9px; border-radius: 999px; background: rgba(255,255,255,.18);
  font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }
.fx-hero-cab .fx-hero-der { flex: none; }
@container (max-width: 380px) { .fx-hero-cab { flex-wrap: wrap; } }
.fx-cifras { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.fx-cifras > div { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); display: flex; flex-direction: column; }
.fx-cifras small { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); font-weight: 700; }
.fx-cifras b { font-size: clamp(13px, 3.2cqi, 16px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.fx-cifras .fx-d { border-left: 4px solid #3f8fc9; } .fx-cifras .fx-h { border-left: 4px solid #c08a3e; }
.fx-cifras .fx-sube b { color: #16a34a; } .fx-cifras .fx-baja b { color: #e5484d; }
.fx-graf { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(0, 1fr); gap: 10px; }
.fx-graf > div { border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; background: var(--superficie); }
.fx-graf-t { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); }
.fx-svg { width: 100%; height: auto; display: block; }
.fx-linea { fill: none; stroke: var(--primario); stroke-width: 2.2; stroke-linejoin: round; }
.fx-marca circle { stroke: #fff; stroke-width: 2; } .fx-marca.max circle { fill: #16a34a; } .fx-marca.min circle { fill: #e5484d; }
.fx-marca text { font-size: 11px; font-weight: 700; fill: var(--texto); paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; }
.fx-dh { display: flex; align-items: stretch; gap: 3px; height: 170px; }
.fx-dh-mes { flex: 1; display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.fx-dh-arriba, .fx-dh-abajo { flex: 1; display: flex; }
.fx-dh-arriba { align-items: flex-end; border-bottom: 1px solid var(--borde-fuerte); } .fx-dh-abajo { align-items: flex-start; }
.fx-dh-arriba i, .fx-dh-abajo i { width: 100%; border-radius: 3px; min-height: 1px; }
.fx-dh-arriba i { background: #3f8fc9; } .fx-dh-abajo i { background: #c08a3e; }
.fx-dh-mes small { text-align: center; font-size: 10px; color: var(--texto-2); margin-top: 2px; overflow: hidden; }
.fx-ley { margin-top: 4px; } .fx-ley .fx-l-d, .fx-ley .fx-l-h { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin: 0 4px 0 8px; }
.fx-l-d { background: #3f8fc9; } .fx-l-h { background: #c08a3e; }
.fx-datos { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.fx-datos li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-radius: 12px; background: var(--superficie-2); }
.fx-datos li > .icono { color: var(--primario); flex: none; } .fx-datos li > .icono svg { width: 18px; height: 18px; }
.fx-datos .fx-dato { display: flex; flex-direction: column; font-size: 13px; min-width: 0; }
.fx-datos .fx-v { display: block; } .fx-datos .fx-concepto { display: block; }
.fx-datos small { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); font-weight: 700; }
.fx-datos em { font-style: normal; color: var(--texto-2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fx-vacio { display: flex; gap: 10px; align-items: center; padding: 14px; border: 1px dashed var(--borde-fuerte); border-radius: 12px; color: var(--texto-2); }
.fx-vacio p { margin: 0; }
.fx-tabla tr.fx-apertura td { background: color-mix(in srgb, #16a34a 9%, transparent); }
.fx-tabla tr.fx-cierre td { background: color-mix(in srgb, #8a96a6 14%, transparent); }
.fx-tag { margin-left: 6px; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; background: var(--superficie-2); color: var(--texto-2); }
.fx-tabla td.fx-pos { color: #15803d; font-weight: 600; } .fx-tabla td.fx-neg { color: #c2363c; font-weight: 600; } .fx-tabla td.fx-cero { color: var(--tenue); }
/* según el ancho de la vista previa (no de la pantalla) */
@container (max-width: 760px) { .fx-cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); } .fx-graf { grid-template-columns: 1fr; } .fx-dh { height: 130px; } }
@container (max-width: 420px) { .fx-hero-der { align-items: flex-start; } }

/* ================================================================ Aspecto general: acento de cada módulo, gráficos y cabeceras */
:root { --acento: #0b8bc2; --acento-2: #22a06b; }
/* los gráficos toman el color del módulo */
#vista-panel, #detalle { --serie-actual: var(--acento); }
.grafico .g-act { fill: none; stroke: var(--serie-actual); stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round; }
.grafico .g-ant { fill: none; stroke: var(--serie-anterior); stroke-width: 2; stroke-dasharray: 5 4; stroke-linejoin: round; }
.grafico .g-punto { fill: var(--superficie); stroke: var(--serie-actual); stroke-width: 2; pointer-events: none; }
.grafico .g-max { fill: var(--serie-actual); stroke: var(--superficie); }
.grafico .g-max-t { font-size: 11px; font-weight: 700; fill: var(--texto); paint-order: stroke; stroke: var(--superficie); stroke-width: 3px; pointer-events: none; }
/* el título del módulo con su raya de color, las cajas de indicadores con su franja y la pestaña elegida en degradado */
#titulo-modulo::after { content: ''; display: block; width: 54px; height: 4px; border-radius: 2px; margin-top: 5px; background: linear-gradient(90deg, var(--acento), var(--acento-2)); }
#vista-panel .tarjeta { background: linear-gradient(90deg, var(--acento), var(--acento-2)) top / 100% 3px no-repeat, var(--superficie); }
#lista-tabs .lista-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--acento), var(--acento-2)); border-color: transparent; color: #fff; }
.modulo[aria-current="page"] { background: linear-gradient(135deg, color-mix(in srgb, var(--acento) 18%, transparent), color-mix(in srgb, var(--acento-2) 14%, transparent)); color: var(--acento); }

/* Cabecera de color de las vistas previas */
.hp { display: flex; flex-direction: column; gap: 10px; margin: 2px 0 14px; container-type: inline-size; }
.hp-hero { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; padding: 16px 18px; border-radius: 16px; color: #fff;
  background: linear-gradient(135deg, var(--hp1), var(--hp2)); box-shadow: 0 10px 26px -16px var(--hp1); position: relative; overflow: hidden; }
.hp-hero::after { content: ''; position: absolute; right: -40px; top: -60px; width: 200px; height: 200px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.hp-izq { min-width: 0; flex: 1 1 260px; position: relative; z-index: 1; }
.hp-ante { margin: 0; font-size: 11.5px; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
.hp-hero h3 { margin: 4px 0 6px; font-size: clamp(16px, 4cqi, 20px); color: #fff; overflow: hidden; text-overflow: ellipsis; }
.hp-chips { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.hp-chips span { display: inline-flex; align-items: center; gap: 5px; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.16); font-size: 12px; }
.hp-chips svg { width: 13px; height: 13px; }
.hp-der { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; position: relative; z-index: 1; }
.hp-der small { font-size: 11px; text-transform: uppercase; letter-spacing: .6px; opacity: .85; }
.hp-der b { font-size: clamp(20px, 5.4cqi, 30px); line-height: 1.1; font-variant-numeric: tabular-nums; }
.hp-estado { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.22); font-size: 12px; font-weight: 700; }
.hp-cifras { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 8px; }
.hp-cifras > div { padding: 9px 12px; border: 1px solid var(--borde); border-left: 4px solid var(--hp2); border-radius: 12px; background: var(--superficie); display: flex; flex-direction: column; min-width: 0; }
.hp-cifras small { font-size: 11px; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hp-cifras b { font-size: clamp(13px, 3cqi, 16px); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.hp-comp { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 12px; background: var(--superficie); display: flex; flex-direction: column; gap: 6px; }
.hp-comp-t { margin: 0 0 2px; font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--texto-2); }
.hp-barra { display: grid; grid-template-columns: minmax(90px, 1.3fr) 2fr auto; gap: 10px; align-items: center; font-size: 12.5px; }
.hp-barra-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hp-barra-b { height: 10px; border-radius: 5px; background: var(--superficie-2); overflow: hidden; }
.hp-barra-b i { display: block; height: 100%; border-radius: 5px; }
.hp-barra-v { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .hp-barra-v small { margin-left: 6px; color: var(--texto-2); }
.hp-resto { margin: 0; font-size: 12px; color: var(--texto-2); }
@container (max-width: 460px) { .hp-der { align-items: flex-start; } .hp-barra { grid-template-columns: 1fr auto; } .hp-barra-b { grid-column: 1 / -1; grid-row: 2; } }
/* las cifras del periodo de la vista previa, con el mismo aspecto que las de la cabecera de color */
.previa-cifra { border: 1px solid var(--borde); border-left: 4px solid var(--acento); border-radius: 12px; background: var(--superficie); }
.previa-cifra.destacada { border-left-color: var(--acento-2); background: color-mix(in srgb, var(--acento-2) 7%, var(--superficie)); }

/* ================================================================ Vista previa: cabecera fija en color, enlaces en filas, hasta abajo */
.detalle-titulo.dc { display: flex; align-items: center; gap: 14px; flex: 1 0 100%; padding: 12px 16px; border-radius: 14px; color: #fff;
  background: linear-gradient(135deg, var(--hp1), var(--hp2)); box-shadow: 0 8px 22px -16px var(--hp1); position: relative; overflow: hidden; }
.detalle-titulo.dc::after { content: ''; position: absolute; right: -50px; top: -70px; width: 190px; height: 190px; border-radius: 50%; background: rgba(255,255,255,.08); pointer-events: none; }
.dc-foto { flex: none; position: relative; z-index: 1; }
.dc-foto .det-foto { background: #fff; border-radius: 10px; }
.dc-izq { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; position: relative; z-index: 1; }
.dc-tipo { font-size: 11px; letter-spacing: .6px; text-transform: uppercase; opacity: .85; }
.detalle-titulo.dc h2 { margin: 0; font-size: 19px; color: #fff; display: flex; align-items: center; gap: 6px; }
.dc-nombre { font-size: 14px; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 3px; }
.dc-chips > span { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; background: rgba(255,255,255,.17); font-size: 12px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-chips svg { width: 13px; height: 13px; flex: none; }
.dc-chips .acceso { width: 18px; height: 18px; background: rgba(255,255,255,.85); border-radius: 50%; }
.dc-der { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: 3px; position: relative; z-index: 1; }
.dc-der small { font-size: 10.5px; text-transform: uppercase; letter-spacing: .6px; opacity: .85; }
.dc-der b { font-size: clamp(18px, 2.2vw, 26px); line-height: 1.1; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dc-estado { padding: 2px 10px; border-radius: 999px; background: rgba(255,255,255,.24); font-size: 12px; font-weight: 700; white-space: nowrap; }
/* los enlaces a cada apartado, en filas a todo lo ancho; los botones, en su fila */
.detalle-cab .det-saltos { flex: 1 1 100%; flex-direction: row; flex-wrap: wrap; justify-content: flex-start; align-items: center; }
.detalle-cab .det-botones { flex: 1 1 100%; justify-content: flex-end; flex-wrap: wrap; }
/* la vista previa llega siempre hasta abajo de la pantalla (no se queda en el alto de la lista) */
@media (min-width: 1101px) {
  .panel-detalle { max-height: none; height: calc(100vh / var(--zoom, 1) - var(--alto-cabecera, 64px) - 16px); }
}
@container (max-width: 520px) { .detalle-titulo.dc { flex-wrap: wrap; } .dc-der { align-items: flex-start; } }
/* el color de la lista abierta: pestaña elegida, botón principal y chip de estado elegido */
#lista-tabs .lista-tab[aria-selected="true"] { background: linear-gradient(135deg, var(--lista-1, var(--acento)), var(--lista-2, var(--acento-2))); border-color: transparent; color: #fff; }
#vista-panel .panel-lista .btn-primario { background: linear-gradient(135deg, var(--lista-1, var(--acento)), var(--lista-2, var(--acento-2))); border-color: transparent; color: #fff; }
#vista-panel .panel-lista .btn-primario:hover { filter: brightness(1.08); }
#estados .chip[aria-pressed="true"] { background: linear-gradient(135deg, var(--lista-1, var(--acento)), var(--lista-2, var(--acento-2))); border-color: transparent; color: #fff; }
#estados .chip[aria-pressed="true"] small, #estados .chip[aria-pressed="true"] .n { color: rgba(255,255,255,.85); }
#vista-panel .panel-lista.tarjeta, #vista-panel .panel-detalle.tarjeta { background: linear-gradient(90deg, var(--lista-1, var(--acento)), var(--lista-2, var(--acento-2))) top / 100% 3px no-repeat, var(--superficie); }

/* ================================================================ Vista previa: botones en una fila, cajas y gráficos */
.detalle-cab .det-saltos { padding-bottom: 8px; border-bottom: 1px solid color-mix(in srgb, var(--borde) 70%, transparent); }
.detalle-cab .det-botones { flex: 1 1 100%; flex-wrap: nowrap; justify-content: flex-start; margin-left: 0; overflow: hidden; align-items: center; gap: 6px; }
.detalle-cab .det-botones > * { flex: none; }
.detalle-cab .det-botones > .det-fuera { display: none !important; }
.det-mas { position: relative; flex: none; }
.det-mas[hidden] { display: none; }
.det-mas-menu { position: fixed; z-index: 30; margin-top: 4px; min-width: 200px; padding: 6px; border: 1px solid var(--borde); border-radius: 12px;
  background: var(--superficie); box-shadow: var(--sombra); display: flex; flex-direction: column; }
.det-mas-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 0; border-radius: 8px; background: transparent; color: var(--texto); font: inherit; text-align: left; cursor: pointer; }
.det-mas-item:hover { background: var(--superficie-2); }
.det-mas-item .icono { width: 15px; height: 15px; }
.det-vista[aria-pressed="true"] { background: linear-gradient(135deg, var(--lista-1, var(--acento)), var(--lista-2, var(--acento-2))); color: #fff; border-color: transparent; }
.cajas-previa { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; margin-bottom: 12px; }
.caja-previa { padding: 12px 14px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.caja-previa h4 { margin: 0 0 8px; display: flex; align-items: center; gap: 7px; font-size: 12px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-2); }
.caja-previa h4 .icono { width: 16px; height: 16px; color: var(--lista-1, var(--acento)); }
.caja-previa dl.campos { margin: 0; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
.graf-previa { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.anillos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px; }
.anillo { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.anillo svg { width: 64px; height: 64px; flex: none; }
.anillo-fondo { fill: none; stroke: var(--superficie-2); stroke-width: 9; }
.anillo-valor { fill: none; stroke-width: 9; stroke-linecap: round; transition: stroke-dasharray .6s ease; }
.anillo.aviso .anillo-valor { stroke: #f59e0b; } .anillo.mal .anillo-valor { stroke: #e5484d; }
.anillo-t { font-size: 15px; font-weight: 800; fill: var(--texto); }
.anillo > span { display: flex; flex-direction: column; min-width: 0; }
.anillo b { font-size: 13px; } .anillo small { font-size: 12px; color: var(--texto-2); }
.graf-linea { padding: 10px 12px; border: 1px solid var(--borde); border-radius: 14px; background: var(--superficie); }
.graf-linea-cab { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.graf-linea-cab h4 { margin: 0; font-size: 13px; }
.graf-linea .grafico { height: 200px; }
.det-saltos .det-salto.elegido { background: linear-gradient(135deg, var(--lista-1, var(--acento)), var(--lista-2, var(--acento-2))); color: #fff; border-color: transparent; }
.det-saltos .det-salto.elegido small { color: rgba(255,255,255,.85); }
/* tablas de la vista previa: tan altas como sus líneas; si pasan de lo que se ve de la vista previa, se desplazan dentro */
.panel-detalle .sub-bloque .tabla-scroll { max-height: calc(100vh / var(--zoom, 1) - var(--alto-cabecera, 64px) - var(--alto-fija-previa, 170px) - 96px); }
@media (max-width: 1100px) { .panel-detalle .sub-bloque .tabla-scroll { max-height: 70vh; } }
/* selector de la forma del gráfico (dentro de la leyenda de cada gráfico) */
.tipo-grafico-l { display: inline-flex; align-items: center; gap: 4px; margin-left: 6px; padding: 2px 4px 2px 8px; border: 1px solid var(--borde); border-radius: 999px; background: var(--superficie); cursor: pointer; }
.tipo-grafico-l .icono { width: 14px; height: 14px; color: var(--acento); }
.tipo-grafico { border: 0; background: transparent; font: inherit; font-size: 12px; font-weight: 600; color: var(--texto); cursor: pointer; padding: 1px 2px; }
.tipo-grafico:focus-visible { outline: 2px solid var(--acento); border-radius: 6px; }

/* sombra suave en las cajas de la vista previa; en los temas oscuros, la del tema */
:root { --sombra-caja: 0 1px 2px rgba(11, 27, 43, .06), 0 4px 14px -4px rgba(11, 27, 43, .16); }
html[data-piel="ibm"], html[data-piel="amber"], html[data-piel="medianoche"], html[data-piel="live-noche"] { --sombra-caja: var(--sombra); }
.caja-previa, .hp-cifras > div, .hp-comp, .anillo, .graf-linea, .fx-cifras > div, .fx-graf > div, .fx-datos li, #detalle .sub-bloque, #detalle .hd-caja, #detalle .pa-caja {
  box-shadow: var(--sombra-caja); transition: box-shadow .2s ease;
}
.caja-previa:hover, #detalle .hd-caja:hover, #detalle .pa-caja:hover, .hp-cifras > div:hover, .hp-comp:hover, .anillo:hover, .graf-linea:hover, .fx-cifras > div:hover, .fx-graf > div:hover, .fx-datos li:hover {
  box-shadow: 0 2px 4px rgba(11, 27, 43, .08), 0 10px 22px -8px rgba(11, 27, 43, .28);
}

/* barra horizontal de las tablas invisible (guarda su hueco): aparece al acercar el ratón al borde de abajo (ver-barra-h, app.js) */
.tabla-scroll::-webkit-scrollbar { width: 10px; height: 12px; }
.tabla-scroll::-webkit-scrollbar-thumb:vertical { background: color-mix(in srgb, var(--texto-2) 45%, transparent); border-radius: 8px; border: 2px solid transparent; background-clip: padding-box; }
.tabla-scroll::-webkit-scrollbar-track:horizontal, .tabla-scroll::-webkit-scrollbar-corner { background: transparent; }
.tabla-scroll::-webkit-scrollbar-thumb:horizontal { background: transparent; border-radius: 8px; border: 3px solid transparent; background-clip: padding-box; }
.tabla-scroll.ver-barra-h::-webkit-scrollbar-track:horizontal { background: var(--superficie-2); }
/* con el color de la lista abierta (el de sus botones: Pedidos, Albaranes…) */
.tabla-scroll.ver-barra-h::-webkit-scrollbar-thumb:horizontal { background-color: color-mix(in srgb, var(--lista-1, var(--primario)) 75%, transparent); }
.tabla-scroll.ver-barra-h::-webkit-scrollbar-thumb:horizontal:hover, .tabla-scroll.ver-barra-h::-webkit-scrollbar-thumb:horizontal:active { background-color: var(--lista-1, var(--primario)); }
.tabla-scroll::-webkit-scrollbar-thumb:vertical:hover, .tabla-scroll::-webkit-scrollbar-thumb:vertical:active { background-color: var(--lista-1, var(--primario)); }

/* usuarios: activar en Enterprise Live / desactivar */
.u-desactivado { margin-left: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11.5px; font-weight: 700; background: var(--critico-fondo); color: var(--texto-critico); }
.u-linea .u-activar, .u-linea .u-desactivar { padding: 4px 10px; font-size: 12.5px; white-space: nowrap; }
.u-linea .u-activar { background: var(--primario); border-color: transparent; color: #fff; }
.u-linea .u-desactivar { color: var(--texto-2); }
.u-linea .u-desactivar:hover { color: var(--texto-critico); border-color: var(--texto-critico); }
.u-nota-activar { font-size: 12.5px; color: var(--texto-2); }
@media (min-width: 761px) {
  .usuario-fila .u-linea { flex-wrap: nowrap; }
  .usuario-fila .u-linea .u-login { min-width: 0; }
  .usuario-fila .u-linea .permisos-resumen { min-width: 0; flex: 0 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .usuario-fila .u-linea .u-papel, .usuario-fila .u-linea .u-lapiz, .usuario-fila .u-linea .u-activar, .usuario-fila .u-linea .u-desactivar { flex: none; }
}

/* superadministrador en la conexión de otro cliente: aviso rojo arriba (parpadea) y los mandos del periodo en rojo */
#aviso-otro-cliente { position: sticky; top: 0; z-index: 60; box-sizing: border-box; display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap;
  padding: 8px 16px; background: #d92d20; color: #fff; font-size: 14px; font-weight: 600; text-align: center; }
#aviso-otro-cliente[hidden] { display: none; }
#aviso-otro-cliente .aoc-txt { display: inline-flex; align-items: center; gap: 8px; animation: aoc-parpadeo 1.1s ease-in-out infinite; }
#aviso-otro-cliente .icono, #aviso-otro-cliente .icono svg { width: 18px; height: 18px; }
#aviso-otro-cliente .aoc-remoto { display: inline-flex; align-items: center; gap: 6px; padding: 2px 10px; border-radius: 6px; background: #fff; color: #b42318;
  font-weight: 800; letter-spacing: .08em; }
/* marco rojo alrededor de toda la ventana mientras se está en remoto */
body.otro-cliente::after { content: ""; position: fixed; inset: 0; border: 4px solid #d92d20; pointer-events: none; z-index: 9999; }
#aviso-otro-cliente .aoc-volver { border: 1px solid #fff; background: #fff; color: #b42318; font: inherit; font-weight: 700; padding: 4px 12px; border-radius: 8px; cursor: pointer; }
#aviso-otro-cliente .aoc-volver:hover { background: #fee4e2; }
@keyframes aoc-parpadeo { 0%, 100% { opacity: 1; } 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) { #aviso-otro-cliente .aoc-txt { animation: none; } }
body.otro-cliente #actualizar, body.otro-cliente [data-cm-actualizar], body.otro-cliente #presets .chip[aria-pressed="true"] {
  background: #d92d20; border-color: #d92d20; color: #fff; }
body.otro-cliente #presets .chip:not([aria-pressed="true"]) { border-color: #f04438; color: #b42318; }
body.otro-cliente .fecha input { border-color: #f04438; color: #b42318; }
body.otro-cliente #selector-tenant { border-color: #d92d20; background: #fee4e2; color: #b42318; }
body.otro-cliente #selector-tenant select { color: #b42318; }
/* la cabecera (también fija) va justo debajo del aviso */
body.otro-cliente .cabecera { top: var(--alto-aviso, 38px); }
/* «Enterprise Live» y el Saturno en rojo */
body.otro-cliente .cabecera-marca .marca img { filter: brightness(0) saturate(100%) invert(24%) sepia(86%) saturate(3960%) hue-rotate(352deg) brightness(92%) contrast(95%); }
body.otro-cliente .cabecera-marca .marca-by { color: #d92d20; font-weight: 700; }

/* tablas auxiliares como las pantallas principales: la lista a la izquierda (buscar, Columnas, Excel) y el registro a la derecha */
.dialogo-aux:has(.aux-dos), .dialogo-aux:has(.aux-dos):has(.aux-contenido), .dialogo-aux:has(.aux-dos):has(.aux-grupo) {
  width: min(1560px, calc(calc(100vw / var(--zoom, 1)) - 32px)); max-width: none;
  height: min(900px, calc(calc(100vh / var(--zoom, 1)) - 40px)); }
.dialogo-aux:has(.aux-dos) .dialogo-cuerpo { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.aux-dos { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); border-top: 1px solid var(--borde); }
.aux-lado-lista { min-width: 0; min-height: 0; display: flex; flex-direction: column; border-right: 1px solid var(--borde); background: var(--superficie); }
.aux-lado-lista .la-barra { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 12px 16px 0; }
.aux-lado-lista .la-barra .buscador { flex: 1 1 180px; min-width: 0; }
.aux-lado-lista .la-sub { padding: 0 16px; }
.aux-lado-lista .la-scroll { margin: 8px 16px 16px !important; }
.aux-lado-lista .la-tabla tbody tr.sel { background: var(--verde-fila); box-shadow: inset 3px 0 0 var(--primario); }
.aux-lado-ficha { min-width: 0; min-height: 0; display: flex; flex-direction: column; overflow: hidden; }
.aux-lado-ficha > .aux-cuerpo { flex: 1 1 auto; min-height: 0; overflow: auto; align-content: start; margin: 12px 16px; }
.aux-lado-ficha .aux-modo { margin: 12px 16px 0; }
.aux-lado-ficha .fc-pie { flex: none; }
/* pestañas del registro arriba (en fila), como en las listas principales */
.aux-lado-ficha .aux-contenido { display: grid; grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); margin-top: 10px; }
.aux-lado-ficha .aux-contenido .aux-pestanas { flex-direction: row; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--borde); padding: 6px 12px; gap: 4px; }
.aux-lado-ficha .aux-contenido .aux-pestanas .fc-tab { width: auto; flex: none; }
.aux-lado-ficha .aux-contenido .aux-pestanas .fc-tab-txt small { display: none; }
.aux-lado-ficha .aux-contenido .aux-cuerpo { margin: 12px 16px; }
@media (max-width: 900px) {
  .dialogo-aux:has(.aux-dos) { height: calc(100vh - 24px); }
  .aux-dos { grid-template-columns: 1fr; grid-template-rows: minmax(220px, 40%) minmax(0, 1fr); }
  .aux-lado-lista { border-right: 0; border-bottom: 1px solid var(--borde); }
}

/* Administración › Parametrizaciones */
.param-fila { display: flex; align-items: flex-start; gap: 12px; cursor: pointer; }
.param-fila > span:last-child { display: flex; flex-direction: column; gap: 2px; }
.param-fila small { color: var(--texto-2); font-size: 12.5px; }
/* descripciones y textos largos: la fila entera */
.aux-cuerpo > .aux-principal { grid-column: 1 / -1; }
.aux-cuerpo .fc-rejilla > .campo-ficha.ancho { grid-column: 1 / -1; }