/* ══ La Mente de J.E. Jaimes · estilos portados de gei-crm v2 ══════════════════
   Copia verbatim de `cotizaciones/gei/gei-crm/app/crm/v2/v2.css`, con TRES
   cambios y ninguno más. Cambiar cualquier otra cosa = desviarse del original.

   1. El prefijo `.v2` pasa a `.je-raiz`, para no chocar con nada de La Mente.
   2. `--navy` (#0f2a4a) era dos cosas a la vez en GEI: el azul de la barra Y la
      tinta de títulos y avatares. Acá se separan, porque el rojo de JE no puede
      hacer las dos: `--navy` queda como TINTA (#333333, el gris de marca) y el
      rojo `--je-marca` se usa solo en la barra y en el botón principal. Si se
      pintara todo de rojo, el semáforo de condiciones dejaría de leerse.
   3. No se portan los bloques de CRM, Oportunidades y Tablero: esos módulos
      están apagados para JE (sección 7 del encargo) y su CSS sería código
      muerto. El resto va completo.

   Los colores de DATO (--acum, --dia, --cuota, --viabline, --sem y los seis de
   condición) van idénticos: no son de marca y no se tocan.
   ─────────────────────────────────────────────────────────────────────────── */

.je-raiz {
  --navy: #333333;          /* tinta de títulos y avatares (era el azul de GEI) */
  --ink: #1c2733;
  --mut: #5b6b7c;
  --line: #e3e9f0;
  --bg: #f4f6fa;
  --acum: #f05a24;          /* acumulado de la semana */
  --dia: #60a5fa;           /* azul clarito — la línea del día a día */
  --dia-hoy: #1d4ed8;       /* azul rey — el día exacto en el que se está */
  --sant: #c4c0ba;          /* gris clarito — la rampa de la semana anterior */
  --viabline: #0a7d4e;      /* VERDE — la línea de viabilidad en la gráfica */
  --viab: #0e7a5f;          /* verde de "listo/ok" en botones y pastillas */
  --cuota: #a16207;         /* ámbar — la rampa de la cuota */
  --sem: #7c4dbb;           /* morado — la serie de cierres semanales */
  --gris: #a29e97;
  color: var(--ink);
  line-height: 1.4;
}
.je-raiz *, .je-raiz *::before, .je-raiz *::after { box-sizing: border-box; }

