/* ===========================================================================
   BITACORA - hoja propia, diseno heredado del correo. Version definitiva.

   COMO SE LEE ESTA HOJA:
   La pantalla es una columna. Arriba, dos franjas FIJAS (`.bt-nav` de 42 px y
   `.bt-fil` de 38 px, o la ficha de 46 px); abajo, `.bt-cuerpo`, que se lleva
   todo lo que sobra y HACE SCROLL. Nada mas es fijo. Eso es lo que mantiene
   el adorno por debajo del 25% del alto sin tener que medirlo cada vez.

   TODO VA ANIDADO BAJO `.bt`. Clases como `.tb`, `.chip` o `.sec` son
   demasiado genericas para soltarlas al aire dentro del correo: colisionarian.

   LOS COLORES SON DEL CORREO: `--m-ink`, `--m-main`, `--m-line`, `--m-ink2`,
   `--ac`. El correo tiene modo oscuro (`.nite`) y Bitacora cambia con el sin
   una linea de mas. Nunca hay un panel blanco dentro de un correo oscuro.

   Medidas copiadas de styles.css del correo, no inventadas:
     radios 3px y 5px · letra base 13px, secundaria 12,5px
     seccion 11px/700 en versalitas · cabecera 15px/600 · CERO sombras
     profundidad por tonos, nunca por sombra
   PROHIBIDA la rayita de acento a la izquierda: bloque de fondo lleno, o
   punto de 7px. Nada de `border-left` de color.
   =========================================================================== */

.bt{
  --bt-piso:color-mix(in srgb, var(--m-ink) 3%, var(--m-main));
  --bt-suave:color-mix(in srgb, var(--m-ink) 6%, var(--m-main));
  --bt-suave2:color-mix(in srgb, var(--m-ink) 11%, var(--m-main));
  --bt-rojo:#b42318; --bt-rojo-bg:#fdf3f2; --bt-rojo-bd:#f2ccc8;
  --bt-ok:#0a7c4a;  --bt-ok-bg:#f0f9f4;
  --bt-amb:#9a6a11; --bt-amb-bg:#fdf6e7;

  height:100%; display:flex; flex-direction:column;
  background:var(--bt-piso); color:var(--m-ink);
  font-size:13px; line-height:1.5; overflow:hidden;
  /* ⭐ SE MIDE A SI MISMA, NO A LA VENTANA. Bitacora vive en dos sitios: a
     pantalla completa y en la caja angosta de al lado del correo. Con una
     `@media` la caja angosta creia que tenia 1.919 px —porque la VENTANA los
     tiene— y los siete botones se le desbordaban en cuatro renglones: 250 px
     de adorno, el 36% del alto, cuando el tope pactado es 25%. Midiendose a
     si misma, la barra se encoge cuando la caja se encoge. */
  container-type:inline-size; container-name:bt;
}
.nite .bt{
  --bt-piso:#111820; --bt-suave:#1a232d; --bt-suave2:#242f3b;
  --bt-rojo:#ff8a7a; --bt-rojo-bg:rgba(255,138,122,.10); --bt-rojo-bd:rgba(255,138,122,.28);
  --bt-ok:#4ade9b;  --bt-ok-bg:rgba(74,222,155,.10);
  --bt-amb:#e0a53a; --bt-amb-bg:rgba(224,165,58,.12);
}
.bt *{ box-sizing:border-box; }
.bt button{ font-family:inherit; }

