/* ===========================================================================
   📖 BITÁCORA — hoja propia. No pisa ni una clase del correo: todo va con
   prefijo .bt-. Si esta hoja se borra, el correo queda intacto.

   Reglas de la casa que manda esta hoja:
     · Claro siempre. Nada oscuro.
     · El color es información: ROJO solo cuando hay un problema.
     · Los botones llevan fondo. Nada de texto suelto que parezca enlace.
     · Todo el ancho de la pantalla.
     · ⛔ PROHIBIDA la rayita de acento a la izquierda de las tarjetas.
       Aquí se usa bloque de fondo lleno, o un punto de 7 px.
   =========================================================================== */

.bt {
  --bt-rojo:#b42318; --bt-rojo-bg:#fef3f2; --bt-rojo-bd:#fecdca;
  --bt-tinta:#16242c; --bt-tinta2:#5b6b75; --bt-tinta3:#8a99a3;
  --bt-linea:rgba(20,45,62,.11);
  --bt-fondo:#f4f6f8; --bt-caja:#fff;
  height:100%; overflow:auto; background:var(--bt-fondo); color:var(--bt-tinta);
  font-size:13.5px; -webkit-font-smoothing:antialiased;
}
.bt *{ box-sizing:border-box; }
.bt-w{ max-width:none; padding:18px 22px 40px; }

/* ── Título ──────────────────────────────────────────────────────────── */
.bt-tit{ display:flex; align-items:flex-end; gap:14px; flex-wrap:wrap; margin:0 0 4px; }
.bt-tit h1{ margin:0; font-size:22px; font-weight:700; letter-spacing:-.015em; }
.bt-tit .bt-sub{ color:var(--bt-tinta2); font-size:13px; padding-bottom:2px; }
.bt-mig{ display:flex; align-items:center; gap:7px; margin:0 0 12px; font-size:12.5px; color:var(--bt-tinta2); }
.bt-mig button{ background:#e8edf1; border:0; color:var(--bt-tinta); font:inherit;
  padding:4px 10px; border-radius:6px; cursor:pointer; display:inline-flex; align-items:center; gap:5px; }
