/* ==========================================================================
   Cu — Hoja de estilos
   ==========================================================================

   CRITERIOS DE DISEÑO
   -------------------
   1. CONTRASTE ANTES QUE ESTÉTICA.
      Cada color de texto está elegido para pasar AA (4.5:1) contra su fondo,
      y los importes, que son el dato que se lee de reojo todo el día, pasan AAA.
      El acento anterior (#0b7fd4) tenía 3.3:1 contra blanco: se veía "bonito"
      pero era ilegible en un monitor barato o con el sol de una bodega. El azul
      de ahora da 6.3:1 y sigue siendo el mismo tono de marca.

   2. JERARQUÍA POR PESO, NO POR COLOR.
      Un sistema contable tiene demasiada información como para pintar cada
      bloque de un color. El color se reserva para lo que SIGNIFICA algo: estado
      (verde/ámbar/rojo/violeta) y empresa. Todo lo demás se distingue por
      tamaño, peso y espaciado.

   3. NÚMEROS EN COLUMNA.
      Todo importe, cantidad y folio usa `tabular-nums`. Sin eso, los dígitos
      bailan de renglón a renglón y comparar dos cantidades obliga a leerlas
      una por una, que es exactamente lo que un estado financiero no debe pedir.

   4. DENSIDAD DE OPERACIÓN.
      Tablas de 13px, filas de 34-38px de alto, sin aire de más. Es una
      herramienta de trabajo, no una landing page.
   ========================================================================== */

:root {
  /* --- Superficies (tema claro) --- */
  --fondo: #f5f7fb;
  --panel: #ffffff;
  --panel-alt: #f8fafd;
  --panel-hover: #f1f5fa;
  --borde: #e4e9f1;
  --borde-fuerte: #c8d2e0;

  /* --- Texto (contraste medido sobre blanco) --- */
  --texto: #0b1622;        /* 17.9:1  AAA */
  --texto-suave: #45566b;  /*  7.4:1  AAA */
  --texto-tenue: #66788d;  /*  4.7:1  AA  */

  /* --- Marca --- */
  --marino: #101c2c;
  --marino-claro: #1d2f45;
  --acento: #0b57c7;       /*  6.3:1  AA sobre blanco */
  --acento-fuerte: #084396;
  --acento-suave: #e7effd;

  /* --- Estados --- */
  --ok: #0a6b45;
  --ok-suave: #e4f5ec;
  --alerta: #8a5000;
  --alerta-suave: #fdf2df;
  --peligro: #a51c12;
  --peligro-suave: #fcebe9;
  --info: #4a2d99;
  --info-suave: #efeafb;

  /* --- Forma ---
     Radios cortos y sombras planas: es lo que separa una herramienta de trabajo
     de una aplicación de consumo. El bloque se define con su borde. */
  --radio: 7px;
  --radio-chico: 5px;
  /* Dos niveles: el 1 separa superficies, el 2 eleva lo que flota. */
  --sombra: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
  --sombra-2: 0 4px 12px -2px rgba(16, 24, 40, .10), 0 2px 4px -2px rgba(16, 24, 40, .06);
  --sombra-alta: 0 20px 44px -16px rgba(16, 24, 40, .30), 0 4px 10px -4px rgba(16, 24, 40, .10);
  --mono: ui-monospace, "SFMono-Regular", "Cascadia Mono", Menlo, Consolas, monospace;
  --lateral: 258px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  background: var(--fondo); color: var(--texto);
  /* Tipografía empresarial: la del sistema, con tracking negativo en títulos y
     positivo en las micro-etiquetas. Es lo que separa una interfaz de producto de
     una página web. */
  font-family: "Segoe UI Variable Text", "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, Roboto,
    "Helvetica Neue", Arial, sans-serif;
  font-size: 13.5px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
}