/* ═══ 1. LA BARRA DE LOS SIETE BOTONES. Es adorno, y por eso mide 42 px ═══ */
.bt-nav{
  flex:0 0 auto; min-height:36px; display:flex; align-items:center; gap:7px;
  padding:4px 12px; background:var(--m-main); border-bottom:1px solid var(--m-line);
  flex-wrap:wrap; overflow:visible;
}
.bt-nav .marca{
  display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:600;
  letter-spacing:-.01em; padding-right:10px; margin-right:2px;
  border-right:1px solid var(--m-line); height:24px; flex:0 0 auto; white-space:nowrap;
}
.bt-nav .marca i{ color:var(--ac); font-size:16px; }
.bt-nav .tabs{ display:flex; gap:4px; flex:1 1 auto; flex-wrap:wrap; min-width:0; }
.bt-nav .tab{
  height:26px; padding:0 10px; border:0; border-radius:4px;
  background:var(--bt-suave2); color:var(--m-ink2); font-size:12.5px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; white-space:nowrap;
}
.bt-nav .tab:hover{ background:var(--bt-suave); color:var(--m-ink); }
.bt-nav .tab.on{ background:var(--ac); color:#fff; font-weight:600; }
.bt-nav .tab i{ font-size:15px; }
.bt-nav .cn{ font-size:11px; font-variant-numeric:tabular-nums; opacity:.8; }
.bt-nav .tab.on .cn{ opacity:.92; }
.bt-nav .sp{ flex:0 0 auto; min-width:6px; margin-left:auto; }
.bt .ico{
  width:28px; height:28px; flex:0 0 auto; border:1px solid var(--m-line); border-radius:4px;
  background:transparent; color:var(--m-ink2); cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center; font-size:16px;
}
.bt .ico:hover{ background:var(--bt-suave2); color:var(--m-ink); }

/* ═══ 2. LA FRANJA DE FILTROS. Tambien es adorno: 38 px, una sola linea ═══ */
.bt-fil{
  flex:0 0 auto; min-height:34px; display:flex; align-items:center; gap:6px;
  padding:4px 12px; background:var(--m-main); border-bottom:1px solid var(--m-line);
  flex-wrap:wrap; overflow:visible;
}
.bt-fil .sp{ flex:1 1 auto; min-width:0; }
/* «Viendo 89 de 89» va ARRIBA, junto al buscador. Con scroll y sin paginacion
   el pie queda a 3.000 px: nadie baja hasta alla a leer cuantas son. */
.bt-fil .cuantas{ font-size:12px; color:var(--m-ink2); flex:0 0 auto; white-space:nowrap; margin-left:auto; }
.bt-fil .cuantas + .sp{ flex:0 0 0; min-width:0; }
.bt-fil .cuantas ~ .busca{ margin-left:8px; }
.bt-fil .cuantas b{ color:var(--m-ink); font-weight:600; }
.bt-fil .div{ width:1px; height:18px; background:var(--m-line); flex:0 0 auto; margin:0 3px; }
.bt-fil .et{ font-size:12px; color:var(--m-ink2); flex:0 0 auto; white-space:nowrap; }
.bt .chip{
  height:24px; padding:0 9px; border:1px solid var(--m-line); border-radius:3px;
  background:var(--bt-suave2); color:var(--m-ink); font-size:12.5px; cursor:pointer;
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap; flex:0 0 auto;
}
.bt .chip:hover{ background:var(--bt-suave); }
.bt .chip.on{ background:var(--ac); border-color:var(--ac); color:#fff; font-weight:600; }
.bt .chip .k{ font-size:11px; opacity:.72; font-variant-numeric:tabular-nums; font-weight:600; }
.bt .chip.on .k{ opacity:.92; }
.bt .busca{
  display:inline-flex; align-items:center; gap:6px; flex:0 0 auto;
  background:var(--bt-suave2); border:1px solid var(--m-line); border-radius:3px;
  height:24px; padding:0 8px; flex:0 1 240px; min-width:220px; margin-left:auto;
}
.bt .busca i{ font-size:14px; color:var(--m-ink2); }
.bt .busca input{
  border:0; background:transparent; outline:0; font:inherit; font-size:12.5px;
  color:var(--m-ink); width:100%; padding:0;
}
.bt .busca input::placeholder{ color:var(--m-ink2); }

/* ═══ 3. LA FICHA. Reemplaza a la franja de filtros: 46 px, una sola linea ══ */
.bt-ficha{
  flex:0 0 auto; height:40px; display:flex; align-items:center; gap:10px;
  padding:0 12px; background:var(--m-main); border-bottom:1px solid var(--m-line);
}
.bt-ficha .qq{ min-width:0; display:block; }
.bt-ficha .l1{
  display:block; font-size:15px; font-weight:600; line-height:1.15; letter-spacing:-.005em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt-ficha .l2{
  display:block; font-size:12px; color:var(--m-ink2); line-height:1.3; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt-ficha .l2 b{ color:var(--m-ink); font-weight:600; }

/* ═══ 4. EL CUERPO. Es lo unico que rueda. ═══════════════════════════════ */
/* `overflow-x:hidden` RECORTABA las columnas de la derecha sin dejar manera
   de llegar a ellas: en la caja angosta, la tabla de empresas se salia 538 px
   y esos 538 px no existian para el usuario. Con `auto` se alcanzan rodando de
   lado, dentro de su propia caja, sin que ruede la pagina entera. */
.bt-cuerpo{ flex:1 1 auto; min-height:0; overflow-y:auto; overflow-x:auto; }
/* ═══ EN LA CAJA ANGOSTA. Lo que se cae es el ROTULO, nunca el boton: los
   siete siguen ahi, alcanzables y con su cuenta, y cada uno dice lo que es al
   pasar el mouse. Un boton que no cabe y se sale es peor que un boton corto. */
@container bt (max-width: 760px){
  .bt-nav .tab .rot, .bt-nav .marca .rot{ display:none; }
  .bt-nav .tab{ padding:0 7px; gap:4px; }
  .bt-nav .marca{ padding-right:7px; }
  .bt .chip{ font-size:12px; padding:0 7px; }
  .bt .busca{ flex:1 1 160px; min-width:160px; }
}
.bt-cuerpo::-webkit-scrollbar{ width:9px; }
.bt-cuerpo::-webkit-scrollbar-thumb{ background:var(--bt-suave2); border-radius:5px; }
.bt-cuerpo::-webkit-scrollbar-track{ background:transparent; }

/* Dos columnas dentro de la ficha. No son pestanas: es la misma pantalla. */
.bt .dos{ display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); align-items:start; }
.bt .dos .cB{ border-left:1px solid var(--m-line); }
@media (max-width:1000px){ .bt .dos{ grid-template-columns:minmax(0,1fr); } .bt .dos .cB{ border-left:0; border-top:1px solid var(--m-line); } }

/* Encabezado de seccion. Pegado arriba mientras se baja: es la unica cosa
   que se queda quieta dentro del cuerpo, y por eso mide 26 px y nada mas. */
.bt .sec{
  position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:8px;
  height:26px; padding:0 14px; background:var(--bt-piso);
  border-bottom:1px solid var(--m-line);
  font-size:11px; font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  color:var(--m-ink2); white-space:nowrap; overflow:hidden;
}
.bt .sec .sx{
  font-size:11px; font-weight:400; letter-spacing:0; text-transform:none;
  color:var(--m-ink2); overflow:hidden; text-overflow:ellipsis;
}

/* ═══ 5. FILAS DE LISTA (Hoy, Ritmos, fichas) ══════════════════════════ */
.bt .it{
  padding:6px 14px; border-bottom:1px solid var(--m-line);
  background:var(--m-main);
}
/* ⭐ LO QUE NO LLEVA A NINGUNA PARTE NO PUEDE PARECER CLICABLE.
   El dedito y el resaltado al pasar el mouse NO cuelgan de la clase `.it`:
   cuelgan de TENER DESTINO. Una caja sin `data-…` se queda quieta, y asi
   nadie le hace clic a algo que no va a responder. Vale para toda la
   aplicacion de una sola vez, y para lo que se agregue manana tambien. */
.bt .it[data-con], .bt .it[data-emp], .bt .it[data-p], .bt .it[data-tema]{ cursor:pointer; }
.bt .it[data-con]:hover, .bt .it[data-emp]:hover,
.bt .it[data-p]:hover,   .bt .it[data-tema]:hover{ background:var(--bt-suave); }
/* Bloque de fondo lleno, NUNCA una rayita de acento a la izquierda. */
.bt .it.mal{ background:var(--bt-rojo-bg); }
.bt .it.mal[data-con]:hover, .bt .it.mal[data-emp]:hover{ filter:brightness(.985); }
.nite .bt .it.mal[data-con]:hover, .nite .bt .it.mal[data-emp]:hover{ filter:brightness(1.12); }
/* Envoltura que solo pone aire alrededor de otra caja. A proposito NO tiene
   ni dedito ni resaltado: antes esto era un `.it`, que si los tenia, y quien
   le hacia clic no iba a ninguna parte. */
.bt .envuelto{
  padding:6px 14px; border-bottom:1px solid var(--m-line); background:var(--m-main);
}
.bt .envuelto .rol{ margin-top:0; }
.bt .i1{ display:flex; align-items:center; gap:7px; min-width:0; }
/* El titulo se corta con puntos suspensivos en vez de saltar de renglon:
   una fila que a veces mide uno y a veces dos renglones no se puede leer
   en diagonal, que es como se lee una lista de ochenta. */
.bt .i1 .t{
  font-size:13px; font-weight:600; flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .i1 .cu{
  margin-left:auto; font-size:12.5px; color:var(--m-ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bt .i1 .cu.mal{ color:var(--bt-rojo); font-weight:600; }
.bt .i1 .cu.hoy{ color:var(--bt-amb); font-weight:600; }
.bt .i2{
  font-size:12.5px; color:var(--m-ink); line-height:1.4; margin-top:2px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* El `.i2` de una lista va en un solo renglon para poder leerla en diagonal;
   pero cuando el `.i2` es una explicacion —«todavia no se puede decir de que
   le escribe»— cortarla a la mitad no ahorra nada y la deja sin sentido. */
.bt .i2.tenue{
  color:var(--m-ink2); white-space:normal; overflow:visible; line-height:1.45;
}
.bt .i3{
  font-size:12px; color:var(--m-ink2); margin-top:2px; line-height:1.4;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .i3 b{ color:var(--m-ink); font-weight:600; }

/* ═══ 6. LA ALERTA DE POSIBLE SUPLANTACION. Rojo SOLO aqui ═════════════ */
.bt .alerta{
  background:var(--bt-rojo-bg); border-bottom:1px solid var(--bt-rojo-bd);
  padding:7px 14px;
}
.bt .alerta[data-con]{ cursor:pointer; }
.bt .alerta[data-con]:hover{ filter:brightness(.985); }
.nite .bt .alerta[data-con]:hover{ filter:brightness(1.12); }
.bt .alerta .a1{
  display:flex; align-items:center; gap:7px; color:var(--bt-rojo);
  font-weight:600; font-size:13px;
}
.bt .alerta .a1 i{ font-size:16px; }
.bt .alerta .a2{ font-size:12.5px; color:var(--m-ink); line-height:1.4; margin-top:2px; }

/* ═══ 7. LA CITA. R3: sin esto, la linea no se pinta ═══════════════════ */
.bt .cita{
/* ⭐ LA CITA VA EN UN RENGLON, NO EN UNA CAJA DE TRES.
   Era un recuadro de 54 px de alto para una frase que ocupa uno: el asunto
   arriba y, debajo, quien y cuando. Eso es lo que hacia que once pendientes
   midieran 146 px cada uno. Ahora es una tira de 20 px: la frase se corta
   con puntos suspensivos si no cabe, y lo que NUNCA se corta es la fecha ni
   el boton de ir a verla — que es lo que hace cierta la regla de que todo
   lo que se afirma se puede ir a comprobar. */
  display:flex; align-items:center; gap:7px; min-width:0;
  background:var(--bt-suave); border:1px solid var(--m-line); border-radius:3px;
  padding:0 8px; height:20px; margin-top:4px; font-size:12px; line-height:1;
}
.bt .cita q{
  color:var(--m-ink); quotes:"«" "»";
  flex:0 1 auto; min-width:40px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.bt .cita .pie{
  display:inline-flex; align-items:center; gap:7px; margin:0;
  font-size:11.5px; color:var(--m-ink2); flex:0 0 auto; white-space:nowrap;
}
.bt .lk{
  border:0; background:none; padding:0; margin-left:8px; cursor:pointer;
  color:var(--ac); font:inherit; font-size:12px; font-weight:600;
}
.bt .lk:hover{ text-decoration:underline; }
.bt .cita .lk{ margin-left:0; }

/* ═══ 8. EL ROL: una suposicion con su razon, su cita y el si/no ═══════ */
.bt .rol{
  background:var(--bt-suave); border:1px solid var(--m-line); border-radius:4px;
  padding:8px 10px; margin-top:7px;
}
.bt .rol .r1{ font-size:12.5px; }
.bt .rol .r1 b{ font-weight:600; }
.bt .rol .r2{ font-size:12.5px; color:var(--m-ink2); margin-top:3px; line-height:1.5; }
.bt .sino{ display:inline-flex; gap:6px; margin-top:7px; }
.bt .sino button{
  height:25px; padding:0 10px; border:1px solid var(--m-line); border-radius:3px;
  background:var(--bt-suave2); color:var(--m-ink); font:inherit; font-size:12px;
  font-weight:600; cursor:pointer;
}
.bt .sino .si:hover{ background:var(--ac); border-color:var(--ac); color:#fff; }
.bt .sino .no:hover{ background:var(--bt-suave); }

/* ═══ 9. ETIQUETAS Y PUNTOS. El punto de 7px sustituye a la rayita ════ */
.bt .eti{
  display:inline-flex; align-items:center; gap:5px; flex:0 0 auto;
  background:var(--bt-suave2); color:var(--m-ink2); border-radius:3px;
  padding:2px 7px; font-size:11.5px; white-space:nowrap;
}
.bt .eti b{ color:inherit; font-weight:700; }
.bt .eti.mal{ background:var(--bt-rojo-bg); color:var(--bt-rojo); }
.bt .eti.ok{ background:var(--bt-ok-bg); color:var(--bt-ok); }
.bt .eti.acc{ background:color-mix(in srgb, var(--ac) 14%, transparent); color:var(--ac); }
.bt .pt7{
  width:7px; height:7px; border-radius:50%; flex:0 0 7px; display:inline-block;
  background:color-mix(in srgb, var(--m-ink) 34%, transparent);
}
.bt .pt7.mal{ background:var(--bt-rojo); }
.bt .pt7.hoy{ background:var(--bt-amb); }
.bt .pt7.ok{ background:var(--bt-ok); }
.bt .tenue{ color:var(--m-ink2); }
.bt .malt{ color:var(--bt-rojo); font-weight:600; }
.bt .mono{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:12px; }
.bt .dom{
  font-family:ui-monospace,Menlo,Consolas,monospace; font-size:11.5px;
  color:var(--m-ink2); white-space:nowrap;
}
.bt .dom.ac{ color:var(--ac); }
.bt .dom.mal{ color:var(--bt-rojo); }

/* Identificador de dos renglones: el correo se escribe UNA sola vez */
.bt .gg{ display:inline-flex; align-items:center; gap:8px; min-width:0; vertical-align:middle; }
.bt .gg .ini{
  width:20px; height:20px; flex:0 0 20px; border-radius:3px; background:var(--bt-suave2);
  display:inline-flex; align-items:center; justify-content:center;
  font-size:10px; font-weight:700; color:var(--m-ink2); letter-spacing:.02em;
}
.bt .gg .nm{ min-width:0; line-height:1.35; display:inline-flex; align-items:baseline; gap:8px; overflow:hidden; }
.bt .gg .n1{ flex:0 1 auto; font-size:13px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.bt .gg .n1.sinnombre{ font-weight:500; color:var(--m-ink2); }
.bt .gg .n2{ flex:0 1 auto; font-size:11.5px; color:var(--m-ink2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ═══ 10. TABLAS (Empresas, Personas, Ajustes) ════════════════════════ */
.bt .tb{ width:100%; border-collapse:collapse; table-layout:auto; }
.bt .tb th{
  position:sticky; top:0; z-index:2; text-align:left; background:var(--bt-piso);
  padding:0 14px; height:26px; border-bottom:1px solid var(--m-line);
  font-size:11px; font-weight:700; letter-spacing:.055em; text-transform:uppercase;
  color:var(--m-ink2); white-space:nowrap;
}
.bt .tb th.num, .bt .tb td.num{ text-align:right; font-variant-numeric:tabular-nums; }
.bt .tb th.ord{ cursor:pointer; user-select:none; }
.bt .tb th.ord:hover{ color:var(--m-ink); background:var(--bt-suave); }
.bt .tb th .fl{ font-size:12px; margin-left:4px; opacity:0; vertical-align:-1px; }
.bt .tb th.ord:hover .fl{ opacity:.45; }
.bt .tb th.ord.act{ color:var(--m-ink); }
.bt .tb th.ord.act .fl{ opacity:1; color:var(--ac); }
.bt .tb td{
  padding:3px 14px; height:29px; border-bottom:1px solid var(--m-line); font-size:12.5px;
  background:var(--m-main); vertical-align:middle;
}
/* ⭐ IGUAL QUE LAS CAJAS: EL DEDITO CUELGA DE TENER DESTINO, NO DE SER UNA FILA.
   `.tb tbody tr` a secas le ponia dedito y resaltado a TODAS las filas de
   TODAS las tablas — incluidas las 23 de Ajustes, donde lo unico que responde
   son los botones de adentro. Medido: 23 de 24 cosas que parecian clicables en
   Ajustes no llevaban a ninguna parte. Ahora solo se pinta como clicable la
   fila que de verdad abre algo. */
.bt .tb tbody tr[data-emp], .bt .tb tbody tr[data-con]{ cursor:pointer; }
.bt .tb tbody tr[data-emp]:hover td, .bt .tb tbody tr[data-con]:hover td{ background:var(--bt-suave); }
.bt .tb tbody tr:focus-visible td{ outline:2px solid var(--ac); outline-offset:-2px; }
/* ⭐ QUIEN NAVEGA CON EL TABULADOR TIENE QUE VER DONDE ESTA PARADO.
   Esto cubria solo las cajas que `alcanzables()` marca con tabindex="0", y
   dejaba por fuera TODO lo que ya se alcanza solo: los botones de pantalla,
   los chips de filtro, «Ver el correo», los dias de un tema, el si/no del
   rol, los interruptores y el buscador. Medido en Ajustes: 27 cosas se
   alcanzaban con el tabulador y ninguna se veia. Ahora la regla cubre las
   tres familias —lo que lleva tabindex, los botones y los campos— con el
   mismo contorno del color de acento, para que sea el mismo gesto visual en
   toda la pantalla y no haya que acordarse de nada al agregar un boton. */
.bt [tabindex="0"]:focus-visible,
.bt button:focus-visible,
.bt input:focus-visible{ outline:2px solid var(--ac); outline-offset:-2px; }
/* Los que son chiquitos o van pegados al borde llevan el contorno por fuera,
   que si no se les come el propio fondo: el interruptor y los enlaces. */
.bt .sw:focus-visible, .bt .lk:focus-visible,
.bt .dd:focus-visible{ outline-offset:2px; border-radius:3px; }
.bt .tb tbody tr[tabindex="0"]:focus-visible{ outline:0; }
/* La SEGUNDA LINEA de la fila: el hecho del dia, a todo el ancho. */
.bt .tb tr.l2 td{
  padding:0 14px 5px; height:auto; border-bottom:1px solid var(--m-line);
  font-size:12px; color:var(--m-ink2); line-height:1.4;
}
.bt .tb tr.l2 td b{ color:var(--m-ink); font-weight:600; }
.bt .tb tr.conl2 td{ border-bottom:0; }

/* ═══ 11. LA TIRA DE TIEMPO. Un punto por dia en que se hablo ═════════ */
.bt .tira{ position:relative; height:22px; margin:5px 2px 1px; }
.bt .tira .tl{ position:absolute; left:0; right:0; top:6px; height:1px; background:var(--bt-suave2); }
.bt .tira .thoy{ position:absolute; right:0; top:1px; width:1px; height:11px; background:var(--m-ink2); }
.bt .tira .tgap{
  position:absolute; top:3px; right:0; height:7px;
  background:repeating-linear-gradient(90deg, var(--bt-suave2) 0 2px, transparent 2px 5px);
}
.bt .td{
  position:absolute; top:2px; width:9px; height:9px; border-radius:50%; margin-left:-4px;
  border:1.5px solid var(--ac); background:var(--m-main);
}
.bt .td.ent{ background:var(--ac); }
.bt .td.ult{ width:13px; height:13px; top:0; margin-left:-6px; }
.bt .tira .tx{
  position:absolute; top:12px; font-size:11px; color:var(--m-ink2);
  font-variant-numeric:tabular-nums;
}
.bt .tira .tx.r{ right:0; }
/* La leyenda usa los MISMOS puntos, para que no haya que adivinar */
.bt .ley{ display:inline-flex; align-items:center; gap:5px; font-size:11px; color:var(--m-ink2); font-weight:400; text-transform:none; letter-spacing:0; }
.bt .ley .td{ position:static; margin:0 2px 0 8px; top:auto; }
.bt .ley .td:first-child{ margin-left:0; }
.bt .ley-g{
  display:inline-block; width:22px; height:7px; margin:0 2px 0 8px;
  background:repeating-linear-gradient(90deg, var(--bt-suave2) 0 2px, transparent 2px 5px);
}
.bt .ley-fila{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:8px 14px; border-bottom:1px solid var(--m-line); background:var(--m-main);
}
.bt .ley-t{ font-size:12px; color:var(--m-ink2); }

/* ═══ 12. TARJETA DE TEMA. Un tema no cabe en una fila ════════════════ */
.bt .rejilla{
  display:grid; grid-template-columns:repeat(auto-fill, minmax(340px, 1fr));
  gap:8px; padding:9px 14px;
}
.bt .tk{
/* ⭐ TRES FRANJAS Y NADA MAS: que es, de quien, y en que dias.
   La tarjeta traia seis renglones (titulo, contexto, tira, quienes, el hueco
   mas largo, y un boton solo) y medía 192 px. Los tres que se cayeron no se
   perdieron: «quienes» se volvió un numero de personas en el renglon de
   contexto, «el hueco mas largo» ya se VE en la tira —es el espacio en
   blanco, decirlo ademas con numeros era decir dos veces lo mismo— y el
   boton de ver el correo se paso al final del renglon de contexto. */
  background:var(--m-main); border:1px solid var(--m-line); border-radius:5px;
  padding:8px 11px;
}
.bt .tk[data-con], .bt .tk[data-emp]{ cursor:pointer; }
.bt .tk[data-con]:hover, .bt .tk[data-emp]:hover{ border-color:var(--ac); background:var(--bt-suave); }
.bt .tk.foco{ border-color:var(--ac); background:var(--bt-suave); }
.bt .tk1{ display:flex; align-items:center; gap:7px; min-width:0; }
.bt .tk1 .t{
  font-size:13.5px; font-weight:600; flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .tk2{
  display:flex; align-items:center; gap:7px; min-width:0;
  font-size:12px; color:var(--m-ink2); margin-top:3px; line-height:1.4;
}
.bt .tk2 .qq{ flex:0 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt .tk2 .lk{ margin-left:auto; flex:0 0 auto; }
.bt .tk2 b{ color:var(--m-ink); font-weight:600; }
.bt .tk1 .der{
  margin-left:auto; flex:0 0 auto; font-size:12px; color:var(--m-ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bt .tk1 .der.mal{ color:var(--bt-rojo); font-weight:600; }
.bt .tk3{ display:flex; align-items:center; gap:8px; font-size:12px; color:var(--m-ink2); min-width:0; }
.bt .tk3 > span:first-child{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bt .tk3 .der{ margin-left:auto; white-space:nowrap; font-variant-numeric:tabular-nums; }
.bt .tk3 .der.mal{ color:var(--bt-rojo); font-weight:600; }
.bt .tk4{ font-size:12px; color:var(--m-ink2); margin-top:5px; }
.bt .tk4 b{ color:var(--m-ink); font-weight:600; }
.bt .tk5{ margin-top:6px; }
.bt .tk5 .lk{ margin-left:0; }
/* Los dias, uno por uno, y cada uno abre su correo */
.bt .dias-lista{ display:flex; flex-wrap:wrap; gap:5px; margin:2px 0 4px; }
.bt .dd{
  border:1px solid var(--m-line); border-radius:3px; background:var(--m-main);
  color:var(--m-ink); font:inherit; font-size:11.5px; padding:2px 7px; cursor:pointer;
  font-variant-numeric:tabular-nums; display:inline-flex; align-items:center; gap:4px;
}
.bt .dd.ent{ background:color-mix(in srgb, var(--ac) 13%, transparent); border-color:transparent; color:var(--ac); }
.bt .dd:hover{ border-color:var(--ac); }

/* ═══ 13. EL CALENDARIO DE LOS RITMOS. 31 dias, sin adornos ═══════════ */
.bt .cal{ display:flex; gap:2px; margin:7px 0 2px; }
.bt .cal span{ flex:1 1 0; height:9px; border-radius:2px; background:var(--bt-suave2); }
.bt .cal span.en{ background:color-mix(in srgb, var(--ac) 45%, transparent); }
.bt .cal span.tip{ background:var(--ac); }
.bt .cal span.hoy{ background:var(--bt-amb); }
.bt .cal-x{ display:flex; justify-content:space-between; font-size:11px; color:var(--m-ink2); }

/* ═══ 14. RUIDO. Cada familia con su regla y su numero exacto ═════════ */
.bt .ru{
  background:var(--m-main); border:1px solid var(--m-line); border-radius:5px; padding:10px 12px;
}
.bt .ru1{ display:flex; align-items:center; gap:8px; }
.bt .ru1 .t{ font-size:13.5px; font-weight:600; flex:1 1 auto; min-width:0; }
.bt .ru1 .k{ font-size:16px; font-weight:700; font-variant-numeric:tabular-nums; }
.bt .ru2{ font-size:12px; color:var(--m-ink2); margin-top:2px; }
.bt .ru3{ font-size:12.5px; color:var(--m-ink); line-height:1.5; margin-top:6px; }
.bt .ru3 b{ font-weight:600; }
.bt .ru4{ display:flex; flex-wrap:wrap; gap:5px; margin-top:7px; }
.bt .ru4 .mono{
  background:var(--bt-suave2); border-radius:3px; padding:2px 7px; font-size:11.5px;
  color:var(--m-ink2); max-width:100%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ═══ 15. BLOQUES DE TEXTO Y PIES ════════════════════════════════════ */
.bt .bloque{
  background:var(--bt-suave); border:1px solid var(--m-line); border-radius:4px;
  padding:10px 12px; margin:11px 14px; font-size:12.5px; line-height:1.55; color:var(--m-ink2);
}
.bt .bloque b{ color:var(--m-ink); font-weight:600; }
.bt .bloque p{ margin:0 0 7px; }
.bt .bloque p:last-child{ margin-bottom:0; }
.bt .bloque.mal{ background:var(--bt-rojo-bg); border-color:var(--bt-rojo-bd); color:var(--m-ink); }
.bt .bloque[data-p]{ cursor:pointer; }
.bt .bloque[data-p]:hover{ border-color:var(--ac); }
.bt .bloque .lk{ display:block; margin:6px 0 0; }
.bt .pie-lista{
  padding:11px 14px 16px; font-size:12px; color:var(--m-ink2); line-height:1.55;
}
.bt .pie-lista b{ color:var(--m-ink); font-weight:600; }

/* ═══ 16. EL INTERRUPTOR (aviso, licencias) ══════════════════════════ */
.bt .sw-fila{
  display:flex; align-items:flex-start; gap:14px; padding:11px 14px;
  border-bottom:1px solid var(--m-line); background:var(--m-main); cursor:pointer;
}
.bt .sw-fila:hover{ background:var(--bt-suave); }
.bt .sw-fila .qq{ flex:1 1 auto; min-width:0; }
.bt .sw-fila .t{ display:block; font-size:13px; font-weight:600; }
.bt .sw-fila .d{ display:block; font-size:12.5px; color:var(--m-ink2); line-height:1.55; margin-top:4px; }
.bt .sw-fila .d b{ color:var(--m-ink); font-weight:600; }
.bt .sw{
  width:34px; height:19px; flex:0 0 34px; border-radius:10px; background:var(--bt-suave2);
  border:1px solid var(--m-line); position:relative; cursor:pointer; display:inline-block;
  margin-top:2px;
}
.bt .sw i{
  position:absolute; top:2px; left:2px; width:13px; height:13px; border-radius:50%;
  background:var(--m-ink2); transition:left .13s;
}
.bt .sw.on{ background:var(--ac); border-color:var(--ac); }
.bt .sw.on i{ left:17px; background:#fff; }
.bt .cupo-set{ display:inline-flex; align-items:center; gap:7px; }
.bt .cupo-set input{
  width:70px; height:26px; border:1px solid var(--m-line); border-radius:3px;
  background:var(--bt-suave2); color:var(--m-ink); font:inherit; font-size:12.5px;
  padding:0 7px; outline:0;
}
.bt .cupo-set input:focus{ border-color:var(--ac); }

/* ═══ 17. VACIOS Y CARGANDO ══════════════════════════════════════════ */
.bt .vacio{ padding:38px 20px; text-align:center; color:var(--m-ink2); }
.bt .vacio i{ font-size:30px; color:var(--bt-suave2); display:block; margin-bottom:9px; }
.bt .vacio h4{ margin:0 0 6px; font-size:14px; font-weight:600; color:var(--m-ink); }
.bt .vacio p{ margin:0 auto 5px; font-size:12.5px; line-height:1.55; max-width:520px; }
.bt .vacio p b{ color:var(--m-ink); font-weight:600; }
.bt .cargando{
  padding:36px 20px; text-align:center; color:var(--m-ink2); font-size:12.5px;
  display:flex; align-items:center; justify-content:center; gap:9px;
}
.bt .cargando i{ font-size:17px; animation:bt-giro 1s linear infinite; }
@keyframes bt-giro{ to{ transform:rotate(360deg); } }

/* ═══ 18. LAS DOS FORMAS DE ABRIRLA (R7). Conviven, no se unifican ═══ */
.bitacora-full{
  position:absolute; inset:0; z-index:40; background:var(--m-main);
  display:none; flex-direction:column;
}
.bitacora-full.abierta{ display:flex; }
.bitacora-full .btf-cuerpo{ flex:1; min-height:0; display:flex; }
.bitacora-full .btf-cuerpo > .bt{ flex:1; min-width:0; }

/* ═══ 19. LO QUE SE ASOMA FUERA: el aviso en el correo y Mi dia ══════ */
.bt-encorreo{
  border:1px solid var(--m-line); border-radius:4px; margin:0 0 12px;
  background:color-mix(in srgb, var(--ac) 7%, var(--m-main)); overflow:hidden;
}
.bt-encorreo .bt-ec-cab{
  display:flex; align-items:center; gap:8px; padding:8px 11px; font-size:12.5px;
}
.bt-encorreo .bt-ec-cab i{ color:var(--ac); font-size:15px; }
.bt-encorreo .bt-ec-cab b{ font-weight:600; }
.bt-encorreo .eti{
  background:color-mix(in srgb, var(--ac) 14%, transparent); color:var(--ac);
  border-radius:3px; padding:2px 7px; font-size:11.5px;
}
.bt-encorreo .bt-ec-t{ color:var(--m-ink2); font-size:12px; }
.bt-encorreo .bt-ec-x{
  margin-left:auto; border:0; background:none; color:var(--m-ink2); cursor:pointer;
  font-size:15px; padding:0 2px;
}
.bt-encorreo .bt-ec-x:hover{ color:var(--m-ink); }
.bt-encorreo .bt-ec-mal{
  padding:7px 11px; background:#fdf3f2; color:#b42318; font-size:12.5px;
  display:flex; align-items:center; gap:7px;
}
.nite .bt-encorreo .bt-ec-mal{ background:rgba(255,138,122,.10); color:#ff8a7a; }
.bt-encorreo .bt-ec-p{ padding:0 11px 6px; font-size:12.5px; line-height:1.5; }
.bt-encorreo .bt-ec-p b{ font-weight:600; }
.bt-encorreo .bt-ec-p span{ color:var(--m-ink2); }
.bt-encorreo .bt-ec-pie{ padding:0 11px 9px; }
.bt-encorreo .bt-ec-ver{
  border:0; background:none; padding:0; color:var(--ac); font:inherit; font-size:12px;
  font-weight:600; cursor:pointer;
}
.bt-encorreo .bt-ec-ver:hover{ text-decoration:underline; }
.bt-ec-off{ font-size:12.5px; color:var(--m-ink2); padding:6px 0 12px; }

.bt-midia{ border:1px solid var(--m-line); border-radius:5px; background:var(--m-main); overflow:hidden; }
.bt-midia .bt-md-cab{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  border-bottom:1px solid var(--m-line); font-size:13px;
}
.bt-midia .bt-md-cab i{ color:var(--ac); font-size:16px; }
.bt-midia .bt-md-cab b{ font-weight:600; }
.bt-midia .bt-md-mas{
  margin-left:auto; border:0; background:none; color:var(--ac); font:inherit;
  font-size:12px; font-weight:600; cursor:pointer;
}
.bt-midia .bt-md-mas:hover{ text-decoration:underline; }
.bt-midia .bt-md-p{ padding:8px 12px; border-bottom:1px solid var(--m-line); font-size:12.5px; line-height:1.5; }
.bt-midia .bt-md-p:last-child{ border-bottom:0; }
.bt-midia .bt-md-p b{ font-weight:600; }
.bt-midia .bt-md-p span{ color:var(--m-ink2); }

/* ═══ 20. «HOY», AGRUPADO POR EMPRESA ════════════════════════════════════
   Lo que hace que esto se lea de un vistazo NO es el color: es que los
   campos caen SIEMPRE en la misma vertical. La columna del turno tiene ancho
   fijo para poder bajar el ojo por una sola línea imaginaria y separar lo
   suyo de lo de ellos sin leer una palabra. Por eso todo lo de la derecha va
   en columnas reservadas con `tabular-nums`: si los números cambian de ancho,
   la línea imaginaria se rompe y hay que volver a leer.

   Alturas pactadas: cabecera de grupo 32 px · fila de adentro 26 px ·
   fila colapsada 26 px. Ninguna crece: lo que no cabe se corta con puntos
   suspensivos, porque una fila que a veces mide uno y a veces dos renglones
   no se puede leer en diagonal, y aquí se leen ochenta.
   ═══════════════════════════════════════════════════════════════════════ */

/* Las tres cifras del día, en UN renglón. Tres tarjetas para tres números
   serían 90 px de adorno para decir lo que cabe aquí. */
.bt .kpi{
  display:flex; align-items:center; height:28px; padding:0 14px; gap:0;
  font-size:12.5px; color:var(--m-ink2); background:var(--m-main);
  border-bottom:1px solid var(--m-line); white-space:nowrap;
  overflow:hidden; text-overflow:ellipsis;
}
.bt .kpi b{ color:var(--m-ink); font-weight:600; font-variant-numeric:tabular-nums; }
.bt .kpi b.malt{ color:var(--bt-rojo); }
.bt .kpi2{ background:var(--bt-piso); white-space:normal; height:auto; padding:6px 14px; line-height:1.45; }
/* La cifra de la carga va en columna reservada: si crece de 999 a 1.240 no
   puede empujar el resto de la frase. */
.bt .kpi .cifra{ display:inline-block; min-width:6ch; text-align:right; }

.bt .gr{ background:var(--m-main); }
.bt .gr.ab{ background:var(--bt-piso); }

/* LA CABECERA DE LA EMPRESA. Una línea de 32 px. */
.bt .ge{
  display:flex; align-items:center; gap:8px; height:32px; padding:0 14px;
  border-bottom:1px solid var(--m-line); background:var(--m-main); min-width:0;
}
.bt .gr.ab > .ge{ background:var(--bt-suave); border-bottom-color:var(--m-line); }
/* La fila colapsada: la misma cabecera, 26 px. Un buzón automático nunca
   ocupa más de una línea y nunca se despliega solo. */
.bt .ge.chica{ height:26px; }
/* ⭐ EL DEDITO CUELGA DE TENER DESTINO, NO DE LA CLASE. Sin `data-…` la fila
   se queda quieta, y así nadie le hace clic a algo que no responde. */
.bt .ge[data-gabre], .bt .ge[data-emp], .bt .ge[data-con]{ cursor:pointer; }
.bt .ge[data-gabre]:hover, .bt .ge[data-emp]:hover, .bt .ge[data-con]:hover{ background:var(--bt-suave2); }
/* El hueco del punto se reserva para que los nombres queden alineados, pero
   no se pinta: el color es SOLO rojo y SOLO quiere decir problema. */
.bt .pt7.hueco{ background:transparent; }
.bt .ge .gnom{
  font-size:13px; font-weight:600; color:var(--m-ink); flex:0 1 auto; min-width:60px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* El dominio propio es la prueba de que son ellos. Va tenue, al lado. */
.bt .ge .gdom{
  font-size:11.5px; color:var(--m-ink2); flex:0 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* De aquí a la derecha, TODO en columnas de ancho fijo. */
.bt .ge .gq{
  margin-left:auto; flex:0 0 17ch; width:17ch; font-size:12px; color:var(--m-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .ge .gturno{
  flex:0 0 14ch; width:14ch; font-size:12px; color:var(--m-ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .ge .gpz{
  flex:0 0 16ch; width:16ch; font-size:12px; color:var(--m-ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 🚨 SIN NEGRILLA, Y NO ES CAPRICHO: el ancho de la columna va en `ch`, y el
   `ch` de una letra en negrilla es MÁS ANCHO. Con `font-weight:600` aquí, la
   columna del plazo crecía 3 px en las filas con algo vencido y empujaba la
   del turno: medido, la vertical del turno caía en 855 px en unas filas y en
   852 en otras. Esos 3 px son justo lo que rompe la línea imaginaria por la
   que uno baja el ojo. El rojo ya dice que hay un problema; la negrilla no
   agregaba nada y costaba la alineación. */
.bt .ge .gpz.mal{ color:var(--bt-rojo); }
.bt .ge .gk{
  flex:0 0 9.5ch; width:9.5ch; text-align:right; font-size:12px; color:var(--m-ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden;
}
.bt .ge .gkn{ color:var(--m-ink); font-weight:600; }
.bt .ge .gw{ margin-left:.35ch; }
.bt .ge .gt{
  flex:0 0 7ch; width:7ch; text-align:right; font-size:12px; color:var(--m-ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}

/* LO DE ADENTRO DEL GRUPO. Filas de 26 px, con las mismas verticales. */
.bt .gb{ background:var(--bt-piso); }
.bt .gf{
  display:flex; align-items:center; gap:8px; height:26px; padding:0 14px 0 29px;
  border-bottom:1px solid var(--m-line); min-width:0; font-size:12.5px;
}
.bt .gf[data-con], .bt .gf[data-emp]{ cursor:pointer; }
.bt .gf[data-con]:hover, .bt .gf[data-emp]:hover{ background:var(--bt-suave); }
.bt .gf .gfh{
  flex:0 0 6ch; width:6ch; font-size:12px; color:var(--m-ink2);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.bt .gf .gfe{
  flex:0 0 14ch; width:14ch; font-size:12px; color:var(--m-ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .gf .gfe.mal{ color:var(--bt-rojo); }   /* misma razón: la negrilla ensancha el `ch` */
.bt .gf .gfa{
  flex:1 1 auto; min-width:0; color:var(--m-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bt .gf.gp .gfa{ font-weight:600; }
.bt .gf .gfc{ flex:0 0 auto; font-size:14px; color:var(--m-ink2); }
.bt .gf .gsp{ flex:1 1 auto; min-width:0; }
.bt .gf .lk{ flex:0 0 auto; }
.bt .gf.gx{ color:var(--m-ink2); }

/* EN LA CAJA ANGOSTA se cae primero el adorno del dato, nunca el dato:
   el rótulo «correos», después el dominio, después el asunto, y de últimas
   quién escribió. El turno y el plazo no se caen nunca: son los dos que
   contestan «¿esto es mío o de ellos, y corre?». */
@container bt (max-width: 1000px){
  .bt .ge .gw{ display:none; }
  .bt .ge .gk{ flex-basis:4ch; width:4ch; }
  .bt .ge .gq{ flex-basis:14ch; width:14ch; }
}
@container bt (max-width: 820px){
  .bt .ge .gdom{ display:none; }
  .bt .ge .gpz{ flex-basis:13ch; width:13ch; }
}
@container bt (max-width: 660px){
  .bt .ge .gq{ display:none; }
  /* 🚨 EL ANCLA SE MUEVE CON LA COLUMNA. El `margin-left:auto` que empuja
     todo el bloque de la derecha vivía en «quién»; al ocultarlo, las columnas
     dejaban de tener ancla y el turno caía en 63 verticales distintas —medido—
     en vez de en una. La línea imaginaria por la que uno baja el ojo es lo
     único que hace útil esta pantalla en la caja angosta. */
  .bt .ge .gturno{ margin-left:auto; }
  .bt .gf{ padding-left:20px; }
  .bt .gf .gfe{ flex-basis:12ch; width:12ch; }
}