.bt-mig button:hover{ background:#dde5ea; }

/* ── Los números de arriba ───────────────────────────────────────────── */
.bt-kpis{ display:grid; grid-template-columns:repeat(auto-fit,minmax(148px,1fr)); gap:10px; margin:14px 0 16px; }
.bt-kpi{ background:var(--bt-caja); border:1px solid var(--bt-linea); border-radius:9px; padding:12px 14px; }
.bt-kpi .n{ font-size:25px; font-weight:700; line-height:1.05; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums; }
.bt-kpi .t{ font-size:11.5px; color:var(--bt-tinta2); margin-top:3px; }
/* El único KPI que se pinta es el que avisa de un problema, y se pinta ENTERO. */
.bt-kpi.mal{ background:var(--bt-rojo-bg); border-color:var(--bt-rojo-bd); }
.bt-kpi.mal .n, .bt-kpi.mal .t{ color:var(--bt-rojo); }

/* ── Aviso serio: bloque de fondo lleno, sin rayita ──────────────────── */
.bt-avisos{ display:flex; flex-direction:column; gap:9px; margin:0 0 16px; }
.bt-aviso{ background:var(--bt-rojo-bg); border:1px solid var(--bt-rojo-bd); border-radius:9px;
  padding:12px 14px; display:flex; gap:11px; align-items:flex-start; }
.bt-aviso i{ color:var(--bt-rojo); font-size:19px; line-height:1; margin-top:1px; }
.bt-aviso b{ color:var(--bt-rojo); }
.bt-aviso .bt-cita{ margin-top:7px; }

/* ── La cita: sin cita no se muestra nada. Es la regla R3. ───────────── */
.bt-cita{ background:#f7f9fa; border:1px solid var(--bt-linea); border-radius:7px;
  padding:7px 10px; font-size:12.5px; color:var(--bt-tinta2); display:flex; gap:8px; align-items:center; }
.bt-cita q{ color:var(--bt-tinta); font-style:normal; }
.bt-cita q:before{ content:'\201C'; } .bt-cita q:after{ content:'\201D'; }
.bt-cita button{ margin-left:auto; flex:none; background:#e8edf1; border:0; color:var(--bt-tinta);
  font:inherit; font-size:12px; padding:4px 9px; border-radius:6px; cursor:pointer; white-space:nowrap; }
.bt-cita button:hover{ background:#dde5ea; }

/* ── La caja de filtros: UNA sola, siempre en el mismo sitio ─────────── */
.bt-filtros{ background:var(--bt-caja); border:1px solid var(--bt-linea); border-radius:9px;
  padding:10px 12px; margin:0 0 14px; display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.bt-filtros input[type=search]{ flex:1 1 260px; min-width:180px; border:1px solid var(--bt-linea);
  border-radius:7px; padding:7px 11px; font:inherit; color:var(--bt-tinta); background:#fff; }
.bt-filtros input[type=search]:focus{ outline:2px solid var(--ac,#2a8fd6); outline-offset:-1px; border-color:transparent; }
.bt-seg{ display:flex; background:#eef2f5; border-radius:7px; padding:2px; gap:2px; }
.bt-seg button{ background:transparent; border:0; font:inherit; font-size:12.5px; color:var(--bt-tinta2);
  padding:5px 12px; border-radius:5px; cursor:pointer; }
.bt-seg button.on{ background:#fff; color:var(--bt-tinta); font-weight:600; box-shadow:0 1px 2px rgba(16,40,56,.1); }

/* ── La tabla ────────────────────────────────────────────────────────── */
.bt-caja{ background:var(--bt-caja); border:1px solid var(--bt-linea); border-radius:9px; overflow:hidden; }
.bt-scroll{ overflow-x:auto; }
.bt-tb{ width:100%; border-collapse:collapse; font-size:13px; }
.bt-tb th{ position:sticky; top:0; z-index:2; background:#f0f3f6; text-align:left; font-weight:600;
  font-size:11.5px; letter-spacing:.03em; text-transform:uppercase; color:var(--bt-tinta2);
  padding:9px 13px; border-bottom:1px solid var(--bt-linea); white-space:nowrap; }
.bt-tb td{ padding:11px 13px; border-bottom:1px solid var(--bt-linea); vertical-align:middle; }
.bt-tb tr:last-child td{ border-bottom:0; }
.bt-tb tbody tr{ cursor:pointer; }
.bt-tb tbody tr:hover{ background:#f6f9fb; }
.bt-tb .num{ text-align:right; font-variant-numeric:tabular-nums; white-space:nowrap; }
.bt-nom{ font-weight:600; }
.bt-dom{ color:var(--bt-tinta3); font-size:11.5px; margin-top:1px; }
.bt-vacio{ padding:38px 20px; text-align:center; color:var(--bt-tinta2); }
.bt-vacio i{ display:block; font-size:30px; color:var(--bt-tinta3); margin-bottom:9px; }

/* ── El punto de 7 px: la única marca de color en una fila ───────────── */
.bt-pt{ width:7px; height:7px; border-radius:50%; display:inline-block; flex:none; }
.bt-pt.mal{ background:var(--bt-rojo); }
.bt-pt.ok{ background:#12b76a; }

/* ── Etiquetas ───────────────────────────────────────────────────────── */
.bt-eti{ display:inline-flex; align-items:center; gap:5px; font-size:11.5px; padding:2px 8px;
  border-radius:20px; background:#eef2f5; color:var(--bt-tinta2); white-space:nowrap; }
.bt-eti.dian{ background:#eaf4fb; color:#0d5c8f; }
.bt-eti.mal{ background:var(--bt-rojo-bg); color:var(--bt-rojo); }
.bt-eti.maq{ background:#f2f0f7; color:#6b5f8a; }

/* ── Ficha de una persona ────────────────────────────────────────────── */
.bt-gente{ display:grid; grid-template-columns:repeat(auto-fill,minmax(340px,1fr)); gap:11px; }
.bt-per{ background:var(--bt-caja); border:1px solid var(--bt-linea); border-radius:9px; padding:13px 15px; }
.bt-per-cab{ display:flex; align-items:baseline; gap:9px; flex-wrap:wrap; }
.bt-per-cab .nm{ font-weight:600; font-size:14px; }
.bt-per-cab .em{ color:var(--bt-tinta3); font-size:12px; }
.bt-per-cif{ display:flex; gap:16px; margin:9px 0 0; font-size:12px; color:var(--bt-tinta2); }
.bt-per-cif b{ color:var(--bt-tinta); font-variant-numeric:tabular-nums; }

/* El rol propuesto: se pregunta, no se afirma. */
.bt-rol{ margin-top:11px; border-top:1px solid var(--bt-linea); padding-top:10px; }
.bt-rol-t{ font-size:13.5px; }
.bt-rol-t b{ font-weight:600; }
.bt-rol-t .duda{ color:var(--bt-tinta2); }
.bt-rol-r{ font-size:12px; color:var(--bt-tinta2); margin:3px 0 7px; }
.bt-rol .bt-cita{ margin-bottom:8px; }
.bt-si-no{ display:flex; gap:7px; align-items:center; }
.bt-si-no button{ font:inherit; font-size:12.5px; padding:5px 13px; border-radius:6px;
  border:0; cursor:pointer; font-weight:500; }
.bt-si-no .si{ background:var(--ac,#2a8fd6); color:#fff; }
.bt-si-no .si:hover{ filter:brightness(1.07); }
.bt-si-no .no{ background:#e8edf1; color:var(--bt-tinta); }
.bt-si-no .no:hover{ background:#dde5ea; }
.bt-rol.listo .bt-rol-t b{ color:#0a7c4a; }
.bt-rol .dicho{ font-size:12px; color:var(--bt-tinta2); display:inline-flex; align-items:center; gap:6px; }
.bt-rol .dicho button{ background:#e8edf1; border:0; color:var(--bt-tinta2); font:inherit;
  font-size:11.5px; padding:3px 8px; border-radius:5px; cursor:pointer; }

/* ── Encabezado de sección: bloque lleno, jamás una rayita ───────────── */
.bt-sec{ display:flex; align-items:center; gap:9px; margin:22px 0 10px; }
.bt-sec h2{ margin:0; font-size:14px; font-weight:700; }
.bt-sec .cnt{ background:#e8edf1; color:var(--bt-tinta2); font-size:11.5px; padding:2px 8px; border-radius:20px; }

/* ── Botones con fondo ───────────────────────────────────────────────── */
.bt-bt{ font:inherit; font-size:13px; padding:7px 14px; border-radius:7px; border:0; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; background:#e8edf1; color:var(--bt-tinta); font-weight:500; }
.bt-bt:hover{ background:#dde5ea; }
.bt-bt.pri{ background:var(--ac,#2a8fd6); color:#fff; }
.bt-bt.pri:hover{ filter:brightness(1.07); }
.bt-bt[disabled]{ opacity:.55; cursor:default; }

/* ── Estados de la pantalla ──────────────────────────────────────────── */
.bt-cargando{ padding:50px 20px; text-align:center; color:var(--bt-tinta2); }
.bt-cargando i{ display:block; font-size:26px; margin-bottom:10px; animation:bt-gira 1s linear infinite; }
@keyframes bt-gira{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion:reduce){ .bt-cargando i{ animation:none; } }

.bt-arranque{ background:var(--bt-caja); border:1px solid var(--bt-linea); border-radius:9px;
  padding:26px 24px; max-width:620px; }
.bt-arranque h2{ margin:0 0 8px; font-size:17px; }
.bt-arranque p{ margin:0 0 8px; color:var(--bt-tinta2); line-height:1.55; }
.bt-arranque .bt-bt{ margin-top:12px; }

@media (max-width:820px){
  .bt-w{ padding:14px 13px 34px; }
  .bt-gente{ grid-template-columns:1fr; }
  .bt-tit h1{ font-size:19px; }
}

/* ── Las dos solapas de Bitácora ─────────────────────────────────────── */
.bt-solapas{ display:flex; gap:4px; margin:0 0 16px; border-bottom:1px solid var(--bt-linea); }
.bt-solapas button{ background:transparent; border:0; border-bottom:2px solid transparent;
  font:inherit; font-size:13.5px; color:var(--bt-tinta2); padding:9px 14px; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; margin-bottom:-1px; }
.bt-solapas button:hover{ color:var(--bt-tinta); }
.bt-solapas button.on{ color:var(--ac,#2a8fd6); border-bottom-color:var(--ac,#2a8fd6); font-weight:600; }
.bt-glob{ background:var(--ac,#2a8fd6); color:#fff; font-size:11px; font-weight:600;
  min-width:18px; height:18px; padding:0 5px; border-radius:9px;
  display:inline-flex; align-items:center; justify-content:center; }

.bt-sel{ border:1px solid var(--bt-linea); border-radius:7px; padding:7px 10px; font:inherit;
  background:#fff; color:var(--bt-tinta); max-width:230px; }

/* ── Un pendiente ────────────────────────────────────────────────────── */
.bt-lista{ display:flex; flex-direction:column; gap:10px; }
.bt-pend{ background:var(--bt-caja); border:1px solid var(--bt-linea); border-radius:9px; padding:14px 16px; }
/* ⛔ Sin rayita a la izquierda: cuando es grave se tiñe el BLOQUE ENTERO. */
.bt-pend.grave{ background:var(--bt-rojo-bg); border-color:var(--bt-rojo-bd); }
.bt-pend-cab{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bt-pend-t{ font-weight:600; font-size:14px; }
.bt-pend.grave .bt-pend-t{ color:var(--bt-rojo); }
.bt-pend-d{ margin:6px 0 9px 16px; color:var(--bt-tinta2); line-height:1.55; }
.bt-pend .bt-cita{ margin-left:16px; background:rgba(255,255,255,.75); }
.bt-pend-btn{ display:flex; gap:8px; margin:11px 0 0 16px; flex-wrap:wrap; }
.bt-pend-btn .bt-bt{ font-size:12.5px; padding:6px 12px; }

@media (max-width:820px){
  .bt-solapas button{ padding:9px 10px; font-size:13px; }
  .bt-pend-d, .bt-pend .bt-cita, .bt-pend-btn{ margin-left:0; }
  .bt-pend-btn .bt-bt{ flex:1 1 auto; justify-content:center; }
}

/* ===========================================================================
   Las dos partes de Bitácora que se asoman FUERA de su pestaña.
   Van dentro del lector de correo y dentro de Mi día, así que tienen que
   verse como parte de ellos: discretas, sin gritar, y sin rayita a la
   izquierda tampoco aquí.
   =========================================================================== */
.bt-encorreo{ background:#f4f7f9; border:1px solid rgba(20,45,62,.11); border-radius:9px;
  padding:11px 13px; margin:0 0 12px; font-size:13px; color:#16242c;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; }
.bt-ec-cab{ display:flex; align-items:center; gap:9px; flex-wrap:wrap; }
.bt-ec-cab > i{ color:#5b6b75; font-size:16px; }
.bt-ec-t{ color:#5b6b75; font-size:12px; }
.bt-ec-x{ margin-left:auto; background:transparent; border:0; color:#8a99a3; cursor:pointer;
  padding:3px 5px; border-radius:5px; line-height:1; }
.bt-ec-x:hover{ background:#e4eaee; color:#16242c; }
.bt-ec-mal{ margin-top:8px; background:#fef3f2; border:1px solid #fecdca; border-radius:7px;
  padding:8px 11px; color:#b42318; display:flex; gap:8px; align-items:flex-start; line-height:1.5; }
.bt-ec-p{ margin-top:7px; display:flex; gap:8px; align-items:baseline; line-height:1.5; color:#5b6b75; }
.bt-ec-p b{ color:#16242c; }
.bt-ec-pie{ margin-top:9px; }
.bt-ec-ver{ background:#e8edf1; border:0; color:#16242c; font:inherit; font-size:12.5px;
  padding:5px 12px; border-radius:6px; cursor:pointer; }
.bt-ec-ver:hover{ background:#dde5ea; }
.bt-ec-off{ color:#5b6b75; font-size:12.5px; padding:2px; }

/* Los 5 de Mi día */
.bt-midia{ background:#f4f7f9; border:1px solid rgba(20,45,62,.11); border-radius:10px;
  padding:13px 15px; margin:0 0 14px; font-size:13px; color:#16242c; }
.bt-md-cab{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.bt-md-cab > i{ color:#5b6b75; }
.bt-md-mas{ margin-left:auto; background:#e8edf1; border:0; color:#16242c; font:inherit;
  font-size:12px; padding:4px 11px; border-radius:6px; cursor:pointer; }
.bt-md-mas:hover{ background:#dde5ea; }
.bt-md-p{ display:flex; gap:8px; align-items:baseline; margin-top:7px; line-height:1.5; color:#5b6b75; }
.bt-md-p b{ color:#16242c; }

/* ── Lo que se pactó, sacado de leer los correos ─────────────────────── */
.bt-pac-g{ padding:11px 16px; border-bottom:1px solid var(--bt-linea); }
.bt-pac-g:last-child{ border-bottom:0; }
.bt-pac-t{ font-size:11.5px; font-weight:600; letter-spacing:.03em; text-transform:uppercase;
  color:var(--bt-tinta2); margin-bottom:8px; display:flex; align-items:center; gap:8px; }
.bt-pac{ margin-bottom:9px; }
.bt-pac:last-child{ margin-bottom:0; }
.bt-pac-q{ font-size:13.5px; margin-bottom:5px; }
.bt-pac .bt-cita{ font-size:12px; }
.bt-sec .bt-bt{ margin-left:auto; }