::selection { background: #b9d3f7; color: var(--texto); }

/* Un solo lugar define cómo se ve el foco: sin esto, la mitad de los controles
   no tenía anillo y no se podía navegar con teclado. */
:focus-visible {
  outline: 2px solid var(--acento);
  outline-offset: 2px;
  border-radius: 4px;
}

#app { display: flex; min-height: 100vh; }

/* ============================ BARRA LATERAL ============================ */

.sidebar {
  width: var(--lateral); flex: 0 0 var(--lateral);
  background: var(--panel);
  color: var(--texto-suave);
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh; overflow-y: auto;
  border-right: 1px solid var(--borde);
  box-shadow: var(--sombra);
}

.sidebar::-webkit-scrollbar { width: 8px; }
.sidebar::-webkit-scrollbar-thumb { background: #dbe2ec; border-radius: 8px; }

.marca-app {
  display: flex; align-items: center; gap: 11px;
  padding: 18px 16px 15px 16px; border-bottom: 1px solid var(--borde);
}
/* Monograma, no un emoji: dos letras en un cuadro del color de la marca. */
.marca-app .logo {
  font-size: 13px; line-height: 1; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 6px;
  font-weight: 800; letter-spacing: .4px; color: #fff;
  background: var(--acento);
}
.marca-app .nombre { font-size: 15.5px; font-weight: 700; color: var(--texto); letter-spacing: -.3px; }
.marca-app .sub { font-size: 9.5px; color: var(--texto-tenue); text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; }

.cadena-mini {
  display: flex; align-items: center; justify-content: center; gap: 3px;
  padding: 11px 8px; background: var(--panel-alt);
  border-bottom: 1px solid var(--borde);
  flex-wrap: wrap;
}
.cadena-mini .nodo {
  background: #ffffff; border: 1px solid var(--borde-fuerte); border-radius: 5px; padding: 3px 7px;
  font-size: 10px; font-weight: 800; color: var(--texto); text-align: center; line-height: 1.2;
  letter-spacing: .2px;
}
.cadena-mini .nodo small { display: block; font-size: 7.5px; font-weight: 600; color: var(--texto-tenue); letter-spacing: .3px; margin-top: 1px; }
.cadena-mini .nodo.cli { background: var(--acento); border-color: var(--acento); color: #fff; }
.cadena-mini .nodo.cli small { color: #d7e6ff; }
.cadena-mini .flecha { color: var(--borde-fuerte); font-size: 10px; }

#nav { flex: 1; padding: 6px 0 18px 0; }

/* Cada categoría es un bloque que se abre y se cierra. Con 22 pantallas, una
   lista corrida obliga a recorrerla con la vista cada vez. */
.nav-seccion { border-bottom: 1px solid var(--borde); }
.nav-seccion:last-child { border-bottom: 0; }

.nav-titulo {
  width: 100%; display: flex; align-items: center; justify-content: space-between;
  font: inherit; font-size: 9.5px; font-weight: 800; text-transform: uppercase;
  letter-spacing: 1.1px; color: var(--texto-tenue);
  padding: 13px 16px 9px 16px; border: 0; background: transparent; cursor: pointer;
  transition: color .12s;
}
.nav-titulo:hover { color: var(--texto-suave); }
.nav-titulo .chev {
  width: 6px; height: 6px; flex: 0 0 auto;
  border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor;
  transform: rotate(-45deg); transition: transform .16s;
}
.nav-seccion.abierta .nav-titulo .chev { transform: rotate(45deg); }

.nav-enlaces { display: none; padding-bottom: 8px; }
.nav-seccion.abierta .nav-enlaces { display: block; }

#nav a {
  display: block; padding: 7px 16px 7px 18px; color: var(--texto-suave); text-decoration: none;
  font-size: 12.8px; font-weight: 500;
  border-left: 2px solid transparent; transition: background .12s, color .12s;
}
#nav a:hover { background: var(--panel-hover); color: var(--texto); }
#nav a.activa {
  background: var(--acento-suave);
  border-left-color: var(--acento); color: var(--acento-fuerte); font-weight: 700;
}

.reloj {
  padding: 12px 16px; border-top: 1px solid var(--borde);
  background: var(--panel-alt);
}
.reloj .etiqueta { font-size: 9px; text-transform: uppercase; letter-spacing: .9px; color: var(--texto-tenue); font-weight: 800; }
.reloj .valor { font-family: var(--mono); font-size: 12.5px; color: var(--texto); margin-top: 3px; font-weight: 600; }
.reloj .velocidad { font-size: 10px; color: var(--texto-tenue); margin-top: 2px; }

/* ============================ CONTENIDO ============================ */

.contenido { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.barra-superior {
  background: #ffffff;
  border-bottom: 1px solid var(--borde);
  padding: 14px 26px; display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap; position: sticky; top: 0; z-index: 30;
  box-shadow: 0 1px 3px rgba(16, 24, 40, .06);
}
.barra-superior h1 { margin: 0; font-size: 19px; font-weight: 700; letter-spacing: -.4px; color: var(--texto); }
.subtitulo { margin: 3px 0 0 0; font-size: 12.5px; color: var(--texto-suave); max-width: 68ch; }
.acciones-barra { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

/* --- Migas de pan: dónde está parado dentro del sistema --- */

.migas {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  font-size: 11px; color: var(--texto-tenue); margin-bottom: 5px;
  text-transform: uppercase; letter-spacing: .7px; font-weight: 700;
}
.migas .miga-marca { color: var(--acento); }
.migas .miga-sep { color: var(--borde-fuerte); font-weight: 400; }
.migas .miga-actual { color: var(--texto-suave); }

/* --- Selector de empresa (el "Odoo" de este sistema) --- */

.selector-empresa { position: relative; }
.selector-empresa-btn {
  display: flex; align-items: center; gap: 9px;
  font: inherit; font-size: 12.8px; font-weight: 650;
  padding: 5px 10px 5px 6px; border-radius: 7px;
  border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto);
  cursor: pointer; white-space: nowrap; transition: border-color .13s, box-shadow .13s;
  box-shadow: var(--sombra);
}
.selector-empresa-btn:hover { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.selector-empresa-btn .insignia {
  width: 27px; height: 27px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11.5px; font-weight: 800; color: #fff; letter-spacing: .3px; flex: 0 0 auto;
}
.selector-empresa-btn .texto-empresa { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.15; }
.selector-empresa-btn .nombre-empresa { font-size: 12.5px; font-weight: 700; }
.selector-empresa-btn .rol-empresa { font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px; color: var(--texto-tenue); font-weight: 700; }
/* El caret es un triángulo de CSS: no depende de la fuente del equipo. */
.selector-empresa-btn .caret {
  width: 0; height: 0; margin-left: 4px;
  border-left: 4px solid transparent; border-right: 4px solid transparent;
  border-top: 5px solid var(--texto-tenue);
}

.selector-empresa-menu {
  position: absolute; right: 0; top: calc(100% + 7px); z-index: 80;
  min-width: 320px; padding: 7px;
  background: #fff; border: 1px solid var(--borde); border-radius: 9px;
  box-shadow: var(--sombra-alta); display: none;
}
.selector-empresa-menu.abierto { display: block; animation: desplegar .13s ease-out; }
@keyframes desplegar { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }

.selector-empresa-menu .menu-titulo {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); padding: 8px 10px 5px;
}
.selector-empresa-opcion {
  display: flex; align-items: center; gap: 10px; width: 100%;
  font: inherit; font-size: 13px; text-align: left; color: var(--texto);
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
}
.selector-empresa-opcion:hover { background: var(--panel-alt); }
.selector-empresa-opcion.activa { background: var(--acento-suave); color: var(--acento-fuerte); font-weight: 700; }
.selector-empresa-opcion .insignia {
  width: 26px; height: 26px; border-radius: 7px; display: grid; place-items: center;
  font-size: 11px; font-weight: 800; color: #fff; flex: 0 0 auto;
}
.selector-empresa-opcion .detalle { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.selector-empresa-opcion .detalle .rfc { font-family: var(--mono); font-size: 10px; color: var(--texto-tenue); }
.selector-empresa-menu .menu-pie {
  border-top: 1px solid var(--borde); margin-top: 6px; padding: 9px 10px 3px;
  font-size: 10.5px; color: var(--texto-tenue); line-height: 1.45;
}

/* ============================ BOTONES ============================ */

.btn {
  font: inherit; font-size: 13px; font-weight: 650;
  padding: 8px 15px; border-radius: 8px; border: 1px solid var(--acento);
  background: var(--acento);
  color: #fff; cursor: pointer; white-space: nowrap;
  box-shadow: 0 1px 1px rgba(9, 24, 42, .10);
  transition: background .12s;
}
.btn:hover { background: var(--acento-fuerte); }
.btn:active { transform: translateY(1px); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.35); }

.btn.sec {
  background: #fff; color: var(--texto); border-color: var(--borde-fuerte);
  box-shadow: 0 1px 2px rgba(9,24,42,.05);
}
.btn.sec:hover { background: var(--panel-alt); border-color: var(--acento); color: var(--acento-fuerte); filter: none; }
.btn.peligro { background: var(--peligro); border-color: var(--peligro); }
.btn.ok { background: var(--ok); border-color: var(--ok); }
.btn.chico { padding: 5px 10px; font-size: 12px; border-radius: 6px; }
.btn.acento { background: var(--acento); color: #fff; }

.vista { padding: 22px 26px 70px 26px; max-width: 1560px; }
.cargando {
  padding: 60px 20px; text-align: center; color: var(--texto-tenue); font-size: 13px;
}
.cargando::before {
  content: ""; display: block; width: 26px; height: 26px; margin: 0 auto 12px;
  border: 2.5px solid var(--borde); border-top-color: var(--acento); border-radius: 50%;
  animation: girar .7s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }

/* ============================ TARJETAS ============================ */

.rejilla { display: grid; gap: 16px; }
.rejilla.c2 { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }
.rejilla.c3 { grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); }
.rejilla.c4 { grid-template-columns: repeat(auto-fit, minmax(196px, 1fr)); }

.tarjeta {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
  transition: box-shadow .16s;
}
.tarjeta:hover { box-shadow: var(--sombra-2); }
.tarjeta-enc {
  padding: 13px 16px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--panel-alt);
}
.tarjeta-enc h2, .tarjeta-enc h3 { margin: 0; font-size: 13.5px; font-weight: 750; letter-spacing: -.1px; }
.tarjeta-enc .pista { font-size: 11.5px; color: var(--texto-tenue); }
.tarjeta-cuerpo { padding: 16px; }
.tarjeta-cuerpo.sin-pad { padding: 0; }

.kpi { padding: 16px 17px; position: relative; }
.kpi .etiqueta { font-size: 9.5px; text-transform: uppercase; letter-spacing: .9px; color: var(--texto-tenue); font-weight: 800; }
.kpi .valor {
  font-size: 26px; font-weight: 750; margin-top: 4px; letter-spacing: -.9px;
  font-variant-numeric: tabular-nums; line-height: 1.15;
}
.kpi .detalle { font-size: 11.5px; color: var(--texto-suave); margin-top: 4px; }
.kpi.acento .valor { color: var(--acento); }
.kpi.ok .valor { color: var(--ok); }
.kpi.alerta .valor { color: var(--alerta); }
.kpi.peligro .valor { color: var(--peligro); }

/* ============================ TABLAS ============================ */

.tabla-envoltura { overflow-x: auto; }
table.tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
table.tabla th {
  text-align: left; font-size: 9.5px; text-transform: uppercase; letter-spacing: .85px;
  color: var(--texto-tenue); font-weight: 800; padding: 10px 13px;
  border-bottom: 1px solid var(--borde-fuerte); background: var(--panel-alt); white-space: nowrap;
}
table.tabla td { padding: 9px 13px; border-bottom: 1px solid #edf1f6; vertical-align: middle; }
/* Las fechas y los folios no se parten: «2026-10-28» en dos renglones deja de
   parecer una fecha y duplica el alto de la fila. Las descripciones sí pueden
   partirse, porque son texto largo y ahí conviene. */
table.tabla td .ahora, table.tabla td.ahora, table.tabla td.mono { white-space: nowrap; }
table.tabla tbody tr:nth-child(even) { background: #fcfdfe; }
table.tabla tbody tr:hover { background: #f2f7fd; }
table.tabla tbody tr.clicable { cursor: pointer; }
table.tabla tbody tr.clicable:hover { background: var(--acento-suave); }
table.tabla .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
table.tabla .cfg { font-weight: 650; }
table.tabla .mono { font-family: var(--mono); font-size: 11.5px; color: var(--texto-suave); }
table.tabla tfoot td {
  padding: 11px 13px; font-weight: 750; background: var(--panel-alt);
  border-top: 2px solid var(--borde-fuerte); border-bottom: 0;
  font-variant-numeric: tabular-nums;
}

/* ============================ ETIQUETAS DE ESTADO ============================ */

.eti {
  display: inline-block; padding: 2px 8px; border-radius: 20px;
  font-size: 10px; font-weight: 800; letter-spacing: .45px; white-space: nowrap;
  text-transform: uppercase; border: 1px solid transparent; line-height: 1.55;
}
.eti.ok { background: var(--ok-suave); color: var(--ok); border-color: #a9dcc6; }
.eti.alerta { background: var(--alerta-suave); color: var(--alerta); border-color: #eed3a2; }
.eti.peligro { background: var(--peligro-suave); color: var(--peligro); border-color: #f2bdb7; }
.eti.info { background: var(--info-suave); color: var(--info); border-color: #cdc0f0; }
.eti.neutro { background: #eaeff5; color: var(--texto-suave); border-color: #d5dee8; }
.eti.acento { background: var(--acento-suave); color: var(--acento-fuerte); border-color: #b5cfF3; }

.chip {
  display: inline-block; padding: 1px 7px; border-radius: 5px; font-size: 11px;
  background: #edf1f6; color: var(--texto-suave); font-family: var(--mono);
  border: 1px solid #dfe6ee;
}

/* ============================ CADENA / PIPELINE ============================ */

.pipeline { display: flex; flex-direction: column; gap: 0; }
.paso {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 13px;
  padding: 12px 0; border-bottom: 1px dashed var(--borde); position: relative;
}
.paso:last-child { border-bottom: none; }
.paso .punto {
  width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 800; border: 2px solid var(--borde-fuerte); background: #fff; color: var(--texto-tenue);
}
.paso.completada .punto { background: var(--ok-suave); border-color: var(--ok); color: var(--ok); }
.paso.programada .punto { background: var(--acento-suave); border-color: var(--acento); color: var(--acento); }
.paso.fallida .punto { background: var(--peligro-suave); border-color: var(--peligro); color: var(--peligro); }
.paso .titulo { font-weight: 650; font-size: 13.5px; }
.paso .meta { font-size: 11.5px; color: var(--texto-suave); margin-top: 2px; }
.paso .derecha { text-align: right; font-size: 11.5px; color: var(--texto-suave); font-variant-numeric: tabular-nums; }

.barra-progreso { height: 7px; background: #e6ecf3; border-radius: 6px; overflow: hidden; border: 1px solid #dbe3ec; }
.barra-progreso > div {
  height: 100%; background: var(--acento);
  transition: width .35s ease; border-radius: 6px;
}

/* ============================ EMPRESAS ============================ */

.empresa-tarjeta { border-top: 4px solid var(--acento); }
.empresa-tarjeta .nombre { font-size: 15px; font-weight: 750; letter-spacing: -.2px; }
.empresa-tarjeta .rfc { font-family: var(--mono); font-size: 11px; color: var(--texto-suave); }
.mini-kpis { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; margin-top: 13px; }
.mini-kpis > div { background: var(--panel-alt); border: 1px solid #e6ecf3; border-radius: 7px; padding: 8px 10px; }
.mini-kpis .et { font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px; color: var(--texto-tenue); font-weight: 800; }
.mini-kpis .vl { font-size: 14.5px; font-weight: 750; font-variant-numeric: tabular-nums; }

/* ============================ DELAYS / AUDITORÍA ============================ */

.histograma { display: flex; align-items: flex-end; gap: 2px; height: 78px; margin-top: 8px; }
.histograma .cubo {
  flex: 1; background: var(--acento);
  border-radius: 3px 3px 0 0; min-height: 2px; position: relative;
}
.histograma .cubo:hover { filter: brightness(1.15); }
.histograma .cubo span {
  position: absolute; bottom: -18px; left: 50%; transform: translateX(-50%);
  font-size: 8.5px; color: var(--texto-tenue); white-space: nowrap;
}

.tabla-delays td.mini-hist { width: 190px; }
.mini-hist .barras { display: flex; align-items: flex-end; gap: 1px; height: 26px; }
.mini-hist .barras i { flex: 1; background: var(--acento); border-radius: 1px; min-height: 1px; }

.dato-tecnico {
  font-family: var(--mono); font-size: 11.5px; background: #f6f8fb;
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 10px 12px;
  white-space: pre-wrap; word-break: break-word; color: #1e2f42; max-height: 300px; overflow: auto;
}

.veredicto { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-radius: var(--radio); }
.veredicto.ok { background: var(--ok-suave); border: 1px solid #a9dcc6; }
.veredicto.mal { background: var(--peligro-suave); border: 1px solid #f2bdb7; }
.veredicto .icono {
  width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto;
  display: grid; place-items: center;
  font-size: 12px; font-weight: 800; letter-spacing: .3px;
  background: rgba(255,255,255,.65); color: inherit;
}
.veredicto .titulo { font-weight: 750; font-size: 14px; }
.veredicto .texto { font-size: 12.5px; color: var(--texto-suave); margin-top: 2px; }

/* ============================ CORREOS ============================ */

.correo-item {
  border: 1px solid var(--borde); border-radius: var(--radio-chico); padding: 12px 14px;
  margin-bottom: 9px; cursor: pointer; background: #fff; transition: border-color .12s, box-shadow .12s;
}
.correo-item:hover { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.correo-item .asunto { font-weight: 650; font-size: 13.5px; }
.correo-item .ruta { font-size: 11.5px; color: var(--texto-suave); margin-top: 3px; font-family: var(--mono); }
.correo-item .cuando { font-size: 11px; color: var(--texto-tenue); }

.correo-preview {
  border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; background: #eef2f7;
}
.correo-preview iframe { width: 100%; height: 520px; border: 0; background: #fff; }

/* --- Bandeja con carpetas: el panel a la izquierda, la lista a la derecha --- */

.correo-layout { display: grid; grid-template-columns: 258px 1fr; gap: 16px; align-items: start; }
@media (max-width: 1000px) { .correo-layout { grid-template-columns: 1fr; } }

.correo-lateral {
  border: 1px solid var(--borde); border-radius: var(--radio); background: #fff;
  padding: 13px; position: sticky; top: 14px; box-shadow: var(--sombra);
}
.correo-lateral-bloque { margin-bottom: 17px; }
.correo-lateral-bloque:last-child { margin-bottom: 0; }
.correo-lateral-titulo {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: 1px;
  color: var(--texto-tenue); font-weight: 800; margin-bottom: 8px; padding: 0 4px;
}

.correo-carpeta {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  border: 0; background: transparent; text-align: left; cursor: pointer;
  padding: 8px 10px; border-radius: 7px; font: inherit; font-size: 13px; color: var(--texto);
  transition: background .1s;
}
.correo-carpeta:hover { background: var(--panel-alt); }
.correo-carpeta.activa { background: var(--acento-suave); font-weight: 700; color: var(--acento-fuerte); }
.correo-carpeta .cuenta {
  font-size: 11px; color: var(--texto-suave); background: #eef2f7;
  border-radius: 12px; padding: 1px 8px; min-width: 24px; text-align: center;
  font-weight: 700; font-variant-numeric: tabular-nums;
}
.correo-carpeta.activa .cuenta { background: #fff; color: var(--acento-fuerte); }

.correo-buzon { display: flex; gap: 9px; align-items: flex-start; padding: 6px 4px; }
.correo-buzon .punto { width: 9px; height: 9px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }

/* --- La lista de conversaciones --- */

.correo-lista { border: 1px solid var(--borde); border-radius: var(--radio); background: #fff; overflow: hidden; box-shadow: var(--sombra); }
.correo-lista-enc {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 12px 15px; border-bottom: 1px solid var(--borde); background: var(--panel-alt);
}

.correo-fila {
  display: grid; grid-template-columns: 40px 1fr; gap: 12px;
  padding: 12px 15px; border-bottom: 1px solid #eef1f6;
  cursor: pointer; transition: background .1s;
}
.correo-fila:last-child { border-bottom: 0; }
.correo-fila:hover { background: #f4f8fd; }
.correo-fila.sin-revisar { background: #fffbf0; }
.correo-fila.sin-revisar:hover { background: #fff6e2; }

.correo-avatar {
  width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 15px;
}
.correo-resumen { min-width: 0; }
.correo-de { display: flex; align-items: center; gap: 7px; min-width: 0; }
.correo-de .negrita { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.correo-asunto {
  font-size: 13.5px; font-weight: 650; margin: 3px 0 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.punto-nuevo {
  width: 8px; height: 8px; border-radius: 50%; background: var(--acento);
  display: inline-block; flex: 0 0 auto; box-shadow: 0 0 0 3px rgba(11,87,199,.15);
}

/* --- Servidores de correo (configuración tipo Outlook) --- */

.servidor-tarjeta { border-top: 4px solid var(--texto-tenue); }
.servidor-tarjeta.conectado { border-top-color: var(--ok); }
.servidor-tarjeta.parcial { border-top-color: var(--alerta); }

.servidor-estado {
  display: flex; align-items: center; gap: 8px; font-size: 11.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; white-space: nowrap;
  flex: 0 0 auto;
}
.servidor-estado .foco { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; }
.servidor-estado.on .foco { background: var(--ok); box-shadow: 0 0 0 3px rgba(10,107,69,.18); }
.servidor-estado.off .foco { background: var(--texto-tenue); box-shadow: 0 0 0 3px rgba(102,120,141,.16); }
.servidor-estado.mal .foco { background: var(--peligro); box-shadow: 0 0 0 3px rgba(165,28,18,.16); }

.bloque-servidor {
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 13px 14px; margin-bottom: 12px; background: var(--panel-alt);
}
.bloque-servidor:last-child { margin-bottom: 0; }
.bloque-servidor-cab {
  display: flex; align-items: center; gap: 9px; margin-bottom: 12px;
}
.bloque-servidor-cab .icono-servidor {
  min-width: 44px; height: 24px; padding: 0 6px; border-radius: 4px;
  display: grid; place-items: center;
  background: #fff; border: 1px solid var(--borde);
  font-size: 9.5px; font-weight: 800; letter-spacing: .6px; color: var(--texto-suave);
}
.bloque-servidor-cab .rotulo { font-size: 12.5px; font-weight: 750; }
.bloque-servidor-cab .pista { font-size: 10.5px; color: var(--texto-tenue); }

/* Los campos dentro de una tarjeta angosta tienen que poder encogerse. Sin
   `min-width: 0`, el ancho mínimo lo pone el texto más largo de las opciones del
   <select> (aquí «STARTTLS (587)»), la columna se niega a bajar de ese ancho y la
   tarjeta se sale de la pantalla. Es el clásico desbordamiento de grid que no se
   nota hasta que la ventana no es enorme. */
.servidor-rejilla {
  display: grid; grid-template-columns: minmax(0, 1fr) 92px 124px; gap: 10px;
}
.servidor-rejilla > * { min-width: 0; }
.servidor-rejilla .campo { margin-bottom: 10px; }
@media (max-width: 780px) {
  .servidor-rejilla { grid-template-columns: minmax(0, 1fr); }
}

.pasos-config { counter-reset: paso; margin: 0; padding: 0; list-style: none; }
.pasos-config li {
  counter-increment: paso; position: relative; padding: 0 0 12px 34px;
  font-size: 12.5px; color: var(--texto-suave); line-height: 1.55;
}
.pasos-config li::before {
  content: counter(paso); position: absolute; left: 0; top: 0;
  width: 23px; height: 23px; border-radius: 50%; display: grid; place-items: center;
  background: var(--acento-suave); color: var(--acento-fuerte);
  font-size: 11px; font-weight: 800; border: 1px solid #b5cff3;
}
.pasos-config li:last-child { padding-bottom: 0; }
.pasos-config b { color: var(--texto); }

/* ============================ MODAL ============================ */

.modal-fondo {
  position: fixed; inset: 0; background: rgba(8,24,42,.6); backdrop-filter: blur(3px);
  display: none; align-items: flex-start; justify-content: center; z-index: 100; padding: 44px 20px; overflow-y: auto;
}
.modal-fondo.abierto { display: flex; }
.modal {
  background: #fff; border-radius: 9px; width: 100%; max-width: 730px;
  box-shadow: var(--sombra-alta); overflow: hidden;
  animation: subir .16s ease-out;
}
@keyframes subir { from { opacity: 0; transform: translateY(10px) scale(.995); } to { opacity: 1; transform: none; } }
.modal.ancho { max-width: 1040px; }
.modal-encabezado {
  padding: 16px 20px; border-bottom: 1px solid var(--borde);
  display: flex; align-items: center; justify-content: space-between;
  background: var(--panel-alt);
}
.modal-encabezado h2 { margin: 0; font-size: 16.5px; font-weight: 750; letter-spacing: -.2px; }
.modal-encabezado .cerrar {
  background: none; border: 0; font-size: 17px; cursor: pointer; color: var(--texto-suave);
  padding: 5px 9px; border-radius: 6px; line-height: 1;
}
.modal-encabezado .cerrar:hover { background: #eef2f7; color: var(--peligro); }
.modal-cuerpo { padding: 20px; max-height: 68vh; overflow-y: auto; }
.modal-pie {
  padding: 14px 20px; border-top: 1px solid var(--borde); display: flex;
  justify-content: flex-end; gap: 9px; background: var(--panel-alt);
}

/* ============================ FORMULARIOS ============================ */

.campo { margin-bottom: 15px; }
.campo label {
  display: block; font-size: 12px; font-weight: 650; margin-bottom: 6px; color: var(--texto-suave);
}
.campo label.chico { font-size: 10.5px; text-transform: uppercase; letter-spacing: .5px; color: var(--texto-tenue); }
.campo input, .campo select, .campo textarea {
  font: inherit; font-size: 13.5px; width: 100%; min-width: 0; padding: 8px 11px;
  border: 1px solid var(--borde-fuerte); border-radius: var(--radio-chico);
  background: #fff; color: var(--texto); transition: border-color .12s, box-shadow .12s;
}
.campo select { text-overflow: ellipsis; }
.campo input:hover, .campo select:hover, .campo textarea:hover { border-color: #94a6b9; }
.campo input:focus, .campo select:focus, .campo textarea:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave);
}
.campo input:disabled, .campo select:disabled {
  background: #f1f4f8; color: var(--texto-suave); cursor: not-allowed;
}
.campo .ayuda { font-size: 11.5px; color: var(--texto-tenue); margin-top: 5px; line-height: 1.45; }
.campo-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 13px; }

.linea-pedido { display: grid; grid-template-columns: 1fr 110px 36px; gap: 8px; margin-bottom: 8px; align-items: center; }
.linea-pedido button {
  padding: 8px; border-radius: var(--radio-chico); border: 1px solid var(--borde-fuerte);
  background: #fff; cursor: pointer; color: var(--texto-suave);
}
.linea-pedido button:hover { border-color: var(--peligro); color: var(--peligro); background: var(--peligro-suave); }

/* ============================ AVISOS ============================ */

.aviso {
  padding: 12px 15px; border-radius: var(--radio-chico); font-size: 12.5px; margin-bottom: 13px;
  border: 1px solid #b5cff3; border-left: 4px solid var(--acento);
  background: var(--acento-suave); color: #0a3d7a; line-height: 1.5;
}
.aviso.ok { border-color: #a9dcc6; border-left-color: var(--ok); background: var(--ok-suave); color: #08503a; }
.aviso.alerta { border-color: #eed3a2; border-left-color: var(--alerta); background: var(--alerta-suave); color: #6d3f00; }
.aviso.peligro { border-color: #f2bdb7; border-left-color: var(--peligro); background: var(--peligro-suave); color: #7d150e; }
.aviso .titulo { font-weight: 750; margin-bottom: 2px; }

/* Desplegables (<details>): el marcador del navegador es un carácter que cada
   motor dibuja a su manera. Aquí se reemplaza por un triángulo de bordes. */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary::before {
  content: ""; display: inline-block; width: 0; height: 0; margin-right: 8px;
  border-left: 5px solid var(--texto-tenue);
  border-top: 4px solid transparent; border-bottom: 4px solid transparent;
  vertical-align: middle; transition: transform .12s;
}
details[open] > summary::before { transform: rotate(90deg); }

.vacio {
  padding: 44px 20px; text-align: center; color: var(--texto-tenue); font-size: 13px;
  border: 1px dashed var(--borde-fuerte); border-radius: var(--radio); background: var(--panel-alt);
}

/* ============================ TOASTS ============================ */

.toasts { position: fixed; bottom: 22px; right: 22px; display: flex; flex-direction: column; gap: 10px; z-index: 200; }
.toast {
  background: var(--marino); color: #fff; padding: 13px 17px; border-radius: 9px;
  font-size: 13px; font-weight: 500; box-shadow: 0 14px 34px -10px rgba(4,16,28,.6);
  max-width: 420px; border-left: 4px solid #3d9bf5;
  animation: entrar .22s ease-out;
}
.toast.ok { background: #07543a; border-left-color: #2fbc86; }
.toast.peligro { background: #7d150e; border-left-color: #f2685c; }
.toast.error { background: #7d150e; border-left-color: #f2685c; }
.toast.alerta { background: #6d3f00; border-left-color: #e0a13b; }
@keyframes entrar { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ============================ ACCESO ============================ */

.acceso {
  min-height: 100vh; width: 100%; display: flex; align-items: center; justify-content: center;
  background: #0b1a2b;
  padding: 26px;
}
.acceso-caja {
  background: #fff; border-radius: 16px; padding: 30px 32px 24px 32px;
  width: 100%; max-width: 420px; box-shadow: 0 24px 60px -24px rgba(0,0,0,.65);
}
.acceso-encabezado { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.acceso-encabezado .logo {
  font-size: 14px; line-height: 1; width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 6px; background: var(--acento);
  font-weight: 800; letter-spacing: .4px; color: #fff;
}
.acceso-encabezado .titulo { font-size: 23px; font-weight: 780; color: var(--marino); letter-spacing: -.6px; }
.acceso-encabezado .sub { font-size: 12px; color: var(--texto-suave); }
.acceso-cadena {
  display: flex; align-items: center; justify-content: center; gap: 5px; flex-wrap: wrap;
  background: var(--panel-alt); border: 1px solid var(--borde); border-radius: 9px;
  padding: 11px 9px; margin-bottom: 22px;
}
.acceso-cadena .nodo {
  background: var(--marino); color: #fff; border-radius: 5px; padding: 4px 8px;
  font-size: 11px; font-weight: 800; text-align: center; line-height: 1.2;
}
.acceso-cadena .nodo small { display: block; font-size: 8px; font-weight: 500; color: #9db4cb; margin-top: 1px; }
.acceso-cadena .nodo.cli { background: var(--acento); }
.acceso-cadena .flecha { color: #9aa9b8; font-size: 12px; }
.acceso-pie {
  margin-top: 20px; padding: 15px 32px 10px 32px; border-top: 1px solid var(--borde);
  background: var(--panel-alt); margin-left: -32px; margin-right: -32px;
  border-radius: 0 0 16px 16px;
}

.usuario-chip {
  display: flex; align-items: center; gap: 9px;
  background: #fff; border: 1px solid var(--borde); border-radius: 20px;
  padding: 4px 13px 4px 5px; box-shadow: 0 1px 2px rgba(9,24,42,.05);
}
.usuario-chip .eti { margin-right: 1px; }

/* ============================ ASISTENTE (CHAT) ============================ */

.chat-envoltura {
  display: flex; flex-direction: column; height: calc(100vh - 158px); min-height: 520px;
  background: #fff; border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); overflow: hidden;
}
.chat-encabezado {
  padding: 13px 17px; border-bottom: 1px solid var(--borde); background: var(--panel-alt);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.chat-mensajes { flex: 1; overflow-y: auto; padding: 18px 18px 8px 18px; background: #f6f9fc; }
.chat-vacio { text-align: center; padding: 48px 24px; color: var(--texto-suave); }
.chat-vacio .icono { font-size: 46px; margin-bottom: 10px; }
.chat-vacio .titulo { font-size: 17px; font-weight: 750; color: var(--texto); margin-bottom: 6px; }
.chat-vacio .texto { font-size: 13px; max-width: 460px; margin: 0 auto; line-height: 1.65; }

.burbuja { max-width: 86%; margin-bottom: 14px; padding: 12px 15px; border-radius: 11px; font-size: 13.5px; line-height: 1.6; }
.burbuja.usuario {
  margin-left: auto; background: var(--acento); color: #fff;
  border-bottom-right-radius: 3px; box-shadow: 0 3px 10px -4px rgba(11,87,199,.6);
}
.burbuja.asistente { background: #fff; border: 1px solid var(--borde); border-bottom-left-radius: 3px; box-shadow: 0 1px 2px rgba(9,24,42,.05); }
.burbuja .texto p { margin: 0 0 4px 0; }
.burbuja .meta { font-size: 10.5px; color: var(--texto-tenue); margin-bottom: 6px; font-family: var(--mono); }
.burbuja code { background: #eaeff5; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.chat-tabla { font-size: 12px; margin: 8px 0; }
.chat-tabla th { padding: 6px 9px; }
.chat-tabla td { padding: 5px 9px; }
.chat-lista { margin: 2px 0 2px 6px; }

.puntos { display: flex; gap: 4px; padding: 4px 0; }
.puntos span {
  width: 7px; height: 7px; border-radius: 50%; background: var(--texto-tenue);
  animation: rebotar 1.2s infinite ease-in-out;
}
.puntos span:nth-child(2) { animation-delay: .18s; }
.puntos span:nth-child(3) { animation-delay: .36s; }
@keyframes rebotar { 0%, 60%, 100% { transform: translateY(0); opacity: .45; } 30% { transform: translateY(-5px); opacity: 1; } }

.chat-sugerencias { display: flex; gap: 7px; flex-wrap: wrap; padding: 11px 17px 4px 17px; background: #fff; border-top: 1px solid var(--borde); }
.chip-sugerencia {
  font: inherit; font-size: 11.5px; font-weight: 550; padding: 5px 12px; border-radius: 16px;
  border: 1px solid var(--borde-fuerte); background: #fff; color: var(--texto-suave); cursor: pointer;
  transition: border-color .12s, color .12s, background .12s;
}
.chip-sugerencia:hover { border-color: var(--acento); color: var(--acento-fuerte); background: var(--acento-suave); }

.chat-entrada { display: flex; gap: 9px; padding: 11px 17px 13px 17px; background: #fff; align-items: flex-end; }
.chat-entrada textarea {
  font: inherit; font-size: 13.5px; flex: 1; resize: none; padding: 10px 13px;
  border: 1px solid var(--borde-fuerte); border-radius: 9px; max-height: 160px; line-height: 1.5;
}
.chat-entrada textarea:focus { outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }

.chat-politica {
  padding: 10px 17px; background: var(--info-suave); border-top: 1px solid #d9cff5;
  font-size: 11px; color: #3a2578; line-height: 1.5;
}

.propuesta {
  margin-top: 10px; border: 1px solid #e8c78a; background: var(--alerta-suave);
  border-radius: var(--radio-chico); padding: 12px 14px;
}
.propuesta-encabezado { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }

/* ============================ UTILIDADES ============================ */

.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.sep { height: 1px; background: var(--borde); margin: 15px 0; }
.mt { margin-top: 15px; }
.mb { margin-bottom: 15px; }
.suave { color: var(--texto-suave); }
.tenue { color: var(--texto-tenue); }
.chico { font-size: 12px; }
.mini { font-size: 11.5px; }
.mono { font-family: var(--mono); }
.negrita { font-weight: 700; }
.der { text-align: right; }
.centro { text-align: center; }
.ahora { white-space: nowrap; }

/* Lo que solo existe donde hay automatización se oculta de verdad: el atributo
   [hidden] del navegador lo gana cualquier regla con display (el menú lateral y
   los botones de la barra las tienen), así que aquí se fuerza. */
.solo-automatizacion[hidden] { display: none !important; }

/* Las acciones de una fila van en línea, no una debajo de otra. Antes, con cinco
   acciones (PDF, Ver, Cancelar, Eliminar, Archivar), la celda envolvía y el
   renglón crecía al triple; la tabla se lee de un golpe si no crece en vertical.
   Si no cabe, la tabla se desplaza en horizontal (la envoltura ya lo permite). */
table.tabla td.ahora .fila { flex-wrap: nowrap; }
/* Una fecha no se parte en dos renglones: «2026-» arriba y «10-29» abajo. */
table.tabla td.fecha { white-space: nowrap; }
.enlace { color: var(--acento); text-decoration: none; cursor: pointer; font-weight: 650; }
.enlace:hover { text-decoration: underline; color: var(--acento-fuerte); }

.definiciones { display: grid; grid-template-columns: auto 1fr; gap: 6px 16px; font-size: 12.5px; }
.definiciones dt { color: var(--texto-tenue); white-space: nowrap; }
.definiciones dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* Una línea que se recorta con puntos suspensivos cuando no cabe. Se usa en
   tablas densas donde el texto completo está en el `title` del elemento. */
.recorta { max-width: 250px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Los datos que alguien va a copiar y pegar (RFC, folios, hashes) van en mono y
   con separación de letras: así se distinguen 0/O y 1/l de un vistazo. */
.rfc, .mono-fuerte {
  font-family: var(--mono); letter-spacing: .4px; font-weight: 600;
}

/* La insignia de empresa que convive dentro de las tablas. */
.insignia-empresa {
  width: 23px; height: 23px; border-radius: 6px;
  display: inline-grid; place-items: center;
  color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .3px;
  line-height: 1; vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.18);
}

/* ============================ FILTROS Y CAPTURA ============================ */

.filtros {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(158px, 1fr));
  gap: 11px;
  align-items: end;
}
.filtros .campo { margin-bottom: 0; }

.linea-oc {
  display: grid;
  grid-template-columns: 1fr 90px 120px 36px;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}
.linea-oc button {
  padding: 8px; border-radius: var(--radio-chico);
  border: 1px solid var(--borde-fuerte); background: #fff; cursor: pointer; color: var(--texto-suave);
}
.linea-oc button:hover { border-color: var(--peligro); color: var(--peligro); background: var(--peligro-suave); }

/* ============================ CONVERSACIÓN ============================ */

.correo-msg {
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 13px 15px;
  margin-bottom: 12px;
  background: #fff;
}
.correo-msg.saliente { border-left: 4px solid var(--acento); }
.correo-msg.entrante { border-left: 4px solid var(--info); background: var(--info-suave); }
.correo-cuerpo {
  white-space: pre-wrap;
  font-size: 13px;
  line-height: 1.65;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px dashed var(--borde-fuerte);
}
.correo-efecto {
  margin-top: 10px;
  padding: 9px 12px;
  border-radius: var(--radio-chico);
  background: var(--ok-suave);
  border: 1px solid #a9dcc6;
  font-size: 11.5px;
  color: #08503a;
  font-weight: 550;
}

.adjuntos { display: flex; flex-direction: column; gap: 6px; }
.adjunto {
  display: flex;
  align-items: center;
  gap: 9px;
  flex-wrap: wrap;
  padding: 8px 11px;
  border: 1px solid var(--borde);
  border-radius: var(--radio-chico);
  background: var(--panel-alt);
}
.adjunto-nombre { font-size: 12.5px; font-weight: 650; }

.lista-simple { margin: 6px 0 0 0; padding-left: 18px; }
.lista-simple li { font-size: 12px; margin-bottom: 4px; line-height: 1.5; }

/* ============================ PEDIDO DEL CLIENTE ============================ */

/* La línea de captura alinea los importes a la derecha y en columna: sin eso,
   comparar el precio de un renglón con el de otro obliga a leerlos uno por uno. */

.linea-pedido {
  display: grid; grid-template-columns: 1fr 96px 92px 104px 30px;
  gap: 8px; align-items: center; margin-bottom: 6px;
}
.linea-pedido.encabezado {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .7px;
  color: var(--texto-tenue); font-weight: 800; margin-bottom: 5px;
}
.linea-pedido.encabezado .der { text-align: right; }
.linea-pedido select, .linea-pedido input { font-size: 13px; }
.linea-pedido .precio-unitario, .linea-pedido .importe { text-align: right; font-variant-numeric: tabular-nums; }
.linea-pedido .importe { color: var(--texto); font-weight: 600; }
.linea-pedido .quitar {
  border: 0; background: transparent; cursor: pointer; color: var(--texto-tenue);
  font-size: 14px; padding: 4px; border-radius: 5px;
}
.linea-pedido .quitar:hover { background: var(--peligro-suave); color: var(--peligro); }

.totales-pedido {
  border-top: 2px solid var(--borde-fuerte); margin-top: 15px; padding-top: 11px;
}
.fila-total {
  display: flex; justify-content: space-between; align-items: baseline;
  font-size: 13px; padding: 4px 0; color: var(--texto-suave);
}
.fila-total.total {
  font-size: 17px; font-weight: 780; color: var(--texto); border-top: 1px solid var(--borde);
  margin-top: 7px; padding-top: 9px; letter-spacing: -.3px;
}
.fila-total .num { font-variant-numeric: tabular-nums; color: var(--texto); font-weight: 650; }
.fila-total.total .num { font-weight: 780; }

/* ============================ QUÉ HACER AHORA ============================ */

/* Cada renglón es una cosa pendiente con su botón. El orden importa: arriba lo
   urgente. Un panel que muestra todo con el mismo peso obliga al usuario a
   decidir qué atender, y eso es justo lo que el sistema debería resolverle. */

.accion {
  display: grid; grid-template-columns: 36px 1fr auto; gap: 13px; align-items: center;
  padding: 12px 13px; border: 1px solid var(--borde); border-left: 3px solid var(--borde-fuerte);
  border-radius: var(--radio-chico); margin-bottom: 9px; background: #fff;
}
.accion:last-child { margin-bottom: 0; }
.accion.urgente { border-left-color: var(--alerta); background: #fffcf5; }
/* Marca de la acción: dos letras del tema (CO = cobranza, RE = recepción…).
   Comunica más que un dibujo, ocupa menos y no depende de la fuente. */
.accion-marca {
  width: 34px; height: 26px; border-radius: 4px;
  display: grid; place-items: center;
  font-size: 10.5px; font-weight: 800; letter-spacing: .5px;
  color: var(--texto-suave); background: #eaeff5; border: 1px solid #dde5ee;
}
.accion-marca.alta { color: var(--alerta); background: var(--alerta-suave); border-color: #eed3a2; }
.accion-texto { min-width: 0; }
.accion-titulo { font-weight: 650; font-size: 13.5px; margin-bottom: 2px; }
.accion .btn { white-space: nowrap; }


/* ============================ AUTOMATIZACIÓN ============================ */

/* Micro-etiqueta: el rótulo pequeño en mayúsculas de los productos empresariales. */
.micro-etiqueta {
  font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue);
}

.caja-suave {
  background: var(--panel-alt); border: 1px solid var(--borde);
  border-radius: var(--radio-chico); padding: 13px 15px;
}

.lista-numerada { margin: 8px 0 0; padding-left: 18px; }
.lista-numerada li { margin-bottom: 6px; line-height: 1.55; }

/* La línea de tiempo: una barra vertical que une los pasos, para que se lea como
   un recorrido y no como una lista de tareas suelta. */
.linea-tiempo { list-style: none; margin: 0; padding: 0; position: relative; }
.linea-tiempo::before {
  content: ""; position: absolute; left: 15px; top: 12px; bottom: 12px;
  width: 2px; background: var(--borde);
}

.paso-auto {
  position: relative; display: grid; grid-template-columns: 32px minmax(0, 1fr);
  gap: 14px; padding: 12px 0;
}
.paso-auto + .paso-auto { border-top: 1px dashed var(--borde); }

.paso-auto-num {
  width: 32px; height: 32px; border-radius: 50%; position: relative; z-index: 1;
  display: grid; place-items: center;
  background: #fff; border: 2px solid var(--borde-fuerte);
  font-size: 12px; font-weight: 800; color: var(--texto-suave);
}
.paso-auto.pausado .paso-auto-num { border-style: dashed; color: var(--alerta); border-color: var(--alerta); }

.paso-auto-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.paso-auto-titulo { font-size: 14px; font-weight: 650; letter-spacing: -.2px; }
.paso-auto-ruta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 5px; }
.paso-auto-flecha { color: var(--borde-fuerte); font-size: 12px; }
.paso-quien { font-size: 11.5px; font-weight: 600; }
.paso-auto-explica { font-size: 12.5px; color: var(--texto-suave); margin-top: 7px; line-height: 1.55; }
.paso-auto-pie {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--borde);
}
.mono-auto { margin-top: 6px; font-family: var(--mono); font-size: 10.5px; opacity: .75; }
.paso-auto.pausado { background: linear-gradient(90deg, var(--alerta-suave), transparent 55%); }

/* Interruptor: una casilla no comunica «automático / pausado»; esto sí. */
.interruptor { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; flex: 0 0 auto; }
.interruptor input { position: absolute; opacity: 0; width: 0; height: 0; }
.interruptor-texto {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--texto-tenue); padding-left: 40px; position: relative; line-height: 22px;
}
.interruptor-texto::before {
  content: ""; position: absolute; left: 0; top: 1px; width: 32px; height: 18px;
  border-radius: 20px; background: #d8e0ea; transition: background .16s;
}
.interruptor-texto::after {
  content: ""; position: absolute; left: 3px; top: 4px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; transition: transform .16s;
  box-shadow: 0 1px 2px rgba(16,24,40,.25);
}
.interruptor input:checked + .interruptor-texto { color: var(--ok); }
.interruptor input:checked + .interruptor-texto::before { background: var(--ok); }
.interruptor input:checked + .interruptor-texto::after { transform: translateX(14px); }
.interruptor input:focus-visible + .interruptor-texto::before { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Barra de cambios pendientes: pegada abajo, para que no se guarden sin querer
   ni se queden sin guardar. */
.barra-cambios {
  position: sticky; bottom: 12px; z-index: 40;
  display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap;
  margin-top: 16px; padding: 12px 16px;
  background: var(--marino); color: #fff; border-radius: var(--radio);
  box-shadow: var(--sombra-alta);
}
.barra-cambios .mini { color: #d7e2ee; }
.barra-cambios.oculta { display: none; }
.barra-cambios .btn.sec { background: transparent; color: #fff; border-color: rgba(255,255,255,.4); }
.barra-cambios .btn.sec:hover { background: rgba(255,255,255,.12); color: #fff; }


/* ============================ TARJETAS DE REGLA ============================ */

.regla {
  background: var(--panel); border: 1px solid var(--borde); border-radius: var(--radio);
  box-shadow: var(--sombra); padding: 15px 16px; transition: box-shadow .16s;
}
.regla:hover { box-shadow: var(--sombra-2); }
.regla.apagada { background: var(--panel-alt); border-style: dashed; }

.regla-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.regla-nombre { font-size: 14px; font-weight: 700; letter-spacing: -.2px; }

/* La frase completa: es lo que hace verificable la regla. Va destacada porque es
   la que se lee; los bloques de abajo son el desglose por campos. */
.regla-frase {
  margin-top: 9px; padding: 10px 13px;
  background: var(--acento-suave); border-left: 3px solid var(--acento);
  border-radius: var(--radio-chico);
  font-size: 13px; line-height: 1.55; color: #0a3d7a;
}
.regla.apagada .regla-frase { background: #eef1f5; border-left-color: var(--texto-tenue); color: var(--texto-suave); }

.regla-bloques {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin-top: 12px;
}
.regla-bloque {
  border: 1px solid var(--borde); border-radius: var(--radio-chico);
  padding: 8px 10px; font-size: 12.5px; background: var(--panel-alt);
}
.regla-bloque .micro-etiqueta { display: block; margin-bottom: 3px; }

.regla-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--borde);
}


/* ============================ BANDEJA TIPO OUTLOOK ============================ */

/* Tres columnas: carpetas, lista y lectura. La lectura ocupa el resto del ancho
   porque es donde se pasa el tiempo leyendo. */
.ol-app {
  display: grid;
  grid-template-columns: 208px minmax(280px, 380px) minmax(0, 1fr);
  gap: 0;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  background: var(--panel);
  box-shadow: var(--sombra);
  overflow: hidden;
  min-height: calc(100vh - 190px);
}
@media (max-width: 1200px) {
  .ol-app { grid-template-columns: 180px minmax(240px, 320px) minmax(0, 1fr); }
}
@media (max-width: 900px) {
  .ol-app { grid-template-columns: 1fr; }
  .ol-carpetas { display: none; }
  .ol-lectura { display: none; }
}

/* --- Columna de carpetas --- */
.ol-carpetas {
  border-right: 1px solid var(--borde);
  background: var(--panel-alt);
  padding: 12px 10px;
}
.ol-carpetas-titulo {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .9px;
  color: var(--texto-tenue); padding: 14px 6px 6px;
}
.ol-carpeta {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font: inherit; font-size: 12.8px; color: var(--texto);
  padding: 7px 9px; border: 0; border-radius: 5px; background: transparent;
  cursor: pointer; text-align: left; text-decoration: none;
}
.ol-carpeta:hover { background: rgba(11, 87, 199, .07); }
.ol-carpeta.activa { background: var(--acento-suave); color: var(--acento-fuerte); font-weight: 700; }
.ol-cuenta {
  font-size: 10.5px; font-weight: 700; color: var(--texto-suave);
  background: #e7ecf3; border-radius: 10px; padding: 1px 7px; min-width: 20px; text-align: center;
  font-variant-numeric: tabular-nums;
}
.ol-carpeta.activa .ol-cuenta { background: #fff; color: var(--acento-fuerte); }

.ol-buzon { display: flex; gap: 8px; align-items: flex-start; padding: 6px 9px; }
.ol-buzon .ol-marca { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex: 0 0 auto; }
.ol-buzon .recorta { max-width: 132px; }
.ol-estado {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .4px;
  color: var(--texto-tenue); margin-top: 2px;
}
.ol-estado.on { color: var(--ok); }

/* --- Columna de la lista --- */
.ol-lista { border-right: 1px solid var(--borde); display: flex; flex-direction: column; min-width: 0; }
.ol-lista-enc {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
  padding: 11px 13px; border-bottom: 1px solid var(--borde); background: var(--panel);
}
.ol-filas { overflow-y: auto; flex: 1; }

.ol-fila {
  display: block; width: 100%; text-align: left; font: inherit;
  padding: 9px 12px 9px 12px; border: 0; border-bottom: 1px solid #eef1f6;
  background: transparent; cursor: pointer; position: relative; min-width: 0;
}
.ol-fila:hover { background: #f4f7fb; }
.ol-fila.activa { background: var(--acento-suave); }
.ol-fila.nuevo { background: #fbfdff; }
.ol-fila.nuevo.activa { background: var(--acento-suave); }

/* La barra lateral dice de qué empresa es, como la etiqueta de color de Outlook. */
.ol-marca {
  position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  border-radius: 0 2px 2px 0;
}
.ol-fila-cabeza { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.ol-de {
  font-size: 12.8px; font-weight: 600; color: var(--texto);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
  display: flex; align-items: center; gap: 6px;
}
.ol-fila.nuevo .ol-de { font-weight: 800; }
.ol-punto { width: 7px; height: 7px; border-radius: 50%; background: var(--acento); flex: 0 0 auto; }
.ol-hora { font-size: 11px; color: var(--texto-tenue); flex: 0 0 auto; font-variant-numeric: tabular-nums; }
.ol-asunto {
  display: block; font-size: 12.5px; color: var(--texto); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ol-fila.nuevo .ol-asunto { font-weight: 700; }
.ol-extracto {
  display: block; font-size: 11.5px; color: var(--texto-tenue); margin-top: 1px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ol-meta { display: flex; align-items: center; gap: 5px; flex-wrap: wrap; margin-top: 4px; }
.ol-chip {
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .3px;
  color: var(--texto-suave); background: #eef2f7; border-radius: 3px; padding: 1px 5px;
}

/* --- Columna de lectura --- */
.ol-lectura { display: flex; flex-direction: column; min-width: 0; background: var(--panel); }
.ol-vacio { margin: auto; text-align: center; padding: 40px 24px; color: var(--texto-tenue); }
.ol-vacio-titulo { font-size: 15px; font-weight: 650; color: var(--texto-suave); margin-bottom: 5px; }

.ol-lectura-enc {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  padding: 13px 16px; border-bottom: 1px solid var(--borde);
}
.ol-lectura-asunto {
  font-size: 15.5px; font-weight: 700; letter-spacing: -.2px; line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis;
}
.ol-aviso {
  margin: 12px 16px 0; padding: 9px 12px; font-size: 12px;
  background: var(--acento-suave); color: #0a3d7a; border-radius: var(--radio-chico);
  border-left: 3px solid var(--acento); line-height: 1.5;
}
.ol-lectura-cuerpo { padding: 14px 16px 24px; overflow-y: auto; flex: 1; }

.navegacion-movil { display: none; }

/* ============================ RESPONSIVO ============================ */

@media (max-width: 900px) {
  #app { flex-direction: column; }
  .sidebar { width: 100%; flex: none; height: auto; position: static; }
  #nav { display: none; }
  .navegacion-movil { display: flex; align-items: center; gap: 10px; padding: 10px 14px; font-weight: 600; }
  .navegacion-movil select { min-width: 0; flex: 1; min-height: 44px; }
  #nav a { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 8px 13px; }
  #nav a.activa { border-left: 0; border-bottom-color: #3d9bf5; background: rgba(29,127,232,.16); }
  .nav-grupo { display: none; }
  .reloj { display: none; }
  .campo-fila { grid-template-columns: 1fr; }
  .vista { padding: 16px 14px 60px 14px; }
  .barra-superior { padding: 12px 14px; }
  .selector-empresa-menu { right: auto; left: 0; min-width: 280px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* ============================ ACCESO ============================ */
/* Va al final a propósito: es la pantalla que se abre antes que nada y no puede
   depender de que otra regla no la pise. */

.acceso {
  min-height: 100vh; width: 100%;
  display: flex; align-items: center; justify-content: center;
  /* Fondo claro, como el resto del sistema: la pantalla de entrada no debe
     parecer de otro producto. */
  background:
    radial-gradient(900px 420px at 50% -8%, #e6eefb 0%, rgba(230, 238, 251, 0) 62%),
    var(--fondo);
  padding: 32px 20px;
}

.acceso-caja {
  background: #fff;
  border: 1px solid var(--borde);
  border-radius: 12px;
  padding: 34px 34px 30px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 20px 44px -22px rgba(16, 32, 51, .35);
}

/* Marca: cuadro del color de la marca con las dos letras, y el nombre al lado. */
.acceso-marca {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 26px;
}
.acceso-marca .logo {
  width: 46px; height: 46px; flex: 0 0 auto;
  display: grid; place-items: center;
  border-radius: 8px;
  background: var(--acento);
  color: #fff;
  font-size: 17px; font-weight: 800; letter-spacing: -.3px;
}
.acceso-marca .titulo {
  font-size: 21px; font-weight: 750; letter-spacing: -.5px;
  color: var(--texto); line-height: 1.15;
}
.acceso-marca .sub {
  font-size: 12px; color: var(--texto-tenue); margin-top: 2px;
}

.acceso-caja .campo { margin-bottom: 16px; }
.acceso-caja .campo label {
  display: block; font-size: 11.5px; font-weight: 700; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.acceso-caja .campo input,
.acceso-caja .campo select {
  width: 100%; font: inherit; font-size: 13.5px;
  padding: 10px 12px;
  border: 1px solid var(--borde-fuerte); border-radius: 6px;
  background: #fff; color: var(--texto);
}
.acceso-caja .campo input:focus,
.acceso-caja .campo select:focus {
  outline: none; border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave);
}
.acceso-caja .btn { margin-top: 6px; padding: 11px 16px; font-size: 13.5px; }
.acceso-caja #acceso-error:empty { display: none; }
.acceso-caja #acceso-error { margin-bottom: 12px; }

/* ==========================================================================
   CATÁLOGOS, BITÁCORA Y FORMULARIOS GENERADOS
   ==========================================================================
   Estas piezas nacieron con las pantallas nuevas: la lista de catálogos, su
   formulario automático y la bitácora detallada. Se escriben aquí, al final,
   para que el resto del sistema conserve su escala tipográfica y sus sombras:
   no se trata de un diseño distinto, sino de las mismas piezas aplicadas a
   contenido que antes no existía.
   ========================================================================== */

.cat-tabs {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  padding: 6px;
  margin-bottom: 16px;
  background: var(--panel);
  border: 1px solid var(--borde);
  border-radius: 10px;
  box-shadow: var(--sombra-1, 0 1px 2px rgba(16, 32, 51, .06));
}
.cat-tab {
  display: inline-block;
  padding: 7px 12px;
  border-radius: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--texto-suave);
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.cat-tab:hover { background: var(--panel-alt); color: var(--texto); }
.cat-tab.activa {
  background: var(--acento-suave);
  border-color: #c3d7f7;
  color: var(--acento-fuerte);
}

/* Formulario generado de la definición del servidor. */
.cat-form {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 16px;
}
.cat-form .campo { margin-bottom: 13px; }
.cat-form .campo.largo { grid-column: 1 / -1; }
.cat-form .campo.corto { max-width: 220px; }
.cat-form .campo input,
.cat-form .campo select,
.cat-form .campo textarea { width: 100%; }
.cat-form .campo input[type="checkbox"] { width: auto; }
.cat-form .cat-check { display: flex; flex-direction: column; justify-content: flex-end; padding-bottom: 8px; }

.cat-inactivo td { opacity: .55; }

/* Opciones de conciliación (una tarjeta por documento candidato). */
.cat-opcion {
  display: flex;
  align-items: flex-start;
  gap: 4px;
  padding: 10px 12px;
  border: 1px solid var(--borde);
  border-radius: 8px;
  margin-bottom: 8px;
  cursor: pointer;
  background: var(--panel);
}
.cat-opcion:hover { border-color: var(--acento); background: var(--acento-suave); }

/* Accesos a los catálogos desde Configuración. */
.cat-accesos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 10px;
}
.cat-acceso {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--acento);
  border-radius: 8px;
  text-decoration: none;
  color: var(--texto);
  background: var(--panel);
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.cat-acceso:hover {
  border-color: var(--acento);
  box-shadow: 0 4px 14px rgba(16, 32, 51, .08);
  transform: translateY(-1px);
}
.cat-acceso .negrita { display: block; font-size: 13px; margin-bottom: 3px; }
.cat-acceso .mini { line-height: 1.45; }

/* Visor del JSON crudo en el detalle de la bitácora. */
.bit-json {
  margin: 0;
  padding: 10px 12px;
  max-height: 260px;
  overflow: auto;
  background: #f7f9fb;
  border: 1px solid var(--borde);
  border-radius: 7px;
  font-family: var(--mono, ui-monospace, "Cascadia Mono", Consolas, monospace);
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--texto-suave);
  white-space: pre-wrap;
  word-break: break-word;
}

@media (max-width: 720px) {
  .cat-form { grid-template-columns: 1fr; }
  .cat-form .campo.corto { max-width: none; }
}

/* Monograma del asistente: el mismo lenguaje que el logo, sin pictogramas. */
.chat-vacio .icono {
  width: 56px; height: 56px; margin: 0 auto 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--acento); color: #fff; border-radius: 14px;
  font-size: 20px; font-weight: 800; letter-spacing: -.4px;
  box-shadow: 0 6px 18px rgba(11, 87, 199, .24);
}

/* Contador de avisos nuevos en el menú (la campanita). */
.nav-badge {
  display: inline-block;
  margin-left: 6px;
  min-width: 17px;
  padding: 1px 5px;
  border-radius: 9px;
  background: var(--acento);
  color: #fff;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  text-align: center;
  vertical-align: middle;
}
.nav-badge[hidden] { display: none; }

/* La redacción sigue disponible en móvil y los formularios no recortan cantidades. */
@media (max-width: 900px) {
  .ol-carpetas { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
  #cr-redactar, .ol-carpetas-titulo { grid-column: 1 / -1; }
  .modal-fondo { padding: 12px; }
  .modal-cuerpo { padding: 14px; max-height: 70dvh; overflow: auto; }
  .modal-pie { flex-wrap: wrap; }
  .modal table { min-width: 600px; }
}