/*
  mesa.css — el SISTEMA DE DISEÑO de la Mesa de Validación (rediseño de
  septiembre de 2026, decidido por Fernando el 24-sep).

  Se carga DESPUÉS del <style> de index.html y manda sobre él: aquí viven los
  tokens de forma (radios, espacios, anchos), los controles (botones
  rectangulares, desplegables, campos), la cabecera de página, las pestañas,
  la tabla común con su paginador, la barra de filtros y el menú por grupos.
  Los colores siguen siendo los de `:root` de index.html (claro y oscuro).

  Reglas de la casa (Fernando, 24-sep-2026):
   · botones rectangulares con la esquina un poco redondeada (6 px), nunca
     óvalos; las etiquetas de estado, 4 px;
   · donde se elige entre opciones equivalentes va un desplegable, no una
     ristra de botones;
   · los listados son tablas paginadas, ordenables y filtrables, con el mismo
     formato en todas las páginas, y el ancho de cada columna según su
     contenido; lo que tiene forma de ficha sigue siendo ficha;
   · se usa el ancho completo de la pantalla con un poco de margen;
   · las fichas de detalle pueden llevar pestañas por criterio funcional;
   · la página de KPIs («Hoy») no se toca.
*/

:root {
  --r-ctl: 6px;        /* botones, campos, desplegables, filtros */
  --r-tag: 4px;        /* etiquetas de estado, contadores */
  --r-card: 10px;      /* tarjetas, paneles, tablas */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;
  --stage-max: 1760px; /* ancho completo con margen; en un monitor enorme no se estira sin fin */
  --font-ui: "Open Sans", ui-sans-serif, system-ui, sans-serif;
  --font-title: "Montserrat", ui-sans-serif, system-ui, sans-serif;
  --font-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;
  --shadow-card: 0 1px 2px rgba(5, 22, 42, 0.05), 0 8px 24px -16px rgba(5, 22, 42, 0.25);
  --shadow-pop: 0 4px 10px rgba(5, 22, 42, 0.10), 0 24px 48px -20px rgba(5, 22, 42, 0.35);
  --mu-dur: 160ms;
}

/* ───────────────────────────── escenario: ancho completo ───────────────── */
main.stage { padding: 22px 32px 72px; }
.stage-inner, .stage-inner.wide { max-width: var(--stage-max); margin: 0 auto; width: 100%; }
@media (min-width: 1200px) { main.stage { padding: 24px 40px 80px; } }
@media (max-width: 780px) { main.stage { padding: 16px 16px 64px; } }

/* La vista entra con un deslizamiento corto: orienta sin estorbar. */
.stage-inner { animation: mu-entrar var(--mu-dur) ease-out; }
@keyframes mu-entrar { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stage-inner { animation: none; } }

/* ───────────────────────────── controles ───────────────────────────────── */
.btn { border-radius: var(--r-ctl); font-size: 0.98rem; font-weight: 700; padding: 8px 14px; line-height: 1.25;
       transition: background var(--mu-dur), border-color var(--mu-dur), color var(--mu-dur), transform var(--mu-dur); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn-primary { width: auto; margin-top: 0; }
.btn-primary.block, .login-card .btn-primary, .auth-card .btn-primary { width: 100%; }
.btn-ghost { background: var(--surface); }
.btn-ghost:hover { background: var(--surface-sunken); }
.btn-sm { font-size: 0.9rem; padding: 5px 10px; }
.btn-peligro { background: var(--critical-soft); color: var(--critical); border-color: transparent; }
.btn-peligro:hover:not(:disabled) { background: var(--critical); color: #fff; }

/* Campos: mismo radio y misma altura en toda la Mesa. */
.field input, .field select, select, textarea, input[type="text"], input[type="search"], input[type="email"],
input[type="password"], input[type="number"], input[type="date"] {
  border-radius: var(--r-ctl); font-family: var(--font-ui);
}
select, .field select, .mu-campo select {
  appearance: none; -webkit-appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--ink-faint) 50%), linear-gradient(135deg, var(--ink-faint) 50%, transparent 50%);
  background-position: calc(100% - 16px) calc(50% - 2px), calc(100% - 11px) calc(50% - 2px);
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px;
}

/* Etiquetas (estado, contadores): rectángulo pequeño de 4 px, no óvalo. */
.state-chip, .tag-chip, .kpi-chip, .soon, .mu-tag, .crm-chip, .crm-tag {
  border-radius: var(--r-tag) !important; font-weight: 700; letter-spacing: 0.01em; white-space: nowrap;
}
/* Las ristras de botones que aún no se han convertido a desplegable se ven
   rectangulares y saltan de línea mientras tanto. */
.duda-filters { flex-wrap: wrap; row-gap: 8px; }
.duda-filters button, .crm-filtros button, .segmentado button { border-radius: var(--r-ctl); padding: 6px 12px; font-size: 0.93rem; }

/* ───────────────────────────── cabecera de página ──────────────────────── */
.mu-cabecera { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4);
               margin: 0 0 var(--sp-5); padding-bottom: var(--sp-4); border-bottom: 1px solid var(--line); flex-wrap: wrap; }
.mu-cabecera .mu-cab-texto { min-width: 0; flex: 1 1 420px; }
.mu-cabecera h1 { font-family: var(--font-title); font-size: 1.55rem; font-weight: 800; letter-spacing: -0.01em; margin: 0; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.mu-cabecera h1 .mu-cifra { font-family: var(--font-ui); font-size: 0.95rem; font-weight: 700; color: var(--ink-faint); background: var(--surface-sunken); border-radius: var(--r-tag); padding: 2px 8px; }
.mu-cabecera .mu-sub { color: var(--ink-soft); font-size: 1.0rem; margin: 6px 0 0; max-width: 92ch; line-height: 1.5; }
.mu-cabecera .mu-acciones { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: center; justify-content: flex-end; flex: 0 0 auto; }
.mu-cabecera .crumbs { margin: 0 0 6px; flex-basis: 100%; }
.mu-cabecera .page-head { margin: 0; }
.seccion-sin-cabecera + .mu-cabecera { margin-top: 0; }

/* ───────────────────────────── barra de filtros ────────────────────────── */
.mu-filtros { display: flex; align-items: flex-end; gap: var(--sp-3); flex-wrap: wrap; margin: 0 0 var(--sp-4); }
.mu-campo { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mu-campo > label, .mu-campo > .mu-etq { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); }
.mu-campo select, .mu-campo input { height: 36px; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface);
  color: var(--ink); font-size: 0.95rem; padding: 0 10px; font-family: var(--font-ui); }