/* ── layout general ── */
.je-raiz .wrap { max-width: 1880px; margin: 0 auto; padding: 16px 24px 64px; }
.je-raiz .card { background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 14px; margin-bottom: 14px; transition: box-shadow .15s; }
.je-raiz h2 { font-size: 15px; color: var(--navy); margin-bottom: 8px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.je-raiz .btn { background: var(--je-marca); color: #fff; border: none; border-radius: 8px; padding: 6px 13px; font-size: 12.5px; font-weight: 700; cursor: pointer; font-family: inherit; }
.je-raiz .btn.sec { background: #eef1f5; color: var(--navy); }
.je-raiz .btn.mini { padding: 4px 10px; font-size: 11.5px; }
.je-raiz .btn:disabled { opacity: .55; cursor: default; }
.je-raiz .small { font-size: 11.5px; color: var(--mut); }
.je-raiz svg { width: 100%; height: auto; display: block; }
.je-raiz .leg { display: flex; flex-wrap: wrap; gap: 9px; font-family: var(--je-mono); font-size: 9px; font-weight: 700; text-transform: uppercase; color: var(--mut); }
.je-raiz .leg span { display: inline-flex; align-items: center; gap: 4px; }
.je-raiz textarea { width: 100%; border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-family: inherit; font-size: 12.5px; resize: vertical; }
.je-raiz input, .je-raiz select { font-family: inherit; }

/* tareas */
.je-raiz .tarea { border: 1px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 7px 0; }
.je-raiz .tarea .t1 { display: flex; gap: 8px; align-items: flex-start; }
.je-raiz .tarea .t1 b { font-size: 13px; flex: 1; }
.je-raiz .hora { font-size: 11px; color: #a24410; background: #fff3e8; border-radius: 6px; padding: 1px 7px; font-weight: 700; white-space: nowrap; }
.je-raiz .ico { cursor: pointer; color: var(--mut); font-size: 13px; background: none; border: none; padding: 0; font-family: inherit; }
.je-raiz .sub { display: flex; gap: 7px; align-items: center; font-size: 12px; color: var(--mut); margin: 4px 0 0 24px; }
.je-raiz .sub input { width: auto; }
.je-raiz .sub.done span { text-decoration: line-through; color: #9aa8b8; }
.je-raiz .tri { width: 18px; height: 18px; border: 2px solid #b9c4d0; border-radius: 6px; cursor: pointer; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; background: #fff; user-select: none; }
.je-raiz .tarea.encurso { border-left: 4px solid #b45309; background: #fffdf6; }
.je-raiz .tarea.encurso .tri { border-color: #b45309; color: #b45309; }
.je-raiz .tarea.encurso .tri::after { content: "●"; }
.je-raiz .tarea.hecha .tri { border-color: #1d7a3d; background: #e7f6ec; color: #1d7a3d; }
.je-raiz .tarea.hecha .tri::after { content: "✓"; }
.je-raiz .hecha { opacity: .62; }
.je-raiz .hecha b { text-decoration: line-through; }
.je-raiz .pill { font-size: 10px; font-weight: 800; border-radius: 99px; padding: 1px 8px; white-space: nowrap; }
.je-raiz .p-venc { background: #fadbd8; color: #a02015; }
.je-raiz .p-1h { background: #fdeecd; color: #8f5f00; }
.je-raiz .p-4h { background: #deeafc; color: #1d4f9c; }
.je-raiz .p-curso { background: #e7f6ec; color: #1d7a3d; }
.je-raiz .p-gris { background: #eef1f5; color: #68758a; }
/* NUEVA · la pastilla que marca todo lo sembrado para la demostración. */
.je-raiz .p-ejemplo { background: #EEF1F4; color: #5B6B7C; font-weight: 700; text-transform: none; border-radius: 4px; }

/* condición */
.je-raiz .cond { display: inline-block; padding: 2px 10px; border-radius: 20px; font-size: 11.5px; font-weight: 800; }
.je-raiz .cond.peli { background: #fadbd8; color: #a02015; }
.je-raiz .cond.emer { background: #fdeecd; color: #8f5f00; }
.je-raiz .cond.norm { background: #deeafc; color: #1d4f9c; }
.je-raiz .cond.noex { background: #e8ebef; color: #68758a; }
.je-raiz .cond.aflu { background: #d9f2e0; color: #0f6a30; }
.je-raiz .cond.poder { background: #b9e6c9; color: #0a4d24; }

/* tablas 7R */
.je-raiz table { width: 100%; border-collapse: collapse; text-align: right; }
.je-raiz th { font-size: 8.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--mut); font-family: var(--je-mono); padding: 2px 4px; font-weight: 600; }
.je-raiz td { padding: 1px 4px; font-family: var(--je-mono); font-size: 11px; font-weight: 700; }
.je-raiz td.dia { text-align: left; font-weight: 600; color: var(--mut); }
.je-raiz tr.hoy { background: rgba(240,90,36,.09); }
.je-raiz tr.hoy td.dia { color: var(--ink); font-weight: 800; }
.je-raiz .num { cursor: pointer; text-decoration: underline dotted; text-underline-offset: 2px; }

/* conectados */
.je-raiz .conectados { display: flex; gap: 8px; flex-wrap: wrap; }
.je-raiz .avatar { display: flex; align-items: center; gap: 6px; background: #f0f5fb; border-radius: 99px; padding: 3px 11px 3px 4px; font-size: 12px; font-weight: 600; }
.je-raiz .avatar .dotv { width: 9px; height: 9px; border-radius: 99px; background: #22b04c; border: 2px solid #fff; }
.je-raiz .avatar .c { width: 24px; height: 24px; border-radius: 99px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 800; }

/* ── acordeón de secciones (Mi Día) ── */
.je-raiz .secgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
.je-raiz .colL, .je-raiz .colR { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
@media (max-width: 900px) { .je-raiz .secgrid { grid-template-columns: 1fr; } }
/* SIN `overflow: hidden`. Lo tenía para que el fondo del encabezado al pasar el mouse no se
   saliera de las esquinas redondeadas — pero de paso RECORTABA el panel de día/hora, que se abre
   hacia abajo: en `servicios` Daro no podía ver las últimas opciones ni «Otro día…» porque las
   cortaba el borde de la tarjeta (22-ago-2026). Las esquinas las resuelve ahora el propio
   encabezado con su radio (13 = 14 de la tarjeta menos su borde de 1 px), que es donde estaba el
   problema de verdad. Mismo arreglo en `la-mente/web/app/servicios/basicos/Bloque.tsx`. */
.je-raiz .sec { background: #fff; border: 1px solid var(--line); border-radius: 14px; min-width: 0; }
.je-raiz .sec > summary { border-radius: 13px 13px 0 0; }
.je-raiz .sec summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 13px 16px; cursor: pointer; font-size: 14.5px; color: var(--navy); user-select: none; }
.je-raiz .sec summary::-webkit-details-marker { display: none; }
.je-raiz .sec summary:hover { background: #f6f9fc; }
/* El selector iba anclado a `.sec`, y estos mismos chips se pintan también fuera de una
   sección —en la barra de arriba— donde salían pegados: «Hoy0/0· Semana0/0». El aire no
   puede depender de dónde caiga el elemento. */
.je-raiz .chips { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.je-raiz .sec .chev { color: var(--mut); font-size: 13px; transition: transform .2s; }
.je-raiz .sec[open] .chev { transform: rotate(180deg); }
.je-raiz .sec[open] summary { border-bottom: 1px solid var(--line); }
.je-raiz .secbody { padding: 4px 10px 10px; }
.je-raiz .secbody .card { border: none; margin-bottom: 0; }
.je-raiz .g7r { grid-template-columns: 1.05fr .95fr; }
@media (max-width: 900px) { .je-raiz .g7r { grid-template-columns: 1fr !important; } }

/* modo admin + animaciones */
.je-raiz .adminbar { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 10px; padding: 8px 12px; font-size: 12px; margin-bottom: 10px; }
.je-raiz .adminrow { display: flex; gap: 5px; flex-wrap: wrap; margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--line); }
@keyframes jepulso { 0% { background: #ffe8d6; } 100% { background: transparent; } }
.je-raiz .pulsa { animation: jepulso 1.6s ease-out 2; }
.je-raiz .celdaedit { outline: 2.5px solid #f05a24; border-radius: 5px; padding: 0 3px; }
.je-raiz .pulsapt { animation: jepulso 1.2s ease-out 2; }
.je-raiz .masPaso { flex: none; border: none; background: none; color: #8a97a6; font-size: 19px; font-weight: 600; cursor: pointer; line-height: 1; padding: 0 4px; transition: color .15s, transform .15s; }
.je-raiz .masPaso:hover { color: var(--acum); transform: scale(1.25); }

/* banda de carga: nueve puntos, ciclo de 1,1 s */
.je-raiz .orb { display: inline-flex; gap: 2.5px; align-items: center; height: 12px; vertical-align: middle; }
.je-raiz .orb i { width: 3px; height: 3px; border-radius: 99px; background: var(--navy); opacity: .85; animation: jeorbw 1.1s ease-in-out infinite; }
.je-raiz .orb i:nth-child(odd) { animation-delay: .12s; }
.je-raiz .orb i:nth-child(3n) { animation-delay: .24s; opacity: .55; }
.je-raiz .orb i:nth-child(4n) { animation-delay: .36s; opacity: .7; }
@keyframes jeorbw { 0%, 100% { transform: translateY(2.5px); } 50% { transform: translateY(-2.5px); } }

/* Estadísticas: agrupadores */
.je-raiz .area { display: flex; align-items: center; gap: 9px; margin: 26px 0 2px; font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--navy); scroll-margin-top: 118px; }
.je-raiz .area .dotd { width: 13px; height: 13px; border-radius: 4px; flex: none; }
.je-raiz .area::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.je-raiz .persona { display: flex; align-items: center; gap: 9px; margin: 12px 0 8px; flex-wrap: wrap; }
.je-raiz .persona .c { width: 28px; height: 28px; border-radius: 99px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; }
.je-raiz .persona b { font-size: 14.5px; color: var(--navy); }
.je-raiz .sgrid { display: grid; gap: 14px; }
.je-raiz .stat2 { display: grid; gap: 12px; margin-top: 8px; }
.je-raiz .chartlab { font-size: 9px; font-family: var(--je-mono); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); margin-bottom: 3px; display: flex; justify-content: space-between; align-items: baseline; }
.je-raiz .kpis { display: flex; gap: 14px; flex-wrap: wrap; font-size: 11.5px; color: var(--mut); margin-top: 2px; }
.je-raiz .kpis b { color: var(--ink); }
.je-raiz .metarow { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin: 0 0 6px; font-size: 12px; }

/* menús flotantes (rango, condición) */
.je-raiz .menuflot { position: absolute; background: #fff; color: var(--ink); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 6px 18px rgba(20,30,50,.18); min-width: 160px; z-index: 80; overflow: hidden; text-align: left; }
.je-raiz .menuflot > div, .je-raiz .menuflot > button { display: block; width: 100%; padding: 9px 14px; font-size: 12.5px; cursor: pointer; border: none; background: #fff; border-bottom: 1px solid #eef2f7; text-align: left; font-family: inherit; color: var(--ink); }
.je-raiz .menuflot > div:hover, .je-raiz .menuflot > button:hover { background: #f0f5fb; }

/* botón ⓘ con popover */
.je-raiz .info { display: inline-flex; align-items: center; justify-content: center; width: 17px; height: 17px; border-radius: 99px; background: #eef1f5; color: var(--navy); font-size: 11px; font-weight: 800; cursor: pointer; position: relative; flex: none; font-style: italic; font-family: var(--je-serif); }
.je-raiz .info:hover { background: #e2e6ec; }
.je-raiz .info .ipop { display: none; position: absolute; top: 21px; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(20,30,50,.2); padding: 10px 13px; font-size: 11.5px; font-weight: 400; font-style: normal; font-family: var(--je-texto); color: var(--ink); width: 290px; max-width: 82vw; z-index: 85; text-align: left; line-height: 1.5; cursor: default; }
.je-raiz .info.der .ipop { left: auto; right: 0; }
.je-raiz .info.open .ipop { display: block; }
.je-raiz .ayuda { cursor: pointer; color: #8a97a6; font-size: 13px; font-weight: 700; position: relative; display: inline-block; }
.je-raiz .ayuda:hover { color: var(--navy); }
.je-raiz .ayuda .ipop { display: none; position: absolute; top: 20px; left: 0; background: #fff; border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 8px 22px rgba(20,30,50,.2); padding: 10px 13px; font-size: 11.5px; font-weight: 400; color: var(--ink); width: 290px; max-width: 82vw; z-index: 95; text-align: left; line-height: 1.5; cursor: default; white-space: normal; text-transform: none; letter-spacing: normal; font-family: var(--je-texto); }
.je-raiz .ayuda.der .ipop { left: auto; right: 0; }
.je-raiz .ayuda.open .ipop { display: block; }

/* modal genérico */
.je-raiz .modalbg { position: fixed; inset: 0; background: rgba(20,30,50,.55); z-index: 70; padding: 16px; overflow: auto; }
.je-raiz .modalbox { max-width: 680px; margin: 40px auto; background: #fff; border-radius: 16px; padding: 18px; }

/* barra fija inferior: conectados */
/* UNA SOLA FILA, y si no cabe se desliza. Envolvía (`flex-wrap: wrap`) cuando
   sólo podía traer a la propia rama —seis personas a lo sumo—; desde que el
   admin ve a toda la empresa, envolver la haría crecer hacia arriba fila por
   fila, tapando el pie de la pantalla y montándosele al botón del Asistente,
   que está clavado 56 px arriba contando con que esta barra mide ~40. */
.je-raiz .barraconect { position: fixed; left: 0; right: 0; bottom: 0; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -3px 12px rgba(20,30,50,.06); padding: 7px 20px; display: flex; align-items: center; gap: 12px; z-index: 40; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; }
.je-raiz .barraconect > * { flex: none; }

/* sticky bar de Estadísticas */
.je-raiz .stickybar { position: sticky; top: 0; z-index: 60; background: var(--bg); padding: 10px 0 8px; margin: -16px 0 6px; border-bottom: 1px solid var(--line); }

/* ══ ORGANIGRAMA · wall board ══ */
.je-raiz { --mando: #8e3434; --dorado: #8a6d3b; --granate: #7c1c22; --crema: #f4efe2; --cafe: #3c2a1e; }
.je-raiz .wraporg { max-width: none; margin: 0 auto; padding: 16px 24px 64px; }
.je-raiz .wsec { padding: 5px 8px 3px; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.je-raiz .wsec .x { margin-left: auto; cursor: pointer; opacity: .5; font-weight: 700; flex: none; }
.je-raiz .wsec .x:hover { opacity: 1; }
.je-raiz .wsec-p { padding: 0 8px 5px 22px; font-size: 10px; display: flex; align-items: center; gap: 5px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.12); flex-wrap: wrap; }
.je-raiz .wsec-p:hover { background: rgba(255,255,255,.6); }
.je-raiz .wsec-p b { color: var(--navy); }
.je-raiz .wsec-p .pu { color: var(--mut); }
.je-raiz .wsec-p.vacia { color: var(--mut); font-style: italic; }
.je-raiz .wsec-blk:last-of-type .wsec-p { border-bottom: none; }
.je-raiz .wpuesto { padding: 3px 8px 3px 30px; font-size: 9.5px; border-bottom: 1px dashed rgba(0,0,0,.12); cursor: pointer; }
.je-raiz .wpuesto:hover { background: rgba(255,255,255,.6); }
.je-raiz .wpuesto .t { font-weight: 800; text-transform: uppercase; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; flex-wrap: wrap; }
.je-raiz .wpuesto .t .x { margin-left: auto; cursor: pointer; opacity: .5; flex: none; }
.je-raiz .wpuesto .t .x:hover { opacity: 1; }
.je-raiz .wpuesto .p { color: var(--navy); font-weight: 700; }
.je-raiz .wpuesto .p i { font-style: normal; color: var(--mut); font-weight: 400; }
.je-raiz .addmini { padding: 2px 8px 4px 30px; font-size: 9px; color: var(--mut); cursor: pointer; font-weight: 700; }
.je-raiz .addmini:hover { color: var(--navy); }
.je-raiz .addsec { padding: 5px 8px; font-size: 10px; color: var(--mut); cursor: pointer; border-top: 1px dashed rgba(0,0,0,.25); text-align: center; font-weight: 700; }
.je-raiz .addsec:hover { background: rgba(255,255,255,.6); }
.je-raiz .edit { margin-left: auto; flex: none; cursor: pointer; opacity: .45; font-size: 10px; }
.je-raiz .edit:hover { opacity: 1; }
.je-raiz .exec { background: #fff; border: 2px solid var(--mando); border-radius: 12px; padding: 10px 22px; text-align: center; min-width: 240px; cursor: pointer; box-shadow: 0 3px 10px rgba(142,52,52,.12); }
.je-raiz .exec:hover { box-shadow: 0 5px 16px rgba(142,52,52,.25); }
.je-raiz .exec .rol { font-size: 9px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--mando); font-weight: 700; }
.je-raiz .exec .puesto { font-size: 14px; font-weight: 800; color: var(--navy); margin: 2px 0; }
.je-raiz .exec .badge { display: inline-flex; align-items: center; gap: 5px; background: #eaf5ee; color: #1d7a3d; border-radius: 99px; padding: 2px 10px; font-size: 11.5px; font-weight: 700; margin: 2px 0; }
.je-raiz .exec .porconf { font-size: 12px; font-style: italic; color: var(--mut); }
.je-raiz .exec .codes { display: flex; gap: 6px; justify-content: center; flex-wrap: wrap; margin-top: 4px; font-family: var(--je-mono); font-size: 9.5px; color: var(--mut); }
.je-raiz .edwrap { position: sticky; left: 24px; width: calc(100vw - 96px); display: flex; flex-direction: column; align-items: center; }
.je-raiz .fundador { position: absolute; left: 0; top: 0; z-index: 6; background: #fff; border: 2px solid var(--dorado); border-radius: 12px; padding: 10px 20px; text-align: center; cursor: pointer; box-shadow: 0 3px 10px rgba(138,109,59,.18); }
.je-raiz .fundador:hover { box-shadow: 0 5px 16px rgba(138,109,59,.32); }
.je-raiz .fundador b { font-family: var(--je-serif); font-size: 16px; color: var(--dorado); display: block; line-height: 1.2; }
.je-raiz .fundador .flab { font-size: 9px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .18em; color: var(--dorado); font-weight: 700; margin-top: 2px; }
.je-raiz .fline { position: absolute; z-index: 1; border-left: 2px dashed var(--dorado); }
.je-raiz .vline { width: 2px; height: 14px; background: var(--mando); margin: 0 auto; }
.je-raiz .hline { height: 2px; background: var(--mando); width: 50%; margin: 0 0 0 28.57%; }
.je-raiz .grupos { display: flex; gap: 14px; align-items: stretch; margin-top: 0; }
.je-raiz .grupo { display: flex; flex-direction: column; gap: 10px; }
.je-raiz .banda { position: relative; padding-top: 14px; }
.je-raiz .banda::before { content: ""; position: absolute; top: 0; left: 50%; width: 2px; height: 14px; background: var(--mando); }
.je-raiz .banda .exec { width: 100%; min-width: 0; }
.je-raiz .banda .bx { position: sticky; left: calc(50vw - 150px); width: max-content; max-width: 90vw; }
.je-raiz .divrow { display: flex; gap: 14px; align-items: stretch; flex: 1; }
.je-raiz .boardscroll { overflow-x: auto; padding-bottom: 8px; }
.je-raiz .board { position: relative; width: max-content; min-width: 100%; display: flex; flex-direction: column; gap: 12px; }
.je-raiz .divb { display: flex; flex-direction: column; gap: 8px; scroll-margin: 20px; }
.je-raiz .divhead { border-radius: 10px; padding: 9px 10px; color: #fff; text-align: center; }
.je-raiz .divhead .n { font-size: 9px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .16em; opacity: .85; font-weight: 700; }
.je-raiz .divhead .nom { font-size: 14px; font-weight: 800; line-height: 1.2; text-transform: uppercase; }
.je-raiz .divhead.porconf .nom { font-style: italic; font-weight: 700; opacity: .9; }
.je-raiz .jefeplaca { background: #fff; border: 1.5px solid var(--dorado); border-radius: 9px; padding: 5px 8px; text-align: center; cursor: pointer; }
.je-raiz .jefeplaca:hover { background: #fbf7ee; }
.je-raiz .jefeplaca .lab { font-size: 8.5px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .14em; color: var(--dorado); font-weight: 700; }
.je-raiz .jefeplaca b { font-size: 12px; color: var(--navy); }
.je-raiz .deptrow { display: flex; gap: 8px; align-items: stretch; flex: 1; }
.je-raiz .wb { width: 250px; flex: 0 0 250px; border-radius: 6px; overflow: hidden; border: 1px solid #d8d2c4; background: #fff; display: flex; flex-direction: column; }
.je-raiz .wb-dept { background: var(--crema); color: #17130b; text-align: center; font-weight: 800; font-size: 10.5px; text-transform: uppercase; padding: 8px; line-height: 1.35; border-bottom: 3px solid var(--dorado); }
.je-raiz .wb-dept .wb-sub { display: block; font-size: 10px; margin-top: 2px; }
.je-raiz .wb-body { flex: 1; }
.je-raiz .pplaca { display: flex; align-items: center; gap: 7px; padding: 5px 8px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.12); }
.je-raiz .pplaca:hover { filter: brightness(1.04); background: rgba(255,255,255,.5); }
.je-raiz .pplaca .c { width: 22px; height: 22px; border-radius: 99px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex: none; }
.je-raiz .pplaca .nom { min-width: 0; }
.je-raiz .pplaca .nom b { font-size: 11.5px; color: var(--navy); display: block; line-height: 1.15; }
.je-raiz .pplaca .nom span { font-size: 9.5px; color: var(--mut); display: block; line-height: 1.2; }
.je-raiz .pplaca.vac .c { background: #8a97a6; }
.je-raiz .strow { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 16px; font-size: 10.5px; cursor: pointer; border-bottom: 1px solid rgba(0,0,0,.08); }
.je-raiz .strow:hover { background: rgba(255,255,255,.6); }
.je-raiz .strow .dot { width: 8px; height: 8px; border-radius: 99px; flex: none; }
.je-raiz .strow .cod { font-family: var(--je-mono); font-weight: 700; color: var(--mut); flex: none; }
.je-raiz .strow .nm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.je-raiz .wb-vfp { background: var(--crema); color: var(--granate); font-weight: 800; font-size: 9.5px; text-transform: uppercase; padding: 7px 9px; line-height: 1.4; border-top: 3px solid var(--dorado); margin-top: auto; }
.je-raiz .wb-vfp span { color: #17130b; margin-right: 4px; }
.je-raiz .wb-vfp i { font-style: normal; font-weight: 600; color: #8a8371; text-transform: none; }
.je-raiz .junta { background: var(--cafe); color: #fff; text-align: center; font-weight: 800; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; padding: 7px 8px; border-top: 3px solid var(--dorado); }
.je-raiz .divvfp { background: var(--granate); color: #f0e8e2; border: 1px solid #5c1216; border-radius: 6px; padding: 9px 12px; }
.je-raiz .divvfp .lab { font-size: 8.5px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .16em; opacity: .8; font-weight: 700; }
.je-raiz .divvfp p { font-size: 11px; line-height: 1.45; font-weight: 700; }
.je-raiz .orgvfp { margin-top: 14px; background: #fff; border: 1px solid var(--line); border-top: 5px solid #c22032; border-radius: 12px; padding: 14px 20px; text-align: center; }
.je-raiz .orgvfp .lab { font-size: 9px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .2em; color: #c22032; font-weight: 800; }
.je-raiz .orgvfp p { font-family: var(--je-serif); font-size: 16.5px; font-weight: 700; color: var(--ink); line-height: 1.45; max-width: 1100px; margin: 4px auto 0; }
.je-raiz .orgvfp p i { color: var(--mut); font-weight: 500; }
/* NUEVA · las pastillas de «esto lo propusimos nosotros» (feature 47). */
.je-raiz .prop { display: inline-flex; align-items: center; gap: 3px; background: #FFF4DB; color: #8F5F00; border-radius: 4px; padding: 0 5px; font-size: 8px; font-weight: 800; text-transform: none; letter-spacing: 0; white-space: nowrap; }
.je-raiz .sinsec { padding: 5px 8px 3px; font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: .06em; color: var(--mut); border-top: 1px dashed rgba(0,0,0,.25); display: flex; align-items: center; gap: 5px; }
@media (max-width: 900px) {
  .je-raiz .grupos { flex-direction: column; }
  .je-raiz .divrow { flex-direction: column; }
  .je-raiz .deptrow { flex-wrap: wrap; }
  .je-raiz .wb { flex: 1 1 100%; width: auto; }
  .je-raiz .hline, .je-raiz .banda::before, .je-raiz .fline { display: none; }
  .je-raiz .banda { padding-top: 0; }
  .je-raiz .board { width: auto; min-width: 0; }
  .je-raiz .edwrap { position: static; width: auto; }
  .je-raiz .banda .bx { position: static; max-width: none; }
  .je-raiz .fundador { position: static; margin-bottom: 8px; align-self: center; }
  .je-raiz .wraporg { padding: 12px 12px 56px; }
}

/* ══ ADMIN · panel de 8 salas ══
   sala = .sala (NUNCA .sec — choca con el acordeón de Mi Día);
   número del encabezado = .snum (.num ya es otra cosa en las tablas 7R);
   encabezado de división del catálogo = .adivhead (.divhead es del organigrama). */
.je-raiz .panel { background: #fff; border: 1px solid var(--line); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 4px rgba(20,30,50,.06); }
.je-raiz .sala { border-top: 1px solid var(--line); scroll-margin-top: 64px; }
.je-raiz .sala:first-of-type { border-top: none; }
.je-raiz .sechead { display: flex; align-items: center; gap: 9px; margin: 0; padding: 13px 16px 12px; flex-wrap: wrap; cursor: pointer; transition: background .12s; user-select: none; }
.je-raiz .sechead:hover { background: #f7fafd; }
.je-raiz .sala.open > .sechead { background: #fafbfd; border-bottom: 1px solid var(--line); }
.je-raiz .snum { width: 26px; height: 26px; border-radius: 8px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 800; flex: none; }
.je-raiz .sechead h3 { font-size: 15px; color: var(--navy); text-transform: uppercase; letter-spacing: .05em; margin: 0; }
.je-raiz .ssub { width: 100%; font-size: 12px; color: var(--mut); margin-left: 35px; margin-top: -2px; }
.je-raiz .sresum { margin-left: auto; display: flex; gap: 5px; align-items: center; font-size: 11.5px; color: var(--mut); white-space: nowrap; font-weight: 600; }
.je-raiz .sresum .n { background: #F05A24; color: #fff; border-radius: 99px; font-size: 10.5px; padding: 1px 8px; font-weight: 800; }
.je-raiz .scar { font-size: 12px; color: var(--mut); transition: transform .15s; flex: none; }
.je-raiz .sala.open .scar { transform: rotate(180deg); }
@media (max-width: 680px) { .je-raiz .sresum { max-width: 40vw; overflow: hidden; text-overflow: ellipsis; display: inline-block; line-height: 1.3; } }
.je-raiz .scuerpo { padding: 14px 16px; background: #f7f9fc; animation: jesalain .18s ease; }
@keyframes jesalain { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.je-raiz .hueco { color: #a02015; font-weight: 800; }

/* pendientes: malla de tarjetas grandes */
.je-raiz .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(225px, 1fr)); gap: 10px; }
.je-raiz .tile { background: #fff; border: 1px solid var(--line); border-left: 4px solid var(--tc, #c9d6e4); border-radius: 12px; padding: 13px 15px; cursor: pointer; transition: transform .12s, box-shadow .12s; display: flex; flex-direction: column; gap: 3px; text-align: left; font-family: inherit; min-height: 118px; }
.je-raiz .tile:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(20,30,50,.13); }
.je-raiz .tile .tn { font-family: var(--je-serif); font-size: 32px; font-weight: 800; line-height: 1; color: var(--ink); }
.je-raiz .tile .tl { font-size: 12.5px; font-weight: 800; color: var(--navy); }
.je-raiz .tile .td { font-size: 11px; color: var(--mut); line-height: 1.35; font-family: inherit; font-weight: 400; padding: 0; text-align: left; }
.je-raiz .tile .ta { margin-top: auto; padding-top: 6px; font-size: 11px; font-weight: 800; color: var(--acum); }

/* personas: malla + tarjeta */
.je-raiz .pgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: 8px; }
.je-raiz .pgrid .pcard { margin-bottom: 0; }
.je-raiz .pgrid .pcard.open { grid-column: 1 / -1; }
.je-raiz .pcard { border: 1px solid var(--line); border-radius: 12px; background: #fff; overflow: hidden; }
.je-raiz .prow { display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer; flex-wrap: wrap; }
.je-raiz .prow:hover { background: #fafcff; }
.je-raiz .prow .c { width: 30px; height: 30px; border-radius: 99px; background: var(--navy); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 800; flex: none; }
.je-raiz .prow .nom b { font-size: 13.5px; color: var(--navy); }
.je-raiz .prow .nom div { font-size: 11px; color: var(--mut); }
.je-raiz .prow .meta { margin-left: auto; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.je-raiz .pdet { border-top: 1px dashed var(--line); padding: 12px; background: #fafbfd; }
.je-raiz .fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 9px; }
.je-raiz .fgrid label { display: block; }
.je-raiz .flab { display: block; font-family: var(--je-mono); font-size: 9px; text-transform: uppercase; letter-spacing: .1em; color: var(--mut); margin-bottom: 3px; }
.je-raiz .fgrid .inp, .je-raiz .fgrid .sel { width: 100%; }

/* tablas del admin (catálogo, matriz, bitácora) */
.je-raiz .tw { overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.je-raiz table.tbl { border-collapse: collapse; width: 100%; font-size: 12.5px; min-width: 760px; text-align: left; }
.je-raiz .tbl th { font-family: var(--je-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--mut); text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line); background: #fafbfd; white-space: nowrap; }
.je-raiz .tbl td { padding: 7px 10px; border-bottom: 1px solid #eef2f7; vertical-align: middle; font-family: inherit; font-size: 12.5px; font-weight: 400; text-align: left; }
.je-raiz .tbl tr:last-child td { border-bottom: none; }
.je-raiz .tbl tr:hover td { background: #fafcff; }
/* 44 px: el encabezado de división ES el botón que abre la malla, y medía 37. */
.je-raiz .adivhead { display: flex; align-items: center; min-height: 44px; gap: 8px; padding: 9px 12px; background: #fafbfd; border-bottom: 1px solid var(--line); cursor: pointer; font-weight: 800; font-size: 12.5px; color: var(--navy); }
.je-raiz .adivhead .dotd { width: 12px; height: 12px; border-radius: 4px; flex: none; }
.je-raiz .adivhead .ct { margin-left: auto; font-family: var(--je-mono); font-size: 10px; color: var(--mut); font-weight: 400; }

/* controles chicos */
.je-raiz select.sel, .je-raiz input.inp { border: 1px solid var(--line); border-radius: 7px; padding: 4px 7px; font-size: 12px; font-family: inherit; background: #fff; color: var(--ink); max-width: 100%; }
.je-raiz input.inp { width: 90px; }
.je-raiz input.inp.w { width: 100%; }
.je-raiz .ev { cursor: pointer; border-bottom: 1px dashed #b9c8da; font-weight: 700; }
.je-raiz .ev:hover { color: #F05A24; }
.je-raiz .tag { display: inline-block; background: #eef2f7; border-radius: 6px; padding: 1px 7px; font-family: var(--je-mono); font-size: 10px; color: var(--mut); white-space: nowrap; }
.je-raiz .tag.warn { background: #fdeecd; color: #8f5f00; }
.je-raiz .tag.bad { background: #fadbd8; color: #a02015; }
.je-raiz .tag.ok { background: #d9f2e0; color: #0f6a30; }
.je-raiz .btn.warn { background: #fff; color: #a02015; border: 1px solid #f3c8c3; }
.je-raiz .btn.warn:hover { background: #fff2f0; border-color: #a02015; }
.je-raiz .btn.ok { background: var(--viab); color: #fff; }
.je-raiz .btn.ok:hover { background: #0a6a52; }
.je-raiz .seg { display: inline-flex; border: 1px solid #c9d6e4; border-radius: 9px; overflow: hidden; background: #fff; }
.je-raiz .seg .btn { border: none; border-radius: 0; }
.je-raiz .seg .btn + .btn { border-left: 1px solid var(--line); }

/* condiciones: repisa de fórmulas */
.je-raiz .fcards { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 10px; }
.je-raiz .fcard { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 11px 13px; }
.je-raiz .fcard h4 { font-size: 13px; display: flex; align-items: center; gap: 7px; margin: 0; flex-wrap: wrap; }
.je-raiz .fcard ol { margin: 7px 0 0 17px; font-size: 11.5px; color: var(--ink); padding: 0; }
.je-raiz .fcard ol li { margin-bottom: 4px; }
.je-raiz .tgl { cursor: pointer; font-size: 11px; font-family: var(--je-mono); color: var(--mut); border: 1px solid var(--line); border-radius: 8px; padding: 3px 9px; background: #fff; }

/* sala 6: registro de pestañas + matriz persona × pestaña */
.je-raiz .prow2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 9px 0; border-top: 1px dashed var(--line); }
.je-raiz .prow2.nueva { background: #fff8e6; border: 1px solid #f0dfae; border-radius: 10px; padding: 10px 12px; margin-top: 8px; }
.je-raiz .prow2 .pic { font-size: 16px; flex: none; }
.je-raiz .celv { display: inline-block; min-width: 30px; text-align: center; border-radius: 7px; padding: 2px 6px; cursor: pointer; font-weight: 800; background: #eef2f7; color: #9aa39b; }
.je-raiz .celv.on { background: #d9f2e0; color: #0f6a30; }
.je-raiz .cpts { font-family: var(--je-mono); font-size: 9px; color: var(--mut); cursor: pointer; margin-top: 2px; white-space: nowrap; }
.je-raiz .cpts:hover { color: #F05A24; }
.je-raiz .cpts.off { color: #8f5f00; font-weight: 700; }

/* flag de guardado */
.je-raiz .saveflag { position: fixed; bottom: 14px; right: 14px; background: var(--viab); color: #fff; border-radius: 99px; padding: 6px 14px; font-size: 12px; font-weight: 700; opacity: 0; transition: opacity .25s; z-index: 90; pointer-events: none; }
.je-raiz .saveflag.on { opacity: 1; }

/* ══ Hoja de edición + tira de los días ══
   Escritorio: tarjeta centrada. Celular: hoja pegada abajo, al alcance del pulgar. */
.je-raiz .hojabg { position: fixed; inset: 0; background: rgba(20,30,50,.5); backdrop-filter: blur(2px); z-index: 120;
  display: flex; align-items: center; justify-content: center; padding: 16px; animation: jefade .14s ease-out; }
@keyframes jefade { from { opacity: 0 } to { opacity: 1 } }
@keyframes jesube { from { transform: translateY(14px); opacity: .4 } to { transform: none; opacity: 1 } }
.je-raiz .hoja { background: #fff; border-radius: 16px; width: 100%; max-width: 430px; padding: 16px 16px 14px;
  box-shadow: 0 18px 50px rgba(20,30,50,.3); max-height: calc(100dvh - 32px); overflow: auto; animation: jesube .16s ease-out; }
.je-raiz .hoja-tit { display: flex; align-items: flex-start; gap: 10px; margin-bottom: 10px; }
.je-raiz .hoja-tit b { font-size: 15px; color: var(--navy); line-height: 1.25; display: block; }
.je-raiz .hoja-x { margin-left: auto; background: none; border: none; font-size: 19px; color: var(--mut); cursor: pointer;
  line-height: 1; padding: 4px 6px; border-radius: 8px; font-family: inherit; flex: none; }
.je-raiz .hoja-x:hover { background: #f0f5fb; color: var(--navy); }
.je-raiz .hoja-aviso { background: #fdf3e3; border: 1px solid #f0dfae; border-radius: 9px; padding: 8px 10px;
  font-size: 11.5px; color: #7a5300; margin-bottom: 12px; }
.je-raiz .hoja-campo { margin-bottom: 13px; }
.je-raiz .hoja-campo > label { display: block; font-size: 9.5px; font-family: var(--je-mono); font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em; color: var(--mut); margin-bottom: 5px; }
.je-raiz .hoja input[type=text], .je-raiz .hoja input[type=date], .je-raiz .hoja input[type=time],
.je-raiz .hoja select, .je-raiz .hoja textarea { width: 100%; border: 1.5px solid var(--line); border-radius: 10px;
  padding: 11px 12px; font-size: 16px; font-family: inherit; color: var(--ink); background: #fff; }
.je-raiz .hoja textarea { resize: vertical; line-height: 1.45; min-height: 84px; }
.je-raiz .hoja input:focus, .je-raiz .hoja select:focus, .je-raiz .hoja textarea:focus { outline: none; border-color: var(--acum);
  box-shadow: 0 0 0 3px rgba(240,90,36,.14); }
.je-raiz .hoja-num { display: flex; align-items: center; gap: 8px; }
.je-raiz .hoja-num input { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.je-raiz .hoja-uni { font-size: 12px; font-weight: 700; color: var(--mut); white-space: nowrap; flex: none; }
.je-raiz .hoja-eco { font-size: 11px; color: var(--viab); margin-top: 5px; font-variant-numeric: tabular-nums; }
.je-raiz .hoja-nota { font-size: 11px; color: var(--mut); margin-top: 5px; line-height: 1.35; }
.je-raiz .hoja-ops { display: flex; gap: 7px; flex-wrap: wrap; }
.je-raiz .hoja-op { flex: 1 1 130px; text-align: left; background: #fff; border: 1.5px solid var(--line); border-radius: 11px;
  padding: 9px 11px; cursor: pointer; font-family: inherit; color: var(--ink); }
.je-raiz .hoja-op b { display: block; font-size: 12.5px; color: var(--navy); }
.je-raiz .hoja-op .small { display: block; margin-top: 2px; line-height: 1.3; }
.je-raiz .hoja-op.act { border-color: var(--acum); background: #fff6f2; }
.je-raiz .hoja-pie { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 15px;
  padding-top: 12px; border-top: 1px solid var(--line); }
.je-raiz .hoja-vaciar { color: #a02015; }
.je-raiz .hoja .btn { padding: 9px 16px; font-size: 13px; }
.je-raiz .hoja .btn.peligro { background: #a02015; }
.je-raiz .hoja .btn:disabled { opacity: .55; cursor: default; }
@media (max-width: 560px) {
  .je-raiz .hojabg { align-items: flex-end; padding: 0; }
  .je-raiz .hoja { max-width: none; border-radius: 18px 18px 0 0; padding-bottom: max(16px, env(safe-area-inset-bottom));
    max-height: 92dvh; animation: jesube .18s ease-out; }
  .je-raiz .hoja-pie .btn { flex: 1; text-align: center; }
}

/* Tira de los días: se teclea encima del día, sin ventana de por medio.
   OJO: 8 columnas, no 7 — el jueves va partido (abre la semana y la cierra). */
.je-raiz .tira7wrap { margin-top: 6px; }
.je-raiz .tira7 { display: grid; grid-template-columns: repeat(8, 1fr); gap: 4px; }
.je-raiz .t7c { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 2px;
  border: 1px solid var(--line); border-radius: 9px; padding: 4px 3px 3px; background: #fff; min-width: 0; }
.je-raiz .t7d { font-size: 8.5px; font-family: var(--je-mono); font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--mut); text-align: center; white-space: nowrap; line-height: 1.25; }
.je-raiz .t7d.lg { font-size: 7px; letter-spacing: 0; }
.je-raiz .t7c input { width: 100%; border: none; background: #f7f9fc; border-radius: 6px; padding: 6px 2px;
  font-family: inherit; font-size: 13px; font-weight: 700; text-align: center; color: var(--ink);
  font-variant-numeric: tabular-nums; min-width: 0; }
.je-raiz .t7c input:focus { outline: none; background: #fff; box-shadow: 0 0 0 2px var(--acum) inset; }
.je-raiz .t7c input:disabled { opacity: .5; }
.je-raiz .t7v { display: block; padding: 6px 2px; font-size: 13px; font-weight: 700; text-align: center;
  color: var(--mut); font-variant-numeric: tabular-nums; }
.je-raiz .t7c.hoy { border-color: var(--acum); background: #fff6f2; }
.je-raiz .t7c.hoy .t7d { color: var(--acum); }
.je-raiz .t7c.fut { background: #fafbfc; border-style: dashed; }
.je-raiz .t7c.fut .t7v { color: #c9d2dc; }
.je-raiz .t7c.mal { border-color: #a02015; background: #fdf0ee; }
.je-raiz .t7c.ok { border-color: var(--viab); }
.je-raiz .t7ok { position: absolute; top: -6px; right: -4px; background: var(--viab); color: #fff; border-radius: 99px;
  font-size: 9px; font-weight: 800; padding: 1px 5px; }
.je-raiz .tira7pie { font-size: 10.5px; color: var(--mut); margin-top: 4px; line-height: 1.35; }

/* ═══════════════════════════════════════════════════════════════════════════
   CUARTO CAMBIO SOBRE EL PORTE — la capa de AIRE.
   (Los tres primeros están arriba del archivo. Este es el cuarto y va aparte,
   al final, sin tocar una sola regla portada: así se puede leer de un vistazo
   qué se desvió del original de GEI y por qué.)

   Motivo: el original se diseñó para catorce personas mirando un tablero de
   trabajo. J.E. Jaimes lo va a ver en una demostración, proyectado, y con 97
   personas en el organigrama. A esa distancia el 10,5 px no se lee y nada
   respira. Acá NO se cambia ni un color ni un comportamiento: solo tamaño,
   espacio y las señales de que algo se puede tocar.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Se lee de lejos ─────────────────────────────────────────────────── */
.je-raiz .small { font-size: 12px; line-height: 1.45; }
.je-raiz .card { padding: 16px; }
.je-raiz .sgrid { gap: 16px; }
.je-raiz .strow { font-size: 11.5px; padding: 5px 9px 5px 17px; }
.je-raiz .pplaca { padding: 7px 9px; }
.je-raiz .pplaca .nom b { font-size: 12.5px; }
.je-raiz .pplaca .nom span { font-size: 10.5px; }
.je-raiz .wb { width: 268px; flex: 0 0 268px; }
.je-raiz .wb-dept { font-size: 11.5px; padding: 9px 8px; }
.je-raiz .wb-vfp { font-size: 10.5px; padding: 8px 10px; }
.je-raiz .wpuesto { line-height: 1.4; }
.je-raiz .tira7pie { font-size: 11.5px; }
.je-raiz .leg { font-size: 9.5px; gap: 10px; }

/* La barra que se queda arriba: sin sombra, al desplazar el contenido se le
   mete por debajo y las dos capas se confunden. */
.je-raiz .stickybar { box-shadow: 0 6px 12px -10px rgba(20, 30, 50, .55); }

/* ── 2 · Lo que se puede tocar, se ve que se puede tocar ─────────────────── */
/* El sistema viejo lo marcaba solo con un ✎ pequeñito y el rótulo del
   navegador. En una demostración eso no existe: nadie pasa el mouse por encima
   de todo a ver qué reacciona. */
.je-raiz [title^="Admin:"],
.je-raiz .num,
.je-raiz .jefeplaca,
.je-raiz .divvfp[style*="pointer"],
.je-raiz .orgvfp[style*="pointer"] {
  border-radius: 8px;
  transition: box-shadow .12s, background .12s;
}
.je-raiz [title^="Admin:"]:hover,
.je-raiz .num:hover,
.je-raiz .jefeplaca:hover,
.je-raiz .divvfp[style*="pointer"]:hover,
.je-raiz .orgvfp[style*="pointer"]:hover {
  box-shadow: 0 0 0 2px rgba(240, 90, 36, .55);
}

/* MODO EDICIÓN: el interruptor del Admin pone `data-editar="1"` en la página y
   TODO lo editable queda con contorno punteado ámbar. Deja de haber que
   adivinar dónde se puede escribir. */
.je-raiz [data-editar="1"] [title^="Admin:"],
.je-raiz [data-editar="1"] .jefeplaca,
.je-raiz [data-editar="1"] .addsec,
.je-raiz [data-editar="1"] .addmini {
  outline: 1.5px dashed var(--cuota);
  outline-offset: 1px;
  background: #fffdf6;
}

/* Foco de teclado visible en todo lo que responde: sin esto, quien navega con
   tabulador no sabe dónde está parado. */
.je-raiz button:focus-visible,
.je-raiz select:focus-visible,
.je-raiz input:focus-visible,
.je-raiz textarea:focus-visible,
.je-raiz summary:focus-visible {
  outline: 2px solid var(--acum);
  outline-offset: 2px;
}

/* ── 3 · Celular ─────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .je-raiz .wrap { padding: 12px 12px 56px; }
  .je-raiz .card { padding: 13px; }
  /* Las ocho casillas del día en una sola fila quedan de 38 px: no se puede
     teclear ahí. En pantalla angosta van en dos filas de cuatro.
     El `!important` es necesario: el número de columnas lo pone el componente
     en línea (son 8 casillas o 7 según la serie), y una regla en línea le gana
     a la consulta de medios. */
  .je-raiz .tira7 { grid-template-columns: repeat(4, 1fr) !important; gap: 6px; }
  .je-raiz .stickybar { position: static; box-shadow: none; }
  .je-raiz .area { margin-top: 18px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   EL TABLERO MURAL — orden y estética.
   Sigue siendo la capa aparte del porte (ver arriba). Lo que se aplica acá son
   los PRINCIPIOS de la guía de Apple, no su cromo: la tipografía y los colores
   son los de J.E. Jaimes y esos no se tocan.

     · Claridad    — una sola jerarquía de lectura: división → departamento →
                     sección → puesto → estadística. Cada nivel baja de peso.
     · Deferencia  — el ÚNICO color fuerte es el dato: el de la división (que
                     dice de quién es la caja) y el punto de condición (que es
                     el semáforo). Todo lo demás se apaga a neutro. Antes
                     competían cinco familias a la vez —crema, dorado, granate,
                     café y los siete pasteles— y el tablero se leía como un
                     mosaico, no como una estructura.
     · Profundidad — las capas se separan con sombra suave, no con bordes duros.
     · Consistencia— ritmo de 8 pt y radios concéntricos: el radio de adentro
                     más su margen da el radio de afuera, y las esquinas quedan
                     paralelas en vez de pelearse.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1 · Las 7 columnas miden lo mismo ───────────────────────────────────── */
/* Lo que hacía ver la División 1 enorme y las otras seis apretadas contra el
   borde NO eran los anchos —cada división son sus 3 departamentos y siempre
   midió lo mismo—, era que el tablero estaba partido en dos mitades de flex
   distinto. Quitada la partición, las siete columnas quedan parejas solas.
   OJO: el ancho de `.wb` es FIJO a propósito. El tablero es `width: max-content`
   con desplazamiento lateral, y una columna elástica ahí dentro se estira a su
   contenido: al intentarlo, el tablero se fue a 33.440 px de ancho. */
.je-raiz .divrow { gap: 16px; }
.je-raiz .divb { gap: 8px; }
.je-raiz .deptrow { gap: 8px; }

/* La fila de mando, sobre el tablero: como la fila de gerencias de su propio
   organigrama. Centrada, y sin partir el tablero en dos. */
.je-raiz .mandos {
  display: flex; justify-content: center; gap: 16px; flex-wrap: wrap;
  position: sticky; left: 24px; width: calc(100vw - 96px);
}
.je-raiz .mandos .banda { padding-top: 14px; flex: 0 1 320px; }
.je-raiz .mandos .banda .bx { position: static; max-width: none; width: auto; }

/* ── 2 · Jerarquía de lectura ────────────────────────────────────────────── */
.je-raiz .divhead { border-radius: 14px; padding: 11px 12px; }
.je-raiz .divhead .nom { font-size: 13px; letter-spacing: .01em; }
.je-raiz .wb { border-radius: 12px; border-color: #e6e2d9; box-shadow: 0 1px 3px rgba(20, 30, 50, .06); }
.je-raiz .wb-dept { border-bottom-width: 2px; letter-spacing: .02em; }
.je-raiz .wsec { font-size: 10.5px; padding: 7px 10px 4px; }
.je-raiz .wsec-p { font-size: 10.5px; padding: 0 10px 6px 24px; }
.je-raiz .wpuesto { padding: 4px 10px 4px 30px; font-size: 10px; }

/* ── 3 · Deferencia: los PFV dejan de gritar ─────────────────────────────── */
/* El producto final valioso es la conclusión de la caja, no su titular. Iba en
   granate lleno con borde vino; ahora es un pie tranquilo y el acento de color
   lo pone el borde de arriba. */
.je-raiz .wb-vfp {
  background: #fbfaf7; color: #6b6255; border-top: 1px solid #e6e2d9;
  font-size: 10px; letter-spacing: .02em;
}
.je-raiz .wb-vfp span { color: var(--navy); }
.je-raiz .divvfp {
  background: #fff; color: var(--ink); border: 1px solid var(--line);
  border-top: 3px solid var(--granate); border-radius: 12px; padding: 10px 14px;
}
.je-raiz .divvfp .lab { color: var(--granate); opacity: 1; }
.je-raiz .divvfp p { font-weight: 600; color: #3b3630; }

/* ── 4 · Profundidad y respuesta al tacto ────────────────────────────────── */
/* Las curvas y los tiempos son los de la guía: 100 ms para el toque, 200 para
   el resalte. Nada dura más de lo que tarda el ojo en seguirlo. */
.je-raiz .wb, .je-raiz .divhead, .je-raiz .exec, .je-raiz .fundador, .je-raiz .divvfp {
  transition: box-shadow 200ms cubic-bezier(.25, .1, .25, 1),
              transform 100ms cubic-bezier(0, 0, .58, 1);
}
.je-raiz .wb:hover { box-shadow: 0 4px 14px rgba(20, 30, 50, .1); }
.je-raiz .pplaca:active, .je-raiz .strow:active, .je-raiz .wpuesto:active { transform: scale(.995); }

/* La guía es explícita en esto y es lo primero que se cae en un tablero denso:
   quien pidió menos movimiento no debe recibir ninguno. */
@media (prefers-reduced-motion: reduce) {
  .je-raiz *, .je-raiz *::before, .je-raiz *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
}

/* ── 5 · Celular ─────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .je-raiz .mandos { position: static; width: auto; flex-direction: column; align-items: stretch; }
  /* En columna, el `flex: 0 1 320px` de la banda deja de ser ancho y se vuelve
     ALTO: cada banda se estiraba a 320 px de aire vacío —con tres cupos, casi
     mil— y el clic caía fuera de la caja. Cada banda mide lo que ocupa. */
  .je-raiz .mandos .banda { flex: 0 0 auto; }
}

/* ── 6 · Dentro de la caja de departamento: que haya UNA jerarquía ────────── */
/* Todo estaba en 800 con mayúsculas y espaciado: sección, puesto y persona
   gritaban igual, y un nombre largo —«GESTOR DE INNOVACIÓN / INGENIERO
   AUXILIAR»— partido en mayúsculas se vuelve ilegible. Ahora hay tres pesos:
   la SECCIÓN rotula (pequeña, en versalita, apagada) · el PUESTO describe (en
   su caja y letra normal) · la PERSONA es lo que se busca (la única en tinta
   fuerte). Los nombres son los del tablero del cliente y no se tocan; lo que
   cambia es cómo se pintan. */
.je-raiz .wsec { font-weight: 700; letter-spacing: .04em; color: #6b6255; }
.je-raiz .wpuesto .t { text-transform: none; font-weight: 600; letter-spacing: 0; color: var(--mut); }
.je-raiz .wpuesto .p { color: var(--navy); font-weight: 700; }
.je-raiz .sinsec { font-weight: 700; letter-spacing: .04em; }

/* Las pastillas de «esto lo propusimos nosotros» son metadato, no contenido:
   tienen que poderse ver sin robarle la lectura al nombre que acompañan. */
.je-raiz .prop { background: #FBF3E0; color: #9A7430; font-weight: 700; }

/* La franja institucional del departamento ya no es un ladrillo café: es el
   pie del departamento, y basta con que se distinga. */
.je-raiz .junta { background: #6b6255; letter-spacing: .06em; border-top: none; font-weight: 700; }

/* ══ 7 · EL ASISTENTE ══════════════════════════════════════════════════════ */
/* Botón fijo abajo a la derecha y hoja de conversación. Va por ENCIMA de la
   barra de «Conectados ahora» (que es fixed abajo y mide ~40 px): de ahí el
   bottom de 56 px, para que no queden uno sobre otro. */
.je-raiz .ia-boton {
  position: fixed; right: 18px; bottom: 56px; z-index: 90;
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--navy); color: #fff; border: none; border-radius: 99px;
  padding: 11px 18px; font-family: inherit; font-size: 13px; font-weight: 700;
  cursor: pointer; box-shadow: 0 4px 16px rgba(20, 30, 50, .22);
}
.je-raiz .ia-boton:hover { box-shadow: 0 6px 22px rgba(20, 30, 50, .3); }

.je-raiz .ia-hoja {
  position: fixed; right: 18px; bottom: 56px; z-index: 90;
  width: min(420px, calc(100vw - 36px)); max-height: min(72vh, 620px);
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  box-shadow: 0 12px 40px rgba(20, 30, 50, .24); overflow: hidden;
}
.je-raiz .ia-tit {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border-bottom: 1px solid var(--line); background: #fbfcfe;
}
.je-raiz .ia-tit b { font-size: 14px; color: var(--navy); }
.je-raiz .ia-tit .hoja-x { margin-left: auto; }

.je-raiz .ia-cuerpo {
  display: flex; flex-direction: column; gap: 7px;
  padding: 12px 14px; overflow-y: auto; font-size: 13px; line-height: 1.5;
}
.je-raiz .ia-intro { color: var(--mut); font-size: 12px; line-height: 1.45; }
.je-raiz .ia-sug { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.je-raiz .ia-sug .btn { text-align: left; white-space: normal; }
.je-raiz .ia-yo, .je-raiz .ia-el {
  border-radius: 12px; padding: 8px 11px; max-width: 92%; white-space: pre-wrap;
}
.je-raiz .ia-yo { align-self: flex-end; background: var(--navy); color: #fff; }
.je-raiz .ia-el { align-self: flex-start; background: #f2f5f9; color: var(--ink); }
.je-raiz .ia-pensando { color: var(--mut); font-style: italic; }

.je-raiz .ia-pie {
  display: flex; gap: 7px; align-items: flex-end;
  padding: 10px 12px; border-top: 1px solid var(--line); background: #fbfcfe;
}
.je-raiz .ia-pie textarea {
  flex: 1; min-width: 0; resize: none; font-family: inherit; font-size: 13px;
  border: 1px solid var(--line); border-radius: 9px; padding: 7px 9px; line-height: 1.4;
}

@media (max-width: 900px) {
  /* En celular la hoja ocupa el ancho y se pega abajo: escribir en una caja de
     420 px en una pantalla de 390 es escribir a ciegas. */
  .je-raiz .ia-hoja { right: 8px; left: 8px; bottom: 8px; width: auto; max-height: 80vh; }
  .je-raiz .ia-boton { right: 12px; bottom: 52px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   QUINTA CAPA · 44 PX DE ÁREA DE TOQUE
   ---------------------------------------------------------------------------
   Apple pide 44×44 en todo lo que se toca, y no es capricho: por debajo de eso
   la gente falla el clic — en Básicos un conmutador de 32 px de alto pasó por
   "no se deja tocar" hasta que se midió.

   Dos maneras, según el control:
     · los botones con texto crecen de verdad (min-height: 44px);
     · los iconos de una fila (✎ ➖ ↻, el círculo de tres estados, el + de un
       paso, la ✕ de una hoja) se quedan del tamaño que se ven y ESTIRAN SU
       ÁREA con un ::before invisible. Agrandarlos de verdad rompería la fila de
       una tarea, que es la pantalla más densa de todas.

   No se toca ninguna regla portada de más arriba: esto va al final y suma.
   ═══════════════════════════════════════════════════════════════════════════ */

.je-raiz .btn,
.je-raiz .btn.mini,
.je-raiz .hoja select,
.je-raiz .hoja input[type="text"],
.je-raiz .hoja textarea {
  min-height: 44px;
}
.je-raiz .btn.mini { padding: 4px 14px; }
/* La rejilla de la tira de días es una tabla de datos, no una fila de botones:
   ahí manda que quepan las ocho casillas. Se deja como está a propósito. */

.je-raiz .ico,
.je-raiz .tri,
.je-raiz .masPaso,
.je-raiz .hoja-x {
  position: relative;
}
.je-raiz .ico::before,
.je-raiz .tri::before,
.je-raiz .masPaso::before,
.je-raiz .hoja-x::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
  /* Sólo área de toque: ni se ve, ni tapa lo que tiene al lado para el ojo. */
}
/* Los iconos de una fila quedan pegados; sin este aire sus áreas de 44 px se
   pisan entre sí y el dedo cae en el botón de al lado. */
.je-raiz .t1 .ico + .ico { margin-left: 10px; }
.je-raiz .t1 .ico:first-of-type { margin-left: 6px; }

/* ── Los que faltaban: la barra, las pestañas y la tira del encabezado ──────
   El primer barrido midió sólo la zona de tareas. Al barrer la pantalla ENTERA
   aparecieron los de arriba, y entre ellos el peor tipo de fallo: las pestañas
   medían 43 px. Un píxel por debajo del mínimo no se ve en una captura y sí se
   siente en el dedo — es exactamente cómo se coló el conmutador de 32 px en
   Básicos. Se mide, no se mira.

   Los de la barra roja crecen de verdad (hay sitio). Los que viven apretados
   dentro de una línea —la ⓘ, las flechas de la tira— estiran su área.       */

.je-raiz .je-chip,
.je-raiz .je-pestana {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  /* EL `gap` NO ES ADORNO. Al volverlos flex para poder darles los 44 px de toque, cada
     trozo de texto pasó a ser un elemento flex y el navegador se COMIÓ los espacios que
     los separaban: la pastilla de arriba quedó diciendo «Hoy0/0· Semana0/0». El hueco se
     devuelve acá, en el mismo sitio donde se perdió. */
  gap: .3em;
}

.je-raiz .ayuda,
.je-raiz .je-tira-fecha {
  position: relative;
}
.je-raiz .ayuda::before,
.je-raiz .je-tira-fecha::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}
/* La ⓘ abre un globo con su propio ::before decorativo: cuando está abierta, el
   área ampliada estorbaría al globo. Sólo hace falta para poder ABRIRLA. */
.je-raiz .ayuda.open::before { content: none; }

.je-raiz .ia-boton { min-height: 44px; min-width: 44px; }

/* El buscador de estadísticas es un campo de formulario, no una celda. */
.je-raiz input[type="text"][aria-label*="buscar"],
.je-raiz input[placeholder*="buscar"] { min-height: 44px; }

/* Los desplegables del Admin en la ficha de una estadística medían 19 y 22 px, y
   el campo de «+ subtarea» 22: se escribe y se toca en los dos. El `select`
   transparente de una cápsula queda fuera — ése ya vive dentro de sus 44. */
.je-raiz select:not(.cap__nativo) { min-height: 44px; }
/* Ojo con el selector: el campo de «+ subtarea» NO declara type="text" (el DOM lo
   asume, el CSS no), así que `input[type=text]` no lo alcanzaba. */
.je-raiz .tarea .sub input:not([type="checkbox"]) { min-height: 44px; }

/* La ⓘ del cascarón: 12 px de alto. Se queda del tamaño que se ve —es un signo,
   no un botón— y estira su área como los demás iconos. */
.je-raiz .je-ayuda-ico { position: relative; }
.je-raiz .je-ayuda-ico::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  width: 44px; height: 44px;
  transform: translate(-50%, -50%);
}

/* El enlace de la marca lleva a Mi Día, así que se toca. En escritorio le sobra
   alto por el nombre de la empresa al lado; en celular ese nombre se esconde y
   se quedaba en los 32 px del logo. */
.je-raiz .je-marca-enlace { min-height: 44px; }

/* ═══ EL CALENDARIO ═══════════════════════════════════════════════════════
   El mes, en filas de semana de empresa (jueves→miércoles).

   Dos formas, una sola fuente: de 900 px para arriba es una REJILLA de 8
   columnas (el rótulo de la semana + los 7 días); por debajo se desarma en una
   AGENDA vertical. Un mes de 7 columnas en un teléfono no es un calendario
   apretado: es un calendario ilegible, y la persona deja de abrirlo. */

.je-raiz .je-cal { display: grid; gap: 18px; padding-bottom: 8px; }

.je-raiz .je-cal-cabeza {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 16px 24px;
}
.je-raiz .je-cal-mes {
  margin: 0; font-size: clamp(22px, 3.4vw, 30px); font-weight: 700;
  color: var(--je-tinta); line-height: 1.1;
}
/* Sólo la primera letra. Con `capitalize` salía «Agosto De 2026»: la regla del
   navegador sube TODAS las palabras, incluida la preposición. */
.je-raiz .je-cal-mes::first-letter { text-transform: uppercase; }
.je-raiz .je-cal-lema { margin: 6px 0 0; font-size: 13.5px; color: var(--je-tinta-suave); max-width: 62ch; }
.je-raiz .je-cal-nav { margin-left: auto; display: flex; align-items: center; gap: 8px; }
.je-raiz .je-cal-flecha,
.je-raiz .je-cal-hoy {
  min-height: 44px; min-width: 44px; padding: 0 14px;
  border: 1px solid var(--line); border-radius: 999px; background: #fff;
  color: var(--je-tinta); font-size: 15px; font-weight: 600; cursor: pointer;
}
.je-raiz .je-cal-hoy { font-weight: 700; color: var(--je-marca); }
.je-raiz .je-cal-flecha:hover, .je-raiz .je-cal-hoy:hover { background: #fafafa; }

.je-raiz .je-cal-error {
  margin: 0; padding: 12px 14px; border-radius: 10px;
  border: 1px solid #fecdd3; background: #fff1f2; color: #9f1239; font-size: 14.5px;
}

/* ── Los rótulos de columna sólo existen en la rejilla ── */
.je-raiz .je-cal-columnas { display: none; }

.je-raiz .je-cal-rejilla { display: grid; gap: 10px; }

/* ── La fila = una semana ── */
.je-raiz .je-cal-fila { display: grid; gap: 8px; }
.je-raiz .je-cal-fila[data-viva="1"] .je-cal-rotulo { border-color: var(--je-marca); }

.je-raiz .je-cal-rotulo {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  min-height: 44px; padding: 10px 14px;
  border: 1px solid var(--line); border-left: 3px solid var(--line);
  border-radius: 10px; background: #fafbfc; color: var(--je-tinta);
}
.je-raiz .je-cal-rotulo:hover { background: #f2f4f7; }
.je-raiz .je-cal-rotulo-n { font-size: 14px; font-weight: 700; }
.je-raiz .je-cal-rotulo-p { font-size: 12px; color: var(--je-tinta-suave); }
.je-raiz .je-cal-viva {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; background: var(--je-marca); border-radius: 999px; padding: 2px 8px;
}

/* ── El día ── */
.je-raiz .je-cal-dia {
  display: grid; gap: 6px; align-content: start;
  min-height: 44px; padding: 10px 12px; text-align: left;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--je-tinta); cursor: pointer; font: inherit;
}
.je-raiz .je-cal-dia:hover { background: #fafafa; }
.je-raiz .je-cal-dia[data-mes="0"] { background: #fbfbfc; color: var(--je-tinta-suave); opacity: .72; }
.je-raiz .je-cal-dia[data-hoy="1"] { border-color: var(--je-marca); box-shadow: inset 0 0 0 1px var(--je-marca); }
.je-raiz .je-cal-num { font-size: 15px; font-weight: 700; }
.je-raiz .je-cal-dia[data-hoy="1"] .je-cal-num { color: var(--je-marca); }
.je-raiz .je-cal-lista { display: grid; gap: 4px; }

/* La pica: una línea por cosa. Se recorta a una línea a propósito — el detalle
   se ve abriendo el día, y una celda que crece deforma el mes entero. */
.je-raiz .je-cal-pica {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 1.5; padding: 2px 7px; border-radius: 6px;
  border-left: 3px solid transparent; background: #f4f6f8;
}
.je-raiz .je-cal-pica b { font-weight: 700; margin-right: 5px; }
.je-raiz .je-cal-pica i { font-style: normal; color: var(--je-tinta-suave); }
.je-raiz .je-cal-pica[data-tono="abierta"] { border-left-color: var(--je-marca); }
.je-raiz .je-cal-pica[data-tono="vencida"] { border-left-color: #9f1239; background: #fff1f2; color: #9f1239; }
.je-raiz .je-cal-pica[data-tono="hecho"]   { border-left-color: #15803d; color: var(--je-tinta-suave); text-decoration: line-through; }
/* Lo que puso la plataforma se ve, pero más callado que lo que puso una persona. */
.je-raiz .je-cal-pica[data-fija="1"] { background: transparent; border-left-style: dotted; }
.je-raiz .je-cal-mas { font-size: 11.5px; color: var(--je-tinta-suave); padding-left: 7px; }

/* ── El día abierto ── */
.je-raiz .je-cal-hoja { border: 1px solid var(--line); border-radius: 12px; background: #fff; padding: 14px 16px; }
.je-raiz .je-cal-hoja-cabeza { display: flex; align-items: center; gap: 12px; font-size: 15px; }
.je-raiz .je-cal-cerrar {
  margin-left: auto; min-width: 44px; min-height: 44px;
  border: none; background: transparent; color: var(--je-tinta-suave); font-size: 16px; cursor: pointer;
}
.je-raiz .je-cal-hoja-lista { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.je-raiz .je-cal-hoja-lista li {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px;
  padding: 8px 12px; border-radius: 8px; background: #f7f8fa; font-size: 14px;
  border-left: 3px solid var(--je-marca);
}
.je-raiz .je-cal-hoja-lista li[data-tono="vencida"] { border-left-color: #9f1239; background: #fff1f2; }
.je-raiz .je-cal-hoja-lista li[data-tono="hecho"] { border-left-color: #15803d; color: var(--je-tinta-suave); }
.je-raiz .je-cal-hora { font-weight: 700; font-variant-numeric: tabular-nums; }
.je-raiz .je-cal-tit { flex: 1 1 auto; }
.je-raiz .je-cal-etiqueta, .je-raiz .je-cal-para {
  font-size: 11.5px; color: var(--je-tinta-suave);
  border: 1px solid var(--line); border-radius: 999px; padding: 1px 8px; background: #fff;
}
.je-raiz .je-cal-vacio { margin: 10px 0 0; font-size: 14px; color: var(--je-tinta-suave); }
.je-raiz .je-cal-pie { margin: 0; font-size: 13px; color: var(--je-tinta-suave); max-width: 78ch; }

/* ── El conmutador de las tres vistas del calendario ────────────────────────
   Lo mío · mi división · toda la empresa. Es un conmutador de verdad (una sola
   fila, la activa en oscuro), no tres filtros sueltos: la persona está SIEMPRE
   en una de las tres, y el número dice lo que hay este mes en cada una para que
   esconder una capa no sea perderla de vista. */
.je-raiz .je-cal-vistas {
  display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px;
  background: #f1f5f9; border-radius: 12px; padding: 4px; width: max-content; max-width: 100%;
}
.je-raiz .je-cal-vista {
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 14px; border: none; border-radius: 9px;
  background: transparent; color: var(--je-tinta-suave);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
}
.je-raiz .je-cal-vista:hover { background: #e2e8f0; color: var(--je-tinta); }
.je-raiz .je-cal-vista[data-act="1"] { background: var(--navy); color: #fff; }
.je-raiz .je-cal-vista-n {
  min-width: 20px; text-align: center; border-radius: 99px; padding: 1px 6px;
  background: rgba(0,0,0,.09); font-size: 11px; font-variant-numeric: tabular-nums;
}
.je-raiz .je-cal-vista[data-act="1"] .je-cal-vista-n { background: rgba(255,255,255,.22); }
@media (max-width: 560px) {
  .je-raiz .je-cal-vistas { width: 100%; }
  .je-raiz .je-cal-vista { flex: 1 1 0; justify-content: center; padding: 0 8px; font-size: 12px; }
}

/* ── De 900 px para arriba: el mes de verdad ── */
@media (min-width: 900px) {
  .je-raiz .je-cal-columnas {
    display: grid; grid-template-columns: 168px repeat(7, 1fr); gap: 8px;
    padding: 0 2px;
  }
  .je-raiz .je-cal-col {
    font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--je-tinta-suave); text-align: center;
  }
  .je-raiz .je-cal-fila { grid-template-columns: 168px repeat(7, 1fr); align-items: stretch; }
  .je-raiz .je-cal-rotulo { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
  .je-raiz .je-cal-dia { min-height: 104px; }
}

/* ── La tarjeta de conexión con Google Calendar, al pie del mes ── */
.je-raiz .je-cal-conexion {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px;
  border: 1px solid var(--line); border-radius: 12px; background: #fff;
  padding: 16px 18px;
}
.je-raiz .je-cal-cx-t { margin: 0; font-size: 15px; font-weight: 700; color: var(--je-tinta); }
.je-raiz .je-cal-cx-p { margin: 6px 0 0; font-size: 13.5px; line-height: 1.6; color: var(--je-tinta-suave); max-width: 74ch; }
.je-raiz .je-cal-cx-estado { margin: 10px 0 0; font-size: 13.5px; }
.je-raiz .je-cal-cx-estado[data-tono="ok"]  { color: #15803d; }
.je-raiz .je-cal-cx-estado[data-tono="mal"] { color: #9f1239; }
.je-raiz .je-cal-cx-aviso {
  margin: 10px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--je-tinta);
  background: #f7f8fa; border-left: 3px solid var(--je-marca); border-radius: 8px; padding: 8px 12px;
}
.je-raiz .je-cal-cx-botones { margin-left: auto; }
.je-raiz .je-cal-cx-conectar,
.je-raiz .je-cal-cx-quitar {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px; border-radius: 999px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; white-space: nowrap;
}
.je-raiz .je-cal-cx-conectar { background: var(--je-marca); color: #fff; border: none; }
.je-raiz .je-cal-cx-quitar   { background: #fff; color: var(--je-tinta); border: 1px solid var(--line); }
.je-raiz .je-cal-cx-quitar:disabled { opacity: .6; cursor: default; }
@media (max-width: 560px) {
  .je-raiz .je-cal-cx-botones { margin-left: 0; width: 100%; }
  .je-raiz .je-cal-cx-conectar, .je-raiz .je-cal-cx-quitar { width: 100%; }
}

/* ── Las otras dos capas del calendario: la división ◆ y la empresa 🏢 ──
   Se ven DISTINTAS de una tarea a propósito: fondo lleno y sin borde izquierdo de
   color. Una tarea es algo que uno tacha; esto es algo que ese día le pasa a uno. */
.je-raiz .je-cal-evento {
  display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  font-size: 12px; line-height: 1.5; padding: 2px 7px; border-radius: 6px;
  font-weight: 600;
}
.je-raiz .je-cal-evento b { font-weight: 700; margin: 0 5px; }
.je-raiz .je-cal-evento[data-alcance="empresa"]  { background: #fdf0d5; color: #7a4e00; }
.je-raiz .je-cal-evento[data-alcance="division"] { background: #eef2ff; color: #3730a3; }

.je-raiz .je-cal-hoja-lista li[data-capa="empresa"]  { background: #fdf0d5; border-left-color: #8f5f00; }

/* ── El anuncio de toda la empresa ─────────────────────────────────────────
   Un evento que le PASA a todos no se lee como una tarea más de la lista: no
   tiene dueño, no se chulea y la gente necesita de él lo que una tarea nunca
   pide —dónde es y a qué hora—. Por eso lleva el sello de J.E., el título en
   grande y el detalle en su propio renglón. */
.je-raiz .je-cal-hoja-lista li.je-cal-anuncio {
  align-items: center; gap: 12px; padding: 12px 14px;
  background: linear-gradient(100deg, #fff6e6 0%, #fdf0d5 55%, #fbe3c0 100%);
  border-left-width: 4px; border-left-color: var(--je-marca);
  box-shadow: 0 1px 3px rgba(143, 95, 0, .13);
}
.je-raiz .je-cal-sello {
  flex: 0 0 auto; width: 42px; height: 42px; border-radius: 9px; object-fit: contain;
  background: #fff; padding: 4px; border: 1px solid rgba(143, 95, 0, .22);
}
.je-raiz .je-cal-cuerpo { flex: 1 1 auto; min-width: 0; }
.je-raiz .je-cal-linea { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; }
.je-raiz .je-cal-anuncio .je-cal-tit { font-size: 15.5px; font-weight: 800; letter-spacing: -.1px; }
.je-raiz .je-cal-detalle {
  margin: 3px 0 0; font-size: 13px; line-height: 1.45; color: #6b4a06; max-width: 70ch;
}
.je-raiz .je-cal-hoja-lista li:not(.je-cal-anuncio) .je-cal-detalle { color: var(--je-tinta-suave); }
.je-raiz .je-cal-hoja-lista li[data-capa="division"] { background: #eef2ff; border-left-color: #4338ca; }

/* ── Poner algo en el día ── */
.je-raiz .je-cal-poner {
  margin-left: 12px; min-height: 44px; padding: 0 14px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; color: var(--je-marca);
  font-size: 13.5px; font-weight: 700; cursor: pointer;
}
.je-raiz .je-cal-forma {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center;
  margin-top: 12px; padding: 12px; border-radius: 10px; background: #f7f8fa;
}
.je-raiz .je-cal-campo {
  min-height: 44px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line);
  background: #fff; font-size: 16px; color: var(--je-tinta); flex: 1 1 220px;
}
.je-raiz .je-cal-campo-hora { flex: 0 0 auto; min-width: 120px; }
.je-raiz .je-cal-ok, .je-raiz .je-cal-cancelar {
  min-height: 44px; padding: 0 18px; border-radius: 999px; font-size: 14px; font-weight: 700; cursor: pointer;
}
.je-raiz .je-cal-ok { border: none; background: var(--je-marca); color: #fff; }
.je-raiz .je-cal-ok:disabled { opacity: .6; cursor: default; }
.je-raiz .je-cal-cancelar { border: 1px solid var(--line); background: #fff; color: var(--je-tinta); }
.je-raiz .je-cal-quitar {
  margin-left: auto; min-width: 44px; min-height: 44px;
  border: none; background: transparent; color: var(--je-tinta-suave); font-size: 14px; cursor: pointer;
}
.je-raiz .je-cal-err {
  margin: 10px 0 0; padding: 10px 12px; border-radius: 8px;
  border: 1px solid #fecdd3; background: #fff1f2; color: #9f1239; font-size: 13.5px;
}
@media (max-width: 560px) {
  .je-raiz .je-cal-poner { margin-left: 0; width: 100%; margin-top: 8px; }
  .je-raiz .je-cal-campo, .je-raiz .je-cal-ok, .je-raiz .je-cal-cancelar { flex: 1 1 100%; }
}

/* ═══ LA SEMANA, día por día y plegable (portado de Básicos) ══════════════
   Antes era una tabla con los títulos pegados con puntos: no se tocaba nada y una
   semana llena no cabía. Cada día es ahora un bloque con las MISMAS tarjetas de
   «Día» — y arranca abierto sólo el de hoy. */

.je-raiz .je-sem { display: grid; gap: 8px; }
.je-raiz .je-sem-barra { display: flex; align-items: center; gap: 10px; padding-bottom: 2px; }

/* Rejilla de dos columnas: el encabezado que pliega a la izquierda y el ＋ del día
   a la derecha. No puede ser un botón dentro de otro (ni es HTML válido ni deja
   tocar el de adentro), y la columna `auto` se encoge a cero los días que no lo
   llevan — el jueves de la mañana y las semanas cerradas. */
.je-raiz .je-sem-dia {
  border: 1px solid var(--line); border-radius: 10px; background: #fff; overflow: hidden;
  display: grid; grid-template-columns: 1fr auto;
}
.je-raiz .je-sem-dia[data-hoy="1"] { border-color: var(--je-marca); box-shadow: inset 0 0 0 1px var(--je-marca); }

.je-raiz .je-sem-cab {
  grid-column: 1; width: 100%; min-height: 44px; display: flex; align-items: center; gap: 10px;
  padding: 8px 12px; border: none; background: transparent; cursor: pointer;
  font: inherit; text-align: left; color: var(--je-tinta);
}

.je-raiz .je-sem-mas {
  grid-column: 2; min-width: 44px; min-height: 44px; border: none; background: transparent;
  cursor: pointer; color: var(--je-tinta-suave); font-size: 19px; line-height: 1;
  font-family: inherit; transition: color .12s, background .12s;
}
.je-raiz .je-sem-mas:hover { color: var(--acum); background: #fafbfc; }
.je-raiz .je-sem-cab:hover { background: #fafbfc; }
.je-raiz .je-sem-flecha { width: 12px; color: var(--je-tinta-suave); flex-shrink: 0; }
.je-raiz .je-sem-cab b { font-size: 13.5px; font-weight: 700; min-width: 42px; }
.je-raiz .je-sem-fecha { font-size: 12px; color: var(--je-tinta-suave); }
.je-raiz .je-sem-cierre { font-size: 11.5px; color: #8f5f00; font-weight: 700; }
.je-raiz .je-sem-resumen { margin-left: auto; font-size: 12px; color: var(--je-tinta-suave); text-align: right; }
.je-raiz .je-sem-resumen b { color: #15803d; font-weight: 700; }

.je-raiz .je-sem-cuerpo { grid-column: 1 / -1; padding: 2px 8px 8px; border-top: 1px solid var(--line); }

/* ═══ ALTA RÁPIDA — una línea, el día ya dicho por dónde se escribe ═══════
   Una caja de texto, la cápsula de la hora y Crear. Nada más: el día lo dijo el
   bloque en el que está la línea, y volver a preguntarlo con un calendario era
   justo el paso que sobraba. Todo a 44 px, y en celular la caja se lleva el
   renglón entero para que quepa el teclado. */
.je-raiz .je-alta-rapida {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px; margin: 4px 0 8px;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 11px;
}
.je-raiz .je-alta-rapida > input {
  flex: 1 1 200px; min-width: 0; height: 44px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  font: inherit; font-size: 13px; color: var(--je-tinta);
}
.je-raiz .je-alta-rapida > input:focus-visible { outline: 2px solid var(--je-marca); outline-offset: 1px; }
.je-raiz .je-alta-x {
  min-width: 44px; min-height: 44px; border: none; background: transparent;
  color: var(--je-tinta-suave); cursor: pointer; font-size: 14px; font-family: inherit;
}
@media (max-width: 560px) {
  .je-raiz .je-alta-rapida > input { flex: 1 1 100%; }
}

/* EN PAPEL NO HAY PLEGADO. Esta hoja se imprime como plan de la semana, y un día
   cerrado en pantalla no puede salir en blanco: se fuerza visible el cuerpo y se
   esconde el resumen del plegado. */
@media print {
  .je-raiz .je-sem-cuerpo { display: block !important; border-top: 1px solid #ddd; }
  .je-raiz .je-sem-flecha,
  .je-raiz .je-sem-resumen { display: none; }
  .je-raiz .je-sem-barra { display: none; }
  .je-raiz .je-sem-dia { break-inside: avoid; }
}

/* ═══ CENTRO DE MANDO · la malla del Admin ════════════════════════════════
   Casi todo se pinta con lo que ya existía (.tw · .tbl · .adivhead · .inp ·
   .ev · .tag). Lo único propio es la lista de pantallas dentro de la hoja de
   permisos: renglones de 44 px con la casilla a la izquierda, que es la forma
   en que se lee una lista de interruptores sin tener que apuntar. */
.je-raiz .je-ve-fila {
  display: flex; align-items: center; gap: 10px; min-height: 44px;
  padding: 0 4px; border-bottom: 1px solid #f0f3f7; cursor: pointer; font-size: 13px;
}
.je-raiz .je-ve-fila:last-of-type { border-bottom: none; }
.je-raiz .je-ve-fila[data-fija="1"] { opacity: .6; cursor: default; }
.je-raiz .je-ve-fila input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--je-marca); }
.je-raiz .je-ve-fila .tag { margin-left: auto; }
.je-raiz .je-ve-admin { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--line); border-bottom: none; }

/* ═══ POLÍTICAS ══════════════════════════════════════════════════════════
   Una lista de estudio, no un formulario. Cada política es un renglón con su
   título y sus tres marcas; las marcas son botones de 44 px que muestran su
   VALOR (✓ y la fecha), no su mecanismo. */
.je-raiz .je-pol { padding-bottom: 40px; }

.je-raiz .je-pol-cabeza { display: flex; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.je-raiz .je-pol-cabeza h1 { font-size: 22px; margin: 0 0 3px; }
.je-raiz .je-pol-lema { font-size: 13px; color: var(--je-tinta-suave); margin: 0; max-width: 62ch; line-height: 1.5; }
.je-raiz .je-pol-cabeza .btn { margin-left: auto; align-self: center; min-height: 44px; }

/* El número que la División 1 vino a buscar: comprensión de puesto. */
.je-raiz .je-pol-medidor {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 13px 16px; margin-bottom: 16px;
}
.je-raiz .je-pol-medidor-num { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.je-raiz .je-pol-medidor-num b { font-size: 26px; font-weight: 800; color: var(--viab); line-height: 1; }
.je-raiz .je-pol-medidor-num span { font-size: 12px; color: var(--je-tinta-suave); }
.je-raiz .je-pol-barra { height: 8px; border-radius: 99px; background: #eef1f5; overflow: hidden; margin-top: 9px; }
.je-raiz .je-pol-barra > div { height: 100%; background: var(--viab); border-radius: 99px; transition: width .3s; }

.je-raiz .je-pol-bloque { margin-bottom: 22px; }
.je-raiz .je-pol-bloque h2 {
  font-size: 11px; font-family: var(--je-mono); text-transform: uppercase; letter-spacing: .12em;
  color: var(--mut); margin: 0 0 2px; display: flex; align-items: center; gap: 7px;
}
.je-raiz .je-pol-bloque h2 span {
  background: #eef2f7; border-radius: 99px; padding: 1px 8px; font-size: 10px; letter-spacing: 0;
}
.je-raiz .je-pol-sub { font-size: 12px; color: var(--je-tinta-suave); margin: 0 0 9px; line-height: 1.5; }

.je-raiz .je-pol-item {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 12px 14px; margin-bottom: 8px; border-left: 4px solid var(--line);
}
.je-raiz .je-pol-item[data-lista="ok"] { border-left-color: var(--viab); }
.je-raiz .je-pol-tit { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin-bottom: 9px; }
.je-raiz .je-pol-tit > b { font-size: 13.5px; }
.je-raiz .je-pol-mando { display: inline-flex; gap: 5px; margin-left: auto; flex-wrap: wrap; }

.je-raiz .je-pol-marcas { display: flex; gap: 8px; flex-wrap: wrap; }
.je-raiz .je-pol-marca {
  display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: 99px; background: #fff; cursor: pointer;
  font: inherit; font-size: 12.5px; font-weight: 700; color: var(--je-tinta);
  transition: background .12s, border-color .12s, color .12s;
}
.je-raiz .je-pol-marca[data-on="1"] { color: #fff; }
.je-raiz .je-pol-marca[data-on="1"] i { color: rgba(255,255,255,.85); }
.je-raiz .je-pol-marca i { font-style: normal; font-size: 10.5px; font-weight: 400; color: var(--mut); }
.je-raiz .je-pol-marca:disabled { cursor: default; opacity: .75; }
.je-raiz .je-pol-marca:not(:disabled):hover { border-color: #b9c8da; }

@media (max-width: 560px) {
  .je-raiz .je-pol-cabeza .btn { margin-left: 0; }
  .je-raiz .je-pol-marca { flex: 1 1 100%; justify-content: center; }
  .je-raiz .je-pol-mando { margin-left: 0; width: 100%; }
}

/* ── 44 px también aquí ────────────────────────────────────────────────────
   La regla de /je es que todo lo que se toca mide 44 px, y estas clases venían
   portadas de GEI con medidas de escritorio (una casilla de 26 px). Se cumple
   de las dos maneras que el proyecto ya acepta:

   · los controles de verdad (casilla, desplegable) CRECEN a 44;
   · el editor en la línea (`.ev`, el texto subrayado que se toca para editar)
     se queda del tamaño que se ve —si creciera, la fila de la malla pasaría de
     50 a 90 px y una malla de 120 filas dejaría de leerse— y ESTIRA SU ÁREA
     con un ::before. Es el mismo trato que ya tienen la ⓘ y las flechas de la
     tira. La fila mide 50 px, así que el área de una no pisa la de la de abajo.

   Estas clases sólo las usan el centro de mando y Políticas: no hay otra
   pantalla de /je a la que esto le cambie una medida. */
.je-raiz select.sel,
.je-raiz input.inp { min-height: 44px; padding: 6px 10px; }

.je-raiz .tbl .ev {
  position: relative; display: inline-flex; align-items: center; min-height: 32px;
}
/* -8 px arriba y abajo, no -6: con -6 el área daba 43 px y un píxel por debajo
   no se ve en una captura pero sí se falla con el dedo (pasó con las pestañas). */
.je-raiz .tbl .ev::before { content: ""; position: absolute; inset: -8px -8px; }
.je-raiz .tbl td { padding: 9px 10px; }

/* Encabezado de grupo de vencidas en «Alertas y órdenes». Discreto a propósito:
   es un rótulo que explica el orden, no una sección nueva que compita con las
   líneas. Mismo tono monoespaciado de los otros rótulos de /je. */
.je-raiz .je-grupo-venc {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--je-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .1em;
  color: var(--mut); margin: 10px 0 4px; padding-top: 8px; border-top: 1px solid var(--line);
}
.je-raiz .je-grupo-venc:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.je-raiz .je-grupo-venc span {
  background: #eef2f7; border-radius: 99px; padding: 1px 7px; letter-spacing: 0; font-weight: 700;
}

/* ═══ LA FICHA DE UNA PERSONA · media pantalla desde el organigrama ═══════
   Se toca a alguien en el tablero y su semana se abre AL LADO, sin sacar a
   nadie del tablero: el organigrama se sigue viendo a la izquierda, que es lo
   que deja comparar dos personas seguidas sin perder el sitio. En celular no
   hay «al lado»: sube desde abajo y ocupa la pantalla, como el resto de /je. */
.je-raiz .fichabg {
  position: fixed; inset: 0; background: rgba(20,30,50,.42); backdrop-filter: blur(2px);
  z-index: 125; display: flex; justify-content: flex-end;
}
.je-raiz .fichap {
  background: #fff; width: min(560px, 50vw); height: 100%; overflow-y: auto;
  padding: 14px 16px 40px; box-shadow: -8px 0 26px rgba(20,30,50,.18);
  border-left: 4px solid var(--navy);
}
.je-raiz .fichap-tit { display: flex; align-items: flex-start; gap: 11px; margin-bottom: 10px; }
.je-raiz .fichap-tit b { font-size: 16px; color: var(--navy); line-height: 1.2; display: block; }
.je-raiz .fichap-av {
  width: 44px; height: 44px; border-radius: 99px; background: var(--navy); color: #fff; flex: none;
  display: flex; align-items: center; justify-content: center; font-size: 15px; font-weight: 800;
}
/* La semana: dos flechas, el rótulo de en medio y el ⟲ para volver a HOY. */
.je-raiz .fichap-sem {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: #f8fafc; border: 1px solid var(--line); border-radius: 11px;
  padding: 7px 9px; margin-bottom: 10px; position: sticky; top: 0; z-index: 2;
}
.je-raiz .fichap-sem .btn.mini { min-width: 44px; min-height: 44px; }
.je-raiz .fichap-sem-t { flex: 1; text-align: center; min-width: 120px; }
.je-raiz .fichap-sem-t b { display: block; font-size: 12.5px; color: var(--navy); }
.je-raiz .fichap-jue { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.je-raiz .fichap-punto {
  display: inline-flex; align-items: center; gap: 5px; border-radius: 99px;
  padding: 4px 10px; font-size: 11px; font-weight: 700;
}
.je-raiz .fichap-h {
  font-family: var(--je-mono); font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em;
  color: var(--mut); font-weight: 700; margin: 16px 0 6px; padding-top: 9px; border-top: 1px solid var(--line);
}
/* Un día de la semana: su rótulo, sus tareas y el ＋ que abre la línea. */
.je-raiz .fichap-dia { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 6px; background: #fff; }
.je-raiz .fichap-dia.hoy { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy) inset; }
.je-raiz .fichap-dia-t {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 5px 8px; background: #f8fafc; border-radius: 9px 9px 0 0; border-bottom: 1px solid var(--line);
}
.je-raiz .fichap-dia-t b { font-size: 11.5px; color: var(--navy); }
/* Un día sin tareas es sólo su renglón: no lleva la línea de abajo ni deja el
   borde cortado — decir «— sin tareas» ocho veces era ruido, no información. */
.je-raiz .fichap-dia-t:last-child { border-radius: 9px; border-bottom: none; }
.je-raiz .fichap-t { display: flex; align-items: center; gap: 7px; padding: 6px 8px; font-size: 12px; border-bottom: 1px solid rgba(0,0,0,.06); }
.je-raiz .fichap-t:last-child { border-bottom: none; }
.je-raiz .fichap-t .ic { flex: none; color: var(--mut); font-size: 13px; }
.je-raiz .fichap-t .nm { flex: 1; min-width: 0; }
.je-raiz .fichap-t.hecha .nm { text-decoration: line-through; color: var(--mut); }
/* Una estadística: cómo cerró, y debajo la semana casilla por casilla. */
.je-raiz .fichap-st { border: 1px solid var(--line); border-radius: 10px; margin-bottom: 8px; overflow: hidden; }
.je-raiz .fichap-st-t { display: flex; align-items: center; gap: 7px; padding: 7px 9px; cursor: pointer; background: #f8fafc; }
.je-raiz .fichap-st-t:hover { background: #eef3fa; }
.je-raiz .fichap-st-t .cod { font-family: var(--je-mono); font-size: 10px; font-weight: 700; color: var(--mut); flex: none; }
.je-raiz .fichap-st-t .nm { flex: 1; min-width: 0; font-size: 12.5px; font-weight: 700; color: var(--navy); }
.je-raiz .fichap-st-n { display: flex; gap: 12px; flex-wrap: wrap; padding: 6px 9px; font-size: 12px; }
.je-raiz .fichap-st-n i { font-style: normal; color: var(--mut); font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; }
.je-raiz .fichap-7 { display: flex; gap: 3px; padding: 0 9px 9px; }
.je-raiz .fichap-7 .c {
  flex: 1; min-width: 0; text-align: center; border: 1px solid var(--line); border-radius: 7px;
  padding: 4px 2px; background: #fff;
}
.je-raiz .fichap-7 .c.vacia { background: #f4f6f9; }
.je-raiz .fichap-7 .c.hoy { border-color: var(--navy); border-width: 2px; }
.je-raiz .fichap-7 .c .d { display: block; font-family: var(--je-mono); font-size: 8.5px; color: var(--mut); text-transform: uppercase; }
.je-raiz .fichap-7 .c .v { display: block; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; }
/* Los dos controles del Admin sobre un puesto no se separan a los extremos. */
.je-raiz .wpuesto .t .edit + .x { margin-left: 4px; }
@media (max-width: 900px) {
  .je-raiz .fichabg { align-items: flex-end; }
  .je-raiz .fichap {
    width: 100%; height: 92vh; border-left: none; border-top: 4px solid var(--navy);
    border-radius: 16px 16px 0 0; padding-bottom: max(40px, env(safe-area-inset-bottom));
  }
  .je-raiz .fichap-7 { flex-wrap: wrap; }
  .je-raiz .fichap-7 .c { flex: 1 1 21%; }
}

/* El panel de día/hora de la cápsula se sale de su tarjeta a propósito. `.sec` y `.panel`
   llevan `overflow: hidden` (es lo que redondea sus esquinas), así que lo recortarían por
   abajo y la mitad de los días quedaría sin verse. Se abre el recorte SÓLO mientras hay un
   panel desplegado — cerrado, todo vuelve a estar como estaba. */
.je-raiz .sec:has(.cap__panel:not([hidden])),
.je-raiz .panel:has(.cap__panel:not([hidden])),
.je-raiz .secbody:has(.cap__panel:not([hidden])) { overflow: visible; }