.mu-campo select:focus, .mu-campo input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
.mu-campo.mu-buscar { flex: 1 1 260px; max-width: 460px; }
.mu-campo.mu-buscar input { padding-left: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%237a8ca0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center; }
/* Desplegable de VARIAS a la vez (Estado de las dudas, 19-oct-2026): un
   <details> con casillas. La cabecera imita al <select>; el panel flota sobre
   la tabla sin empujar las filas. */
.mu-multi { position: relative; }
.mu-multi > summary { list-style: none; cursor: pointer; height: 36px; display: flex; align-items: center; gap: 6px;
  border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface);
  color: var(--ink); font-size: 0.95rem; padding: 0 10px; font-family: var(--font-ui); }
.mu-multi > summary::-webkit-details-marker { display: none; }
.mu-multi > summary:focus-visible { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
.mu-multi > summary.mu-multi-hay { border-color: var(--accent); color: var(--accent); font-weight: 600; }
.mu-multi .mu-multi-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mu-multi .mu-multi-caret { margin-left: auto; color: var(--ink-faint); font-size: 0.8rem; }
.mu-multi[open] .mu-multi-caret { transform: rotate(180deg); }
.mu-multi .mu-multi-panel { position: absolute; z-index: 5; top: calc(100% + 4px); left: 0; min-width: 100%; white-space: nowrap;
  background: var(--surface); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); box-shadow: var(--shadow-card);
  padding: 6px; display: flex; flex-direction: column; gap: 2px; }
.mu-multi .mu-multi-op { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--r-ctl);
  cursor: pointer; font-size: 0.95rem; color: var(--ink); text-transform: none; letter-spacing: 0; font-weight: 400; }
.mu-multi .mu-multi-op:hover { background: var(--surface-sunken); }
.mu-multi .mu-multi-op input { height: auto; width: auto; margin: 0; }
.mu-filtros .mu-extra { margin-left: auto; display: flex; gap: var(--sp-2); align-items: flex-end; }
.mu-filtros .mu-limpiar, .mu-tabla-barra .mu-limpiar { all: unset; cursor: pointer; color: var(--accent); font-size: 0.9rem; font-weight: 600; height: 36px; display: inline-flex; align-items: center; padding: 0 4px; }
.mu-filtros .mu-limpiar:hover, .mu-tabla-barra .mu-limpiar:hover { text-decoration: underline; }
/* Con los filtros dentro de la tabla (24-sep), «Quitar filtros» vive en la barra y salía como botón nativo. */
.mu-tabla-barra .mu-limpiar { height: 30px; }
.mu-tabla-barra .mu-limpiar:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 4px; }
.mu-resumen { font-size: 0.9rem; color: var(--ink-faint); margin: -8px 0 10px; }

/* ───────────────────────────── tabla común ─────────────────────────────── */
.mu-tabla-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.mu-tabla-scroll { overflow-x: auto; }
table.mu-tabla { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 0.97rem; table-layout: auto; }
table.mu-tabla th { position: sticky; top: 0; z-index: 1; background: var(--surface-sunken); color: var(--ink-faint);
  font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; text-align: left;
  padding: 0; border-bottom: 1px solid var(--line); white-space: nowrap; }
table.mu-tabla th > span, table.mu-tabla th > button { display: flex; align-items: center; gap: 6px; padding: 10px 12px; width: 100%; box-sizing: border-box; }
table.mu-tabla th > button { all: unset; box-sizing: border-box; display: flex; align-items: center; gap: 6px; padding: 10px 12px; width: 100%; cursor: pointer; color: inherit; font: inherit; text-transform: inherit; letter-spacing: inherit; }
table.mu-tabla th > button:hover { color: var(--ink); background: var(--line); }
table.mu-tabla th > button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
table.mu-tabla th .mu-orden { opacity: 0.35; font-size: 0.7rem; }
table.mu-tabla th[aria-sort] .mu-orden { opacity: 1; color: var(--accent); }
table.mu-tabla td { padding: 9px 12px; border-bottom: 1px solid var(--line); color: var(--ink-soft); vertical-align: middle; }
table.mu-tabla tbody tr:last-child td { border-bottom: none; }
table.mu-tabla tbody tr:nth-child(even) td { background: color-mix(in srgb, var(--surface-sunken) 45%, var(--surface)); }
table.mu-tabla tbody tr.mu-fila-ir { cursor: pointer; }
table.mu-tabla tbody tr.mu-fila-ir:hover td { background: var(--accent-soft); }
table.mu-tabla tbody tr:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
/* Anchos por tipo de contenido: la columna mide lo que mide lo que lleva. */
table.mu-tabla .mu-col-codigo { font-family: var(--font-mono); font-size: 0.9rem; white-space: nowrap; width: 1%; color: var(--ink); }
table.mu-tabla .mu-col-texto { color: var(--ink); font-weight: 600; min-width: 220px; }
table.mu-tabla td.mu-col-texto { max-width: 520px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
table.mu-tabla .mu-col-largo { min-width: 260px; }
table.mu-tabla .mu-col-estado { white-space: nowrap; width: 1%; }
table.mu-tabla .mu-col-fecha { white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
table.mu-tabla .mu-col-num { text-align: right; white-space: nowrap; width: 1%; font-variant-numeric: tabular-nums; }
table.mu-tabla .mu-col-persona { white-space: nowrap; width: 1%; }
table.mu-tabla .mu-col-acciones { text-align: right; white-space: nowrap; width: 1%; }
table.mu-tabla .mu-col-etiquetas { white-space: nowrap; }
table.mu-tabla td .state-chip { font-size: 0.84rem; }
table.mu-tabla .mu-vacia td { text-align: center; padding: 40px 20px; color: var(--ink-faint); }
.mu-tabla-pie { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 8px 12px;
  border-top: 1px solid var(--line); background: var(--surface-sunken); font-size: 0.9rem; color: var(--ink-faint); flex-wrap: wrap; }
.mu-pag { display: flex; align-items: center; gap: 6px; }
.mu-pag button { all: unset; box-sizing: border-box; cursor: pointer; min-width: 30px; height: 30px; padding: 0 8px; border-radius: var(--r-ctl);
  display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); font-weight: 700; font-size: 0.9rem; border: 1px solid transparent; }
.mu-pag button:hover:not(:disabled) { background: var(--surface); border-color: var(--line-strong); color: var(--ink); }
.mu-pag button[aria-current="page"] { background: var(--accent); color: var(--accent-ink); }
.mu-pag button:disabled { opacity: 0.4; cursor: default; }
.mu-pag .mu-puntos { padding: 0 4px; }
.mu-por-pagina { display: inline-flex; align-items: center; gap: 6px; }
.mu-por-pagina select { height: 30px; padding: 0 26px 0 8px; font-size: 0.88rem; border-radius: var(--r-ctl); border: 1px solid var(--line-strong); background-color: var(--surface); color: var(--ink); }

/* Listado de fichas (dudas, mapa…): mismos filtros y paginador, tarjetas debajo. */
.mu-fichas { display: grid; gap: var(--sp-3); }
.mu-fichas.mu-fichas-2 { grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); }
.mu-fichas.mu-fichas-3 { grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }
.mu-pie-suelto { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); padding: 10px 2px; font-size: 0.9rem; color: var(--ink-faint); flex-wrap: wrap; }

/* ───────────────────────────── pestañas ────────────────────────────────── */
.mu-pestanas { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin: 0 0 var(--sp-5); overflow-x: auto; scrollbar-width: none; }
.mu-pestanas::-webkit-scrollbar { display: none; }
.mu-pestanas [role="tab"] { all: unset; box-sizing: border-box; cursor: pointer; padding: 10px 14px; font-weight: 700; font-size: 0.97rem; color: var(--ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  transition: color var(--mu-dur), border-color var(--mu-dur); }
.mu-pestanas [role="tab"]:hover { color: var(--ink); }
.mu-pestanas [role="tab"][aria-selected="true"] { color: var(--accent); border-bottom-color: var(--accent); }
.mu-pestanas [role="tab"]:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; border-radius: var(--r-ctl); }
.mu-pestanas .mu-cifra { font-size: 0.8rem; font-weight: 700; background: var(--surface-sunken); color: var(--ink-faint); border-radius: var(--r-tag); padding: 1px 6px; }
.mu-pestanas [role="tab"][aria-selected="true"] .mu-cifra { background: var(--accent-soft); color: var(--accent); }
.mu-panel[role="tabpanel"] { animation: mu-entrar var(--mu-dur) ease-out; }

/* ───────────────────────────── ficha de detalle ────────────────────────── */
.mu-ficha { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); }
.mu-ficha.mu-ficha-lateral { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
@media (max-width: 1100px) { .mu-ficha.mu-ficha-lateral { grid-template-columns: minmax(0, 1fr); } }
.mu-seccion { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 18px 20px; box-shadow: var(--shadow-card); }
.mu-seccion > h3, .mu-seccion > .mu-seccion-cab { font-family: var(--font-ui); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--ink-faint); font-weight: 700; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.mu-seccion > .mu-seccion-cab .mu-acciones { margin-left: auto; display: flex; gap: 6px; }
.mu-datos { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 10px 18px; }
.mu-dato { min-width: 0; }
.mu-dato .mu-etq { font-size: 0.76rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-faint); font-weight: 700; }
.mu-dato .mu-val { color: var(--ink); font-size: 0.98rem; overflow-wrap: anywhere; }
.mu-datos.mu-datos-lista { grid-template-columns: 1fr; gap: 8px; }

/* Historial / conversación: la línea de tiempo cuelga del elemento, debajo,
   y cada mensaje enseña de quién es y cuándo. */
.mu-hilo { display: flex; flex-direction: column; gap: var(--sp-3); position: relative; padding-left: 22px; }
.mu-hilo::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line); border-radius: 2px; }
.mu-hilo-item { position: relative; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; }
.mu-hilo-item::before { content: ""; position: absolute; left: -19px; top: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--line-strong); border: 2px solid var(--surface); }
.mu-hilo-item.mu-propio { border-color: var(--accent-soft-line); background: var(--accent-soft); }
.mu-hilo-item.mu-propio::before { background: var(--accent); }
.mu-hilo-item.mu-sistema { background: transparent; border-style: dashed; color: var(--ink-faint); font-size: 0.92rem; }
.mu-hilo-cab { display: flex; align-items: baseline; gap: 10px; font-size: 0.88rem; color: var(--ink-faint); margin-bottom: 6px; flex-wrap: wrap; }
.mu-hilo-cab b { color: var(--ink); }
.mu-hilo-cab time { margin-left: auto; font-variant-numeric: tabular-nums; }

/* ───────────────────────────── tarjetas con relieve ────────────────────── */
.mu-tarjeta { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-card);
  transition: transform var(--mu-dur), box-shadow var(--mu-dur), border-color var(--mu-dur); transform-style: preserve-3d; }
.mu-tarjeta.mu-ir { cursor: pointer; }
.mu-tarjeta.mu-ir:hover { transform: translateY(-2px) perspective(900px) rotateX(1.2deg); box-shadow: var(--shadow-pop); border-color: var(--accent-soft-line); }
@media (prefers-reduced-motion: reduce) { .mu-tarjeta.mu-ir:hover { transform: none; } }

/* ───────────────────────────── menú lateral por grupos ─────────────────── */
.rail { padding: 18px 14px; gap: 16px; }
.rail-scroll { gap: 6px !important; }
.rail-buscar { position: relative; margin: 2px 0 6px; }
.rail-buscar input { width: 100%; box-sizing: border-box; height: 34px; border: 1px solid var(--line); border-radius: var(--r-ctl); background: var(--paper);
  color: var(--ink); font-size: 0.92rem; padding: 0 10px 0 30px; font-family: var(--font-ui);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='15' height='15' viewBox='0 0 24 24' fill='none' stroke='%237a8ca0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m20 20-3.5-3.5'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: 9px center; }
.rail-buscar input:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }

/* El atajo ⌘K dentro del buscador del menú (paleta.js, 25-sep-2026). */
.rail-buscar-atajo { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); height: 22px; padding: 0 6px;
  font: 600 0.72rem/1 var(--font-ui, system-ui); color: var(--ink-faint); background: var(--surface); border: 1px solid var(--line);
  border-radius: 5px; cursor: pointer; }
.rail-buscar-atajo:hover { color: var(--ink); border-color: var(--line-strong); }
.rail-buscar-atajo:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.rail-buscar:has(.rail-buscar-atajo) input { padding-right: 48px; }
.rail-grupo { border-radius: var(--r-ctl); }
.rail-grupo-cab { all: unset; box-sizing: border-box; cursor: pointer; display: flex; align-items: center; gap: 6px; width: 100%;
  padding: 7px 10px; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.09em; color: var(--ink-faint); font-weight: 700; border-radius: var(--r-ctl); }
.rail-grupo-cab:hover { color: var(--ink); background: var(--surface-sunken); }
.rail-grupo-cab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.rail-grupo-cab .mu-caret { margin-left: auto; transition: transform var(--mu-dur); font-size: 0.7rem; opacity: 0.8; }
.rail-grupo-cab[aria-expanded="false"] .mu-caret { transform: rotate(-90deg); }
.rail-grupo-cab .mu-cifra { font-size: 0.74rem; background: var(--accent-soft); color: var(--accent); border-radius: var(--r-tag); padding: 0 5px; letter-spacing: 0; }
.rail-grupo > .rail-nav { padding: 2px 0 4px 4px; }
.rail-grupo[data-plegado="1"] > .rail-nav { display: none; }
.rail-nav button.nav-item, .rail-nav a.nav-item { padding: 7px 10px; font-size: 0.98rem; font-weight: 600; border-radius: var(--r-ctl);
  transition: background var(--mu-dur), color var(--mu-dur); }
.rail-nav .nav-item .mu-cifra { margin-left: auto; font-size: 0.78rem; background: var(--surface-sunken); color: var(--ink-faint); border-radius: var(--r-tag); padding: 1px 6px; font-weight: 700; }
.rail-nav button.nav-item.active .mu-cifra { background: var(--accent); color: var(--accent-ink); }
.rail-nav .nav-item.nav-hoy { font-family: var(--font-title); font-weight: 800; font-size: 1.02rem; }
.rail-group-label { padding: 6px 10px 2px; }

/* ───────────────────────────── utilidades ──────────────────────────────── */
.mu-fila { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.mu-derecha { margin-left: auto; }
.mu-mono { font-family: var(--font-mono); font-size: 0.92em; }
.mu-suave { color: var(--ink-faint); }
.mu-vacio { text-align: center; padding: 44px 20px; color: var(--ink-faint); background: var(--surface); border: 1px dashed var(--line-strong); border-radius: var(--r-card); }
.mu-oculto { display: none !important; }

/* ───────────────────────────── red del modelo (red.js) ─────────────────── */
.red-cuerpo { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); align-items: stretch; }
.red-cuerpo.con-panel { grid-template-columns: minmax(0, 1fr) 380px; }
@media (max-width: 1000px) { .red-cuerpo.con-panel { grid-template-columns: minmax(0, 1fr); } }
.red-marco { position: relative; min-height: 520px; height: calc(100vh - 300px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; box-shadow: var(--shadow-card); }
.red-lienzo { position: absolute; inset: 0; }
.red-lienzo canvas { outline: none; }
.red-cargando { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--ink-faint); font-weight: 600; }
.red-etiqueta { font-family: var(--font-ui); font-size: 0.85rem; line-height: 1.35; max-width: 320px; background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); border-radius: var(--r-ctl); padding: 6px 9px; box-shadow: var(--shadow-pop); }
.red-buscar { height: 34px; width: 280px; max-width: 46vw; border: 1px solid var(--line-strong); border-radius: var(--r-ctl); background: var(--surface); color: var(--ink); padding: 0 10px; font-size: 0.93rem; font-family: var(--font-ui); }
.red-buscar:focus { border-color: var(--accent); outline: 2px solid var(--accent-soft); outline-offset: 0; }
.red-capas { display: flex; align-items: center; gap: 6px 14px; flex-wrap: wrap; margin: 0 0 var(--sp-3); }
.red-capa { display: inline-flex; align-items: center; gap: 7px; font-size: 0.92rem; font-weight: 600; color: var(--ink-soft); cursor: pointer; padding: 4px 8px; border-radius: var(--r-ctl); border: 1px solid transparent; }
.red-capa:hover { background: var(--surface-sunken); }
.red-capa input { accent-color: var(--capa, var(--accent)); margin: 0; }
.red-punto { width: 10px; height: 10px; border-radius: 50%; background: var(--capa, var(--accent)); flex-shrink: 0; display: inline-block; box-shadow: 0 0 6px var(--capa, transparent); }
.red-leyenda { display: flex; gap: 6px 16px; flex-wrap: wrap; margin-top: var(--sp-3); font-size: 0.85rem; color: var(--ink-faint); }
.red-ley-item { display: inline-flex; align-items: center; gap: 6px; }
.red-ley-item i { display: inline-block; width: 18px; height: 3px; border-radius: 2px; }
.red-panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px 18px; box-shadow: var(--shadow-card); overflow-y: auto; max-height: calc(100vh - 300px); min-height: 520px; animation: mu-entrar var(--mu-dur) ease-out; }
.red-panel-cab { display: flex; align-items: flex-start; gap: 10px; }
.red-panel-cab .red-punto { margin-top: 6px; width: 12px; height: 12px; }
.red-panel-titulo { font-family: var(--font-mono); font-size: 1.05rem; margin: 2px 0; color: var(--ink); }
.red-panel-sub { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }
.red-grupo { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.red-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.red-enlace { all: unset; cursor: pointer; display: flex; align-items: baseline; gap: 6px; padding: 4px 6px; border-radius: var(--r-ctl); font-size: 0.9rem; color: var(--ink-soft); width: 100%; box-sizing: border-box; }
.red-enlace:hover { background: var(--accent-soft); color: var(--ink); }
.red-enlace b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); white-space: nowrap; }
.red-enlace > span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.red-criterios { margin: 6px 0 0; padding-left: 20px; font-size: 0.92rem; color: var(--ink-soft); display: flex; flex-direction: column; gap: 6px; }
.red-criterios b { font-family: var(--font-mono); font-weight: 500; color: var(--ink); }
.red-md p { margin: 0 0 4px; display: inline; } .red-md p + p { display: block; margin-top: 4px; }

/* ───────────────────────────── móvil: el menú se pliega, no desaparece ───── */
.mu-menu-boton { display: none; }
@media (max-width: 780px) {
  .app-shell { grid-template-columns: 1fr; }
  .rail { display: flex !important; position: fixed; inset: 0 auto 0 0; width: min(300px, 86vw); z-index: 40; transform: translateX(-104%);
          transition: transform 220ms ease; box-shadow: var(--shadow-pop); }
  body.menu-abierto .rail { transform: none; }
  .mu-menu-boton { display: inline-flex; align-items: center; gap: 8px; position: sticky; top: 0; z-index: 30; margin: -8px 0 12px; height: 40px;
    border: 1px solid var(--line); background: var(--surface); color: var(--ink); border-radius: var(--r-ctl); padding: 0 12px; font-weight: 700; cursor: pointer; }
  .mu-menu-velo { position: fixed; inset: 0; background: rgba(5, 22, 42, 0.45); z-index: 35; }
  .crm-subnav { display: flex; }
}

/* ───────────────────────────── tablas en móvil: una fila, una tarjeta ────── */
/* A 400 px una tabla de cinco columnas solo se leía con scroll lateral y la
   columna larga se quedaba en 60 px (25-sep-2026). Debajo de 640 px cada fila
   es una tarjeta: la primera columna de texto hace de título y el resto va
   con el título de su columna delante (`data-titulo`, de mesa-ui.js). La
   cabecera se esconde —y con ella ordenar—; los filtros siguen, apilados. */
@media (max-width: 640px) {
  .mu-tabla-scroll { overflow-x: visible; }
  .mu-tabla-wrap table.mu-tabla, .mu-tabla-wrap table.mu-tabla thead, .mu-tabla-wrap table.mu-tabla tbody { display: block; width: 100%; }
  .mu-tabla-wrap table.mu-tabla thead tr:not(.mu-fila-filtros) { display: none; }
  .mu-tabla-wrap table.mu-tabla .mu-fila-filtros:not(.mu-oculto) { display: block; padding: 6px 12px; background: var(--surface-sunken); border-bottom: 1px solid var(--line); }
  .mu-tabla-wrap table.mu-tabla .mu-fila-filtros td { display: block; padding: 4px 0; border: none; background: none; }
  .mu-tabla-wrap table.mu-tabla .mu-fila-filtros td:empty { display: none; }
  .mu-tabla-wrap table.mu-tabla .mu-fila-filtros td[data-titulo]::before { content: attr(data-titulo); display: block; font-size: 0.78rem; color: var(--ink-faint);
    text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 2px; }
  .mu-tabla-wrap table.mu-tabla tbody tr { display: block; padding: 10px 14px; border-bottom: 1px solid var(--line); }
  .mu-tabla-wrap table.mu-tabla tbody tr:last-child { border-bottom: none; }
  .mu-tabla-wrap table.mu-tabla tbody tr:nth-child(even) { background: color-mix(in srgb, var(--surface-sunken) 45%, var(--surface)); }
  .mu-tabla-wrap table.mu-tabla tbody tr.mu-fila-ir:hover { background: var(--accent-soft); }
  .mu-tabla-wrap table.mu-tabla tbody td, .mu-tabla-wrap table.mu-tabla tbody tr:nth-child(even) td, .mu-tabla-wrap table.mu-tabla tbody tr.mu-fila-ir:hover td {
    display: block; position: relative; padding: 3px 0; border: none; background: none;
    width: auto; min-width: 0; max-width: none; white-space: normal; text-align: left; overflow: visible; overflow-wrap: anywhere; }
  /* En bloque y no en flex: una celda con varios trozos (texto, `código`, texto)
     se partía en columnas. La etiqueta va a la izquierda, fuera del flujo. */
  /* `tr:nth-child(n)` solo sube el peso: sin él, la regla de filas pares le quitaba el sangrado. */
  .mu-tabla-wrap table.mu-tabla tbody tr:nth-child(n) td[data-titulo] { padding-left: calc(34% + 10px); }
  .mu-tabla-wrap table.mu-tabla tbody td[data-titulo]::before { content: attr(data-titulo); position: absolute; left: 0; top: 5px; width: 34%;
    font-size: 0.78rem; line-height: 1.3; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; }
  /* La primera celda de texto es el título de la tarjeta: sin etiqueta y a lo ancho. */
  .mu-tabla-wrap table.mu-tabla tbody tr td:is(.mu-col-texto, .mu-col-largo):first-child,
  .mu-tabla-wrap table.mu-tabla tbody tr td.mu-col-codigo:first-child + td:is(.mu-col-texto, .mu-col-largo) { font-size: 1.02rem; font-weight: 600; color: var(--ink); padding-left: 0; padding-bottom: 4px; }
  .mu-tabla-wrap table.mu-tabla tbody tr td:is(.mu-col-texto, .mu-col-largo):first-child::before,
  .mu-tabla-wrap table.mu-tabla tbody tr td.mu-col-codigo:first-child + td:is(.mu-col-texto, .mu-col-largo)::before { display: none; }
  /* Lo vacío («—») no ocupa una línea de la tarjeta. */
  .mu-tabla-wrap table.mu-tabla tbody tr:nth-child(n) td.mu-celda-vacia { display: none; }   /* tr:nth-child(n): pesa más que la regla de filas pares */
  .mu-tabla-wrap table.mu-tabla tbody td.mu-col-acciones { padding-top: 6px; }
  .mu-tabla-wrap table.mu-tabla tbody tr.mu-vacia td { display: block; }
}

/* ───────────────────────────── el logotipo oficial ─────────────────────── */
/* La imagen canónica sobre placa blanca (no hay versión en negativo) con su
   zona de respeto: el lado del cuadrado, ≈30 % del alto del logo. */
.brand-mark { display: block; }
.brand-mark .brand-logo { display: block; height: 44px; width: auto; background: #fff; padding: 7px 10px; border-radius: var(--r-ctl); box-sizing: content-box; }
.brand-mark.grande .brand-logo { height: 64px; padding: 12px 16px; margin: 0 auto 6px; }
.brand-mark .brand-cuadrado { display: none; width: 32px; height: 32px; border-radius: var(--r-ctl); background: #fff; padding: 4px; box-sizing: content-box; }
.login-card .tag { text-align: center; font-family: var(--font-title); font-weight: 700; color: var(--ink); margin: 6px 0 22px; }

/* ───────────────────────────── menú más ancho, plegable y fijable ──────── */
:root { --rail-w: 284px; --rail-w-plegado: 68px; }
/* Solo a partir de 781 px: debajo manda el bloque «móvil» de arriba (menú fijo
   fuera de pantalla y rejilla de una columna). Sin este @media, estas reglas,
   que van después, le devolvían al móvil la columna de 284 px con el menú
   escondido y dejaban al contenido 110 px (visto a 400 px el 25-sep-2026). */
@media (min-width: 781px) {
  .app-shell { grid-template-columns: var(--rail-w) 1fr; transition: grid-template-columns 200ms ease; }
  body.rail-plegado .app-shell { grid-template-columns: var(--rail-w-plegado) 1fr; }
  .rail { position: relative; transition: width 200ms ease; }
  .rail-tirador { position: absolute; right: -13px; top: 50%; transform: translateY(-50%); z-index: 45; width: 26px; height: 42px;
    border: 1px solid var(--line-strong); background: var(--surface); color: var(--ink-soft); border-radius: var(--r-ctl); cursor: pointer;
    display: flex; align-items: center; justify-content: center; font-size: 1.1rem; box-shadow: var(--shadow-card); }
  .rail-tirador:hover { color: var(--accent); border-color: var(--accent); }
  body.rail-plegado .rail-tirador span { display: inline-block; transform: rotate(180deg); }
  .rail-pin { position: absolute; right: 10px; top: 10px; z-index: 45; width: 28px; height: 28px; border: 1px solid transparent; background: transparent;
    color: var(--ink-faint); border-radius: var(--r-ctl); cursor: pointer; display: flex; align-items: center; justify-content: center; }
  .rail-pin:hover { color: var(--ink); background: var(--surface-sunken); }
  .rail-pin.fijo { color: var(--accent); }
  .rail-pin:not(.fijo) .ico-pin { transform: rotate(45deg); display: inline-flex; }
  /* Plegado: solo iconos. Lo que no cabe en 68 px se esconde, no se aplasta. */
  body.rail-plegado .rail { padding-left: 10px; padding-right: 10px; overflow: visible; }
  body.rail-plegado .rail .brand-logo, body.rail-plegado .rail .context-card, body.rail-plegado .rail .rail-buscar,
  body.rail-plegado .rail .rail-grupo-cab, body.rail-plegado .rail .rail-pin, body.rail-plegado .rail .who, body.rail-plegado .rail .logout,
  body.rail-plegado .rail .nav-item .mu-cifra, body.rail-plegado .rail .nav-item .solo-lectores { display: none; }
  body.rail-plegado .rail .brand-cuadrado { display: block; margin: 0 auto; }
  body.rail-plegado .rail .rail-grupo > .rail-nav { display: flex !important; padding-left: 0; }
  body.rail-plegado .rail .rail-grupo { border-top: 1px solid var(--line); padding-top: 4px; margin-top: 4px; }
  body.rail-plegado .rail .nav-item { justify-content: center; padding: 9px 0; font-size: 0; gap: 0; }
  body.rail-plegado .rail .nav-item svg { width: 20px; height: 20px; }
  body.rail-plegado .rail .rail-foot { justify-content: center; }
  body.rail-plegado .rail .rail-scroll { overflow-x: hidden; }
  /* Flotante: ocupa 68 px en la rejilla y, abierto, se despliega POR ENCIMA del contenido. */
  body.rail-flotante .app-shell { grid-template-columns: var(--rail-w-plegado) 1fr; }
  body.rail-flotante.rail-abierto .rail { position: absolute; top: 0; bottom: 0; left: 0; width: var(--rail-w); z-index: 40; box-shadow: var(--shadow-pop); }
}
#root { position: relative; }
@media (max-width: 780px) { .rail-tirador, .rail-pin { display: none; } }

/* ───────────────────────────── transiciones (Fernando, 24-sep-2026) ─────── */
/* Los grupos del menú se pliegan y despliegan de verdad (0fr → 1fr), sin repintar. */
.rail-grupo > .rail-nav { display: grid; grid-template-rows: 1fr; transition: grid-template-rows 260ms cubic-bezier(0.2, 0.8, 0.2, 1), opacity 200ms ease; opacity: 1; }
.rail-grupo[data-plegado="1"] > .rail-nav { display: grid; grid-template-rows: 0fr; opacity: 0.35; }
.rail-grupo > .rail-nav > .rail-nav-in { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.rail-grupo-cab .mu-caret { transition: transform 260ms cubic-bezier(0.2, 0.8, 0.2, 1); }
.rail-pin { display: none !important; }
@media (min-width: 781px) { body.rail-plegado .rail .rail-grupo > .rail-nav { display: grid !important; grid-template-rows: 1fr !important; opacity: 1; padding-left: 0; } }
/* El menú entero se inclina siguiendo el puntero (solo con ratón: html.con-3d). */
html.con-3d .rail { perspective: 1100px; }
html.con-3d .rail .rail-scroll { transform: rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)); transform-style: preserve-3d;
  transition: transform 160ms ease-out; will-change: transform; }
html.con-3d .rail .nav-item { transition: transform 180ms cubic-bezier(0.2, 0.8, 0.2, 1), background var(--mu-dur), color var(--mu-dur); }
html.con-3d .rail .nav-item:hover { transform: translateZ(14px) translateX(3px); }
html.con-3d .rail .rail-grupo-cab:hover { transform: translateZ(6px); }
/* Lo que aparece, entra deslizando: filas de tabla, tarjetas, mensajes del hilo, secciones. */
.mu-tabla-wrap, .mu-fichas > *, .mu-hilo-item, .mu-seccion, .mu-panel[role="tabpanel"] > * { animation: mu-entrar 220ms ease-out both; }
.mu-fichas > :nth-child(2), .mu-hilo-item:nth-child(2) { animation-delay: 40ms; }
.mu-fichas > :nth-child(3), .mu-hilo-item:nth-child(3) { animation-delay: 80ms; }
.mu-fichas > :nth-child(4), .mu-hilo-item:nth-child(4) { animation-delay: 120ms; }
.mu-fichas > :nth-child(n+5), .mu-hilo-item:nth-child(n+5) { animation-delay: 160ms; }
details > *:not(summary) { animation: mu-entrar 200ms ease-out; }
.mu-tabla tbody tr { transition: background var(--mu-dur); }
.mu-cabecera, .mu-filtros { animation: mu-entrar 180ms ease-out both; }
.confirm-panel, .form-error, .kpi-pop, .julia-panel, .panel-ayuda { animation: mu-entrar 200ms ease-out both; }
@media (prefers-reduced-motion: reduce) {
  .rail-grupo > .rail-nav, .rail-grupo-cab .mu-caret, html.con-3d .rail .rail-scroll, html.con-3d .rail .nav-item { transition: none; }
  .mu-tabla-wrap, .mu-fichas > *, .mu-hilo-item, .mu-seccion, .mu-panel[role="tabpanel"] > *, .mu-cabecera, .mu-filtros, details > *:not(summary) { animation: none; }
}

/* ───────────────────────────── filtros dentro de la tabla, menos aire ──── */
.mu-tabla-barra { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-bottom: 1px solid var(--line); background: var(--surface); flex-wrap: wrap; min-height: 40px; }
.mu-tabla-barra .mu-barra-titulo { font-weight: 700; color: var(--ink); margin-right: 6px; }
.mu-tabla-barra .mu-acciones { margin-left: auto; display: flex; gap: 6px; }
.mu-tabla-barra .mu-extra { display: flex; gap: 8px; align-items: flex-end; margin-left: auto; }
.mu-tabla-barra .mu-barra-sueltos { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; }
.mu-btn-filtros.activo { background: var(--accent-soft); border-color: var(--accent-soft-line); color: var(--accent); }
.mu-btn-filtros .mu-caret { font-size: 0.75rem; }
.mu-filtros-caja { margin: 0 0 10px; }
.mu-filtros-caja .mu-tabla-barra { border: 1px solid var(--line); border-radius: var(--r-card); }
.mu-filtros-caja .mu-filtros { margin: 8px 0 0; }
table.mu-tabla .mu-fila-filtros td { background: var(--surface-sunken); padding: 4px 6px; border-bottom: 1px solid var(--line); vertical-align: middle; }
table.mu-tabla .mu-fila-filtros .mu-campo { gap: 0; }
table.mu-tabla .mu-fila-filtros select, table.mu-tabla .mu-fila-filtros input { height: 30px; font-size: 0.86rem; padding: 0 22px 0 8px; width: 100%; min-width: 0; box-sizing: border-box; }
table.mu-tabla .mu-fila-filtros input { padding-left: 26px; background-position: 7px center; }
table.mu-tabla .mu-fila-filtros .mu-buscar { max-width: none; }
/* Menos aire: cabeceras, secciones y celdas más prietas (Fernando, 24-sep-2026). */
.mu-cabecera { margin: 0 0 14px; padding-bottom: 10px; gap: 10px; }
.mu-cabecera h1 { font-size: 1.35rem; }
.mu-cabecera .mu-sub { margin: 2px 0 0; font-size: 0.94rem; }
main.stage { padding: 16px 24px 56px; }
@media (min-width: 1200px) { main.stage { padding: 18px 28px 64px; } }
.mu-seccion { padding: 12px 16px; }
.mu-seccion > h3, .mu-seccion > .mu-seccion-cab { margin-bottom: 8px; }
.mu-ficha { gap: 12px; }
table.mu-tabla { font-size: 0.93rem; }
table.mu-tabla th > span, table.mu-tabla th > button { padding: 8px 10px; }
table.mu-tabla td { padding: 6px 10px; }
.mu-tabla-pie { padding: 5px 10px; }
.mu-filtros { margin-bottom: 10px; }
/* Lo largo se parte en dos líneas en vez de empujar la tabla fuera de la pantalla;
   las acciones se quedan pegadas a la derecha, siempre a la vista.
   El recorte va en el envoltorio `.mu-recorte` (mesa-ui.js) y NUNCA en la <td>:
   una celda con `display: -webkit-box` deja de ser celda, el navegador junta las
   vecinas en una celda anónima y la fila corre una columna (Dudas, 14-oct-2026). */
table.mu-tabla td.mu-col-texto { white-space: normal; max-width: 46ch; }
table.mu-tabla td.mu-col-largo { white-space: normal; max-width: 56ch; }
table.mu-tabla td.mu-col-texto > .mu-recorte { max-width: 46ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
table.mu-tabla td.mu-col-largo > .mu-recorte { max-width: 56ch; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
/* La celda sin valor: un «—» discreto (antes llevaba `mu-vacio`, la caja del estado vacío). */
table.mu-tabla td.mu-celda-vacia { color: var(--ink-faint); }
/* «Respondida vía» de Dudas: el canal y, debajo y en pequeño, quién (14-oct-2026). */
table.mu-tabla td.mu-via { white-space: normal; }
table.mu-tabla .mu-via-caja { display: flex; flex-direction: column; line-height: 1.25; }
table.mu-tabla .mu-via-quien { font-size: 0.8rem; color: var(--ink-faint); }
/* Columnas que ceden ancho para que la tabla de Dudas quepa a 1440 px sin scroll
   lateral: la cabecera puede partirse en dos líneas y la historia se estrecha. */
table.mu-tabla th.mu-cab-parte { white-space: normal; }
table.mu-tabla .mu-col-texto.mu-texto-estrecho { min-width: 170px; }
table.mu-tabla th.mu-col-acciones, table.mu-tabla td.mu-col-acciones { position: sticky; right: 0; background: var(--surface); box-shadow: -6px 0 8px -8px rgba(0, 0, 0, 0.35); z-index: 1; }
table.mu-tabla tbody tr:nth-child(even) td.mu-col-acciones { background: color-mix(in srgb, var(--surface-sunken) 45%, var(--surface)); }
table.mu-tabla tbody tr.mu-fila-ir:hover td.mu-col-acciones { background: var(--accent-soft); }

/* ───────────────────────────── el azul corporativo (Fernando, 24-sep-2026) ─
   El azul del cuadrado del logotipo (#215995) como acento de botones, enlaces
   y textos azules. En oscuro, el mismo tono aclarado para que contraste. */
:root { --accent: #215995; --accent-soft: #e4edf7; --accent-soft-line: #b7cde6; --focus: #215995; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --accent: #5f9be0; --accent-ink: #0a1420; --accent-soft: #15283e; --accent-soft-line: #2a4a6e; --focus: #5f9be0; } }
:root[data-theme="dark"] { --accent: #5f9be0; --accent-ink: #0a1420; --accent-soft: #15283e; --accent-soft-line: #2a4a6e; --focus: #5f9be0; }
:root[data-theme="light"] { --accent: #215995; --accent-soft: #e4edf7; --accent-soft-line: #b7cde6; --focus: #215995; }
/* La Oficina virtual dentro de la Mesa (solo en oficina.solidconsultoria.com). */
.oficina-marco { width: 100%; height: calc(100vh - 150px); min-height: 560px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--paper); box-shadow: var(--shadow-card); }

/* ───────────────────────────── Encargo A (24-sep-2026): filtros dentro de la tabla ─
   Dos tablas seguidas en una página (Para certificar) llevan aire entre ellas;
   la celda de acciones de la fila de filtros conserva el fondo de esa fila. */
.mu-tabla-wrap + .mu-tabla-wrap { margin-top: 14px; }
table.mu-tabla .mu-fila-filtros td.mu-col-acciones { background: var(--surface-sunken); }

/* ───────────── Encargo B (Fernando, 24-sep-2026): «Hoy» compacta ─────────────
   «Mucho espacio desperdiciado»: misma información, menos altura. La cabecera
   común en una línea; «¡Pastuki!» y «La casa» comparten fila cuando caben
   (rejilla auto-fit) y «Los proyectos» ocupa el ancho entero. Tarjetas con
   12-14 px de relleno y 12-16 px entre bloques. Las tarjetas de KPI conservan
   la misma altura por fila (el valor siempre en el mismo sitio, D297). */
.hoy-compacta .mu-cabecera { align-items: center; }
.hoy-compacta .mu-cabecera .mu-acciones { gap: 12px; }
.hoy-compacta .kpi-leyenda { margin: 0 0 12px; font-size: 0.78rem; gap: 4px 14px; }
.hoy-compacta .sello-viejo { margin-bottom: 12px; }
.hoy-rejilla { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)); gap: 14px; align-items: start; }
.hoy-rejilla > .hoy-ancho { grid-column: 1 / -1; }
.hoy-compacta .kpi-bloque { margin: 0; min-width: 0; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-card); padding: 12px 14px; }
.hoy-compacta .kpi-bloque.hoy-ancho { background: none; border: none; padding: 0; }
.hoy-compacta .kpi-bloque-cab { gap: 4px 12px; padding-bottom: 6px; margin-bottom: 10px; }
.hoy-compacta .kpi-bloque-cab h2 { font-size: 1.1rem; }
.hoy-compacta .kpi-cara { font-size: 1.2rem; }
.hoy-compacta .kpi-rejilla { grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 8px; }
.hoy-compacta .kt { padding: 8px 10px 6px; gap: 3px; }
.hoy-compacta .kt-valor { font-size: 1.6rem; }
.hoy-compacta .kt-valor.eur { font-size: 1.35rem; }
.hoy-compacta .kt-valor.texto { font-size: 1.1rem; }
.hoy-compacta .kt-pie { padding-top: 4px; }
.hoy-compacta .kt-salto, .hoy-compacta .kpi-chip { border-radius: var(--r-tag); }
.hoy-compacta details.kpi-proyecto { margin-bottom: 10px; }
.hoy-compacta details.kpi-proyecto > summary { padding: 10px 14px; }
.hoy-compacta details.kpi-proyecto > .cuerpo { padding: 0 14px 12px; }
.hoy-compacta .kpi-persona { grid-template-columns: 132px 1fr; gap: 8px 14px; padding: 10px 0; }
@media (max-width: 720px) { .hoy-compacta .kpi-persona { grid-template-columns: 1fr; gap: 6px; } }
@media (max-width: 460px) { .hoy-compacta .kpi-rejilla { grid-template-columns: repeat(2, minmax(0, 1fr)); } .hoy-compacta .kt-valor { font-size: 1.4rem; } }
/* Encargo B: los iconos del menú (uno distinto por entrada) centrados también plegado. */
.rail-nav .nav-item .ico-menu { display: inline-flex; flex-shrink: 0; }