/* ===========================================================================
   bravo.css — SÓLO lo de Constructora Bravo.

   El diseño entero es el de La Mente (lamente/je.css · je-v2.css · je-apple.css,
   copiados verbatim). Aquí no se rediseña nada: sólo va
     1. el color de la empresa, que en La Mente es un campo de la empresa
        (je_empresa.color_primario) y no una decisión de diseño;
     2. los colores de sus siete divisiones, que también son datos;
     3. la puerta de entrada, que en La Mente es una página aparte (/je/entrar).
   =========================================================================== */

.je-raiz {
  /* Constructora Bravo — azul de ingeniería, donde J.E. Jaimes lleva su rojo. */
  --je-marca: #1B4D8F;
  --je-marca-presion: #17437D;
  --je-tinta: #333333;
  --je-titulo: Poppins, system-ui, sans-serif;
  --je-texto: Roboto, system-ui, sans-serif;
  --je-mono: "Roboto Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* ── LAS TRES VARIABLES QUE FALTABAN ────────────────────────────────────
     El CSS de La Mente viene de Next.js y ahí las fuentes entran como
     variables que Next inyecta: `--font-poppins`, `--font-roboto`,
     `--font-geist-mono`. Acá NO EXISTÍAN, y una variable que no existe no deja
     la regla a medias: la ANULA entera. El resultado eran 5 familias de letra
     en pantalla —Poppins, Roboto, Roboto Mono y, de colados, **Arial y
     Georgia**— porque los nodos que usaban `--je-sistema` o `--je-titulo` sin
     que resolviera se caían al tipo por defecto del navegador.
     Medido: el calendario entero y varios botones salían en Arial.
     Con esto, cada regla verbatim de La Mente resuelve como allá. */
  --font-poppins: Poppins;
  --font-roboto: Roboto;
  --font-geist-mono: "Roboto Mono";
  --je-sistema: Roboto, -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}

/* ── LOS BOTONES Y LOS CAMPOS NO HEREDAN LA LETRA ─────────────────────────
   El navegador les pone la SUYA (Arial en Chrome), y por eso había cinco
   familias de letra en un sitio que tiene tres: los chips de la barra, el «Hoy»
   del calendario y las ✕ de Ventas salían en Arial mientras todo alrededor iba
   en Roboto. No es un detalle de gusto: es el defecto que hace que una pantalla
   se vea «armada por partes» sin que uno sepa decir por qué.
   `font: inherit` completo cambiaría también el tamaño —y los campos del
   teléfono tienen que quedarse en 16 px para que iOS no haga zoom—, así que se
   hereda SÓLO la familia. */
.je-raiz button,
.je-raiz input,
.je-raiz select,
.je-raiz textarea { font-family: inherit; }
/* Los números siguen en monoespaciada donde ya lo estaban: esas reglas son de
   La Mente y ganan por especificidad, no hay que repetirlas aquí. */

/* El nombre de la empresa donde J.E. Jaimes pone su logotipo. */
.je-logo-empresa {
  background: #fff; color: var(--je-marca);
  font-family: var(--je-titulo); font-weight: 800; font-size: 13.5px;
  letter-spacing: -.01em; padding: 7px 11px; border-radius: 6px; white-space: nowrap;
}
.je-barra-der { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.je-barra-quien { text-align: right; line-height: 1.2; }
.je-barra-quien b { display: block; font-size: 12.5px; }
.je-barra-quien span { display: block; font-size: 11px; opacity: .85; font-weight: 500; }

/* ── La puerta ─────────────────────────────────────────────────────────── */
#puerta[hidden] { display: none; }
#puerta {
  position: fixed; inset: 0; z-index: 900; background: #f4f4f5;
  display: flex; align-items: center; justify-content: center;
  padding: clamp(16px, 5vw, 56px) clamp(14px, 4vw, 24px);
  font-family: Roboto, system-ui, sans-serif; color: #333;
}
.pu-tarjeta {
  width: 100%; max-width: 440px; background: #fff; border: 1px solid #e6e6e6;
  padding: clamp(24px, 6vw, 40px); box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.pu-marca {
  display: inline-block; background: #1B4D8F; color: #fff; font-family: Poppins, system-ui, sans-serif;
  font-weight: 800; font-size: 15px; padding: 9px 13px; border-radius: 7px; margin-bottom: 18px;
}
.pu-tarjeta h1 { font-family: Poppins, system-ui, sans-serif; font-size: 19px; margin: 0 0 4px; font-weight: 700; }
.pu-tarjeta p.sub { margin: 0 0 20px; color: #5b6b7c; font-size: 13.5px; line-height: 1.5; }
.pu-campo { margin-bottom: 13px; }
.pu-campo label { display: block; font-size: 11.5px; font-weight: 700; color: #5b6b7c; margin-bottom: 5px; text-transform: uppercase; letter-spacing: .04em; }
.pu-campo input {
  width: 100%; padding: 10px 12px; font-size: 14px; border: 1px solid #d8dde3; border-radius: 8px;
  background: #fff; color: #333; min-height: 44px;
}
.pu-campo input:focus-visible { outline: 2px solid #1B4D8F; outline-offset: 1px; }
.pu-entrar {
  width: 100%; background: #1B4D8F; color: #fff; border: 0; border-radius: 8px; padding: 12px;
  font-size: 14.5px; font-weight: 700; cursor: pointer; min-height: 46px; font-family: Poppins, system-ui, sans-serif;
}
.pu-entrar:active { transform: scale(.99); }
.pu-entrar[disabled] { opacity: .6; cursor: progress; }
.pu-error { background: #fadbd8; color: #a02015; border-radius: 7px; padding: 9px 11px; font-size: 13px; margin-bottom: 13px; }
.pu-o { text-align: center; color: #98a2b0; font-size: 12px; margin: 18px 0 12px; }
.pu-mirar {
  width: 100%; background: #fff; border: 1px solid #d8dde3; border-radius: 8px; padding: 11px;
  font-size: 13.5px; font-weight: 600; cursor: pointer; min-height: 44px;
}
.pu-mirar:hover { background: #f6f7f9; }
.pu-pie { margin-top: 18px; font-size: 11.5px; color: #8a93a1; line-height: 1.55; }

/* ── Avisos de la copia compartida ─────────────────────────────────────── */
.cb-aviso {
  position: fixed; left: 50%; transform: translateX(-50%); bottom: 18px; z-index: 800;
  background: #333; color: #fff; padding: 9px 16px; border-radius: 999px; font-size: 12.5px;
  font-weight: 600; box-shadow: 0 6px 24px rgba(0,0,0,.25); max-width: 92vw;
}
.cb-aviso.mal { background: #a02015; }

@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ── La fila de tarea ──────────────────────────────────────────────────────
   La Mente no tiene una tarea compartida entre varias personas, así que estas
   tres piezas son nuevas. Van con sus medidas y sus colores: el chip usa el
   mismo radio y el mismo gris de .tag, y el avatar el tamaño de .persona .c. */
/* UNA SOLA ALTURA PARA TODAS LAS FICHAS DE UNA TAREA. Medido: en UN renglón de
   tarea había SEIS alturas distintas (14·16·18·19·20·24 px) y cuatro tamaños de
   letra. Eso es lo que hace que una pantalla se sienta cargada aunque cada pieza
   por separado esté bien: el ojo persigue seis líneas de base en vez de una.
   Ahora todas miden 24 px de alto y comparten radio y tamaño de letra. */
.je-raiz .cb-quien {
  display: inline-flex; align-items: center; gap: 5px; border: 1px solid var(--line);
  border-radius: 99px; padding: 0 9px 0 3px; font-size: 11.5px; font-weight: 600;
  background: #fff; cursor: pointer; color: var(--je-tinta); font-family: inherit;
  height: 20px; line-height: 1;
}
.je-raiz .cb-quien:hover { background: #eef2f7; }
.je-raiz .cb-quien .x { color: var(--mut); font-weight: 800; margin-left: 1px; }
.je-raiz .cb-quien.duenio { background: #deeafc; border-color: transparent; color: #1d4f9c; cursor: default; }
.je-raiz .cb-quien.add { border-style: dashed; color: var(--mut); padding: 0 11px; height: 20px; }
.je-raiz .cb-av {
  width: 20px; height: 20px; border-radius: 99px; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex: none;
}
.je-raiz .je-seg button.on { font-weight: 800; }
.je-raiz .addsec { cursor: pointer; }
@media (max-width: 1100px) { .je-raiz .je-cols { grid-template-columns: 1fr !important; } }

/* ── Popover y panel lateral ───────────────────────────────────────────────
   Piezas de interacción que el portal de JE resuelve con modales propios; aquí
   van con las mismas medidas y los mismos colores del sistema. */
.pop {
  position: absolute; z-index: 200; background: #fff; border: 1px solid #e3e9f0;
  border-radius: 14px; box-shadow: 0 10px 40px rgba(16,24,40,.18); padding: 10px;
  min-width: 240px; max-height: 340px; overflow: auto; font-family: Roboto, system-ui, sans-serif;
}
.pop h4 { font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: #5b6b7c; margin: 0 0 7px; font-weight: 800; }
/* EL TÍTULO Y EL PIE DEL FORMULARIO VAN PEGADOS. `.pop` corta en 340 px y el
   formulario de una estadística medía 589: el botón de Guardar quedaba FUERA
   de la vista y la persona escribía el nombre sin ver cómo guardarlo. Las
   comprobaciones daban verde igual porque Playwright hace scroll solo antes de
   clicar — el defecto sólo lo sufre el humano. Pegados, se ven siempre, mida lo
   que mida el formulario. */
.pop.form { max-height: min(600px, 80vh); }
.pop h4 { position: sticky; top: -10px; z-index: 2; background: #fff; margin: 0; padding: 10px 0 7px; }
.pop .of-pie {
  position: sticky; bottom: 0; z-index: 2; background: #fff;
  display: flex; gap: 7px; margin-top: 12px; padding: 9px 0 10px;
  border-top: 1px solid #e3e9f0;
}
.pop .opt {
  display: flex; gap: 9px; align-items: center; width: 100%; border: 0; background: transparent;
  border-radius: 9px; padding: 6px 8px; cursor: pointer; text-align: left; font-size: 13px;
  font-family: inherit; color: #333;
}
.pop .opt:hover { background: #eef2f7; }
.pop .opt.on { background: #deeafc; color: #1d4f9c; font-weight: 700; }
.pop .opt .tick { margin-left: auto; font-weight: 800; }
.pop .small { font-size: 11.5px; color: #5b6b7c; }
.pop .cb-av { width: 20px; height: 20px; border-radius: 99px; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; font-size: 9px; font-weight: 800; flex: none; }
.slots { display: grid; grid-template-columns: repeat(4, 1fr); gap: 5px; }
.slots button {
  border: 1px solid #e3e9f0; background: #fff; border-radius: 7px; padding: 6px 2px;
  font-size: 12px; font-family: "Roboto Mono", ui-monospace, monospace; cursor: pointer; color: #333;
}
.slots button:hover { background: #eef2f7; }
.slots button.on { background: #1B4D8F; border-color: #1B4D8F; color: #fff; }
#scrim { position: fixed; inset: 0; z-index: 150; background: transparent; }

#drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(600px, 100%); background: #fff;
  border-left: 1px solid #e3e9f0; z-index: 300; overflow: auto;
  box-shadow: -20px 0 60px rgba(16,24,40,.18); transform: translateX(100%);
  visibility: hidden; transition: transform .22s cubic-bezier(.32,.72,0,1), visibility .22s;
  font-family: Roboto, system-ui, sans-serif; color: #333;
}
#drawer.open { transform: none; visibility: visible; }
/* La cabecera del panel es pegajosa (z-index 2). Sin este relleno, cualquier
   cosa a la que se desplace dentro del panel queda DEBAJO de la cabecera: se ve
   el borde y no se puede tocar. Con él, todo aterriza por debajo. */
#drawer { scroll-padding-top: 76px; }
#drawer header {
  position: sticky; top: 0; background: #fff; border-bottom: 1px solid #e3e9f0;
  padding: 14px 16px; display: flex; gap: 11px; align-items: center; z-index: 2;
}
#drawer header .c {
  width: 38px; height: 38px; border-radius: 99px; color: #fff; display: flex;
  align-items: center; justify-content: center; font-size: 13px; font-weight: 800; flex: none;
}
#drawer .dbody { padding: 16px; }
#drawerScrim {
  position: fixed; inset: 0; background: rgba(16,24,40,.28); z-index: 290;
  opacity: 0; pointer-events: none; transition: opacity .2s;
}
#drawerScrim.open { opacity: 1; pointer-events: auto; }

/* El CSS de La Mente pide la marca en /brand/. Va incrustada: una máscara CSS
   no carga desde file:// por CORS, y una máscara que falla no deja un error
   visible — deja un cuadro en blanco donde iba el logo. */
.je-raiz .je-marca-mente-icono {
  -webkit-mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBmaWxsPSJub25lIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PGcgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9IjAuOTIiPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iNjkuMDAiIHkyPSIxNy4wOSIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iODIuOTEiIHkyPSIzMS4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iODguMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iODIuOTEiIHkyPSI2OS4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNjkuMDAiIHkyPSI4Mi45MSIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNTAuMDAiIHkyPSI4OC4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iMzEuMDAiIHkyPSI4Mi45MSIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iMTcuMDkiIHkyPSI2OS4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMTIuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMTcuMDkiIHkyPSIzMS4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMzEuMDAiIHkyPSIxNy4wOSIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iNTAuMDAiIHkyPSIxMi4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjI0LjAwIiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI2My4wMCIgeTE9IjI3LjQ4IiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI3Mi41MiIgeTE9IjM3LjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI3Ni4wMCIgeTE9IjUwLjAwIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI3Mi41MiIgeTE9IjYzLjAwIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI2My4wMCIgeTE9IjcyLjUyIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijc2LjAwIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIzNy4wMCIgeTE9IjcyLjUyIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIyNy40OCIgeTE9IjYzLjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIyNC4wMCIgeTE9IjUwLjAwIiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIyNy40OCIgeTE9IjM3LjAwIiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSIzNy4wMCIgeTE9IjI3LjQ4IiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjwvZz48ZyBmaWxsPSJjdXJyZW50Q29sb3IiPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iMTIuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjY5LjAwIiBjeT0iMTcuMDkiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjgyLjkxIiBjeT0iMzEuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9Ijg4LjAwIiBjeT0iNTAuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjgyLjkxIiBjeT0iNjkuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjY5LjAwIiBjeT0iODIuOTEiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iODguMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjMxLjAwIiBjeT0iODIuOTEiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjE3LjA5IiBjeT0iNjkuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjEyLjAwIiBjeT0iNTAuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjE3LjA5IiBjeT0iMzEuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjMxLjAwIiBjeT0iMTcuMDkiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iMjQuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjYzLjAwIiBjeT0iMjcuNDgiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjcyLjUyIiBjeT0iMzcuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9Ijc2LjAwIiBjeT0iNTAuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjcyLjUyIiBjeT0iNjMuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjYzLjAwIiBjeT0iNzIuNTIiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iNzYuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjM3LjAwIiBjeT0iNzIuNTIiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI3LjQ4IiBjeT0iNjMuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI0LjAwIiBjeT0iNTAuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI3LjQ4IiBjeT0iMzcuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjM3LjAwIiBjeT0iMjcuNDgiIHI9IjEuMyIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
  mask: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMDAgMTAwIiBmaWxsPSJub25lIiBhcmlhLWhpZGRlbj0idHJ1ZSI+PGcgc3Ryb2tlPSJjdXJyZW50Q29sb3IiIHN0cm9rZS13aWR0aD0iMC43IiBzdHJva2UtbGluZWNhcD0icm91bmQiIG9wYWNpdHk9IjAuOTIiPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iNjkuMDAiIHkyPSIxNy4wOSIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iODIuOTEiIHkyPSIzMS4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iODguMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iODIuOTEiIHkyPSI2OS4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNjkuMDAiIHkyPSI4Mi45MSIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNTAuMDAiIHkyPSI4OC4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iMzEuMDAiIHkyPSI4Mi45MSIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iMTcuMDkiIHkyPSI2OS4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMTIuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMTcuMDkiIHkyPSIzMS4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMzEuMDAiIHkyPSIxNy4wOSIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iNTAuMDAiIHkyPSIxMi4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjI0LjAwIiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI2My4wMCIgeTE9IjI3LjQ4IiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI3Mi41MiIgeTE9IjM3LjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI3Ni4wMCIgeTE9IjUwLjAwIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI3Mi41MiIgeTE9IjYzLjAwIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI2My4wMCIgeTE9IjcyLjUyIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijc2LjAwIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIzNy4wMCIgeTE9IjcyLjUyIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIyNy40OCIgeTE9IjYzLjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIyNC4wMCIgeTE9IjUwLjAwIiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIyNy40OCIgeTE9IjM3LjAwIiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSIzNy4wMCIgeTE9IjI3LjQ4IiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9IjEyLjAwIiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjE3LjA5IiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iNjMuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjMxLjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iNzIuNTIiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSI4OC4wMCIgeTE9IjUwLjAwIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNzYuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSI4Mi45MSIgeTE9IjY5LjAwIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNzIuNTIiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSI2OS4wMCIgeTE9IjgyLjkxIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iNjMuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSI1MC4wMCIgeTE9Ijg4LjAwIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iNTAuMDAiIHkyPSI3Ni4wMCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjgyLjkxIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMzcuMDAiIHkyPSI3Mi41MiIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjY5LjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMjcuNDgiIHkyPSI2My4wMCIvPjxsaW5lIHgxPSIxMi4wMCIgeTE9IjUwLjAwIiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMjQuMDAiIHkyPSI1MC4wMCIvPjxsaW5lIHgxPSIxNy4wOSIgeTE9IjMxLjAwIiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iMzcuMDAiIHkyPSIyNy40OCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iMjcuNDgiIHkyPSIzNy4wMCIvPjxsaW5lIHgxPSIzMS4wMCIgeTE9IjE3LjA5IiB4Mj0iNTAuMDAiIHkyPSIyNC4wMCIvPjwvZz48ZyBmaWxsPSJjdXJyZW50Q29sb3IiPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iMTIuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjY5LjAwIiBjeT0iMTcuMDkiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjgyLjkxIiBjeT0iMzEuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9Ijg4LjAwIiBjeT0iNTAuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjgyLjkxIiBjeT0iNjkuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjY5LjAwIiBjeT0iODIuOTEiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iODguMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjMxLjAwIiBjeT0iODIuOTEiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjE3LjA5IiBjeT0iNjkuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjEyLjAwIiBjeT0iNTAuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjE3LjA5IiBjeT0iMzEuMDAiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjMxLjAwIiBjeT0iMTcuMDkiIHI9IjEuNyIvPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iMjQuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjYzLjAwIiBjeT0iMjcuNDgiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjcyLjUyIiBjeT0iMzcuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9Ijc2LjAwIiBjeT0iNTAuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjcyLjUyIiBjeT0iNjMuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjYzLjAwIiBjeT0iNzIuNTIiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjUwLjAwIiBjeT0iNzYuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjM3LjAwIiBjeT0iNzIuNTIiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI3LjQ4IiBjeT0iNjMuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI0LjAwIiBjeT0iNTAuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjI3LjQ4IiBjeT0iMzcuMDAiIHI9IjEuMyIvPjxjaXJjbGUgY3g9IjM3LjAwIiBjeT0iMjcuNDgiIHI9IjEuMyIvPjwvZz48L3N2Zz4=") center / contain no-repeat;
}

/* ── El calendario: la vista activa ──────────────────────────────────────────
   `je-v2.css:981` marca la vista escogida con `.je-cal-vista[data-act="1"]`,
   pero en Bravo `data-act` es el NOMBRE de la acción del clic — un atributo no
   puede ser dos cosas. La marca va en `data-act-sel` y aquí se copian las dos
   reglas verbatim, sin tocar `lamente/`, que se recopia. */
.je-raiz .je-cal-vista[data-act-sel="1"] { background: var(--navy); color: #fff; }
.je-raiz .je-cal-vista[data-act-sel="1"] .je-cal-vista-n { background: rgba(255,255,255,.22); }

/* ── La foto de un evento, llenando la casilla del día ───────────────────────
   `cover` la estira hasta tocar los cuatro bordes SIN deformarla; lo que sobra
   del lado largo se recorta. Es lo que hace que se lea como una foto y no como
   una estampilla con franjas a los lados.

   👉 Si se prefiere ver la foto ENTERA aunque queden franjas: `cover` → `contain`.

   El velo de abajo no es adorno: sin él, una foto de obra a pleno sol dejaba el
   número del día en blanco sobre blanco, y las picas de tarea ilegibles. */
.je-raiz .je-cal-dia.je-cal-confoto {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  isolation: isolate;                      /* el velo no se sale de la casilla */
}
.je-raiz .je-cal-dia.je-cal-confoto::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  border-radius: inherit;
  /* Velo SÓLO arriba y abajo, que es donde van el número y el «+N más». El
     centro queda limpio: con un velo parejo al 58% la foto se leía como un
     cuadro gris — tapaba justo lo que se quería ver. */
  background: linear-gradient(180deg,
    rgba(10,18,32,.46) 0%, rgba(10,18,32,.10) 22%,
    rgba(10,18,32,.06) 72%, rgba(10,18,32,.52) 100%);
}
.je-raiz .je-cal-dia.je-cal-confoto .je-cal-num { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Las picas se vuelven translúcidas: la foto se ve DETRÁS de ellas en vez de
   quedar tapada por una tira blanca maciza. El desenfoque mantiene el texto
   legible encima de cualquier foto. */
.je-raiz .je-cal-dia.je-cal-confoto .je-cal-pica,
.je-raiz .je-cal-dia.je-cal-confoto .je-cal-evento {
  background: rgba(255,255,255,.80);
  -webkit-backdrop-filter: blur(3px) saturate(140%);
  backdrop-filter: blur(3px) saturate(140%);
}
.je-raiz .je-cal-dia.je-cal-confoto .je-cal-mas { color: #fff; text-shadow: 0 1px 3px rgba(0,0,0,.6); }
/* Con foto la casilla necesita alto para que la imagen se vea; en el teléfono
   las filas se apilan y el mínimo de escritorio no aplica. */
@media (min-width: 900px) {
  /* Con foto la casilla crece: en 104 px la imagen es una franja. */
  .je-raiz .je-cal-dia.je-cal-confoto { min-height: 148px; }
}

/* En la hoja del día la foto va ENTERA, sin recortar: la casilla contesta
   «¿qué día es?» y la hoja «¿qué fue?». */
.je-raiz .je-cal-foto-entera { border: none !important; padding: 0 !important; background: none !important; }
.je-raiz .je-cal-foto-entera img {
  display: block; width: 100%; max-height: 320px;
  object-fit: contain; border-radius: 10px; background: #f4f6f9;
}

/* ── La barra de arriba dice de un vistazo en qué perfil estás ───────────────
   Granate de mando = Admin: lo que toques cambia la empresa. Azul de marca =
   estás mirando la pantalla como una persona, sin poderes. Antes las dos se
   veían idénticas y la única pista era si aparecía el chip ⚙️ Admin. */
.je-raiz .je-barra[data-perfil="admin"] {
  background: linear-gradient(90deg, var(--mando) 0%, #6f2b2b 100%);
  box-shadow: inset 0 -3px 0 rgba(255,255,255,.22);
}
/* El chip ⚙️ Admin iba en blanco lleno: lo más gritón de la barra para lo que
   menos se usa. El granate de la barra ya dice «eres Admin»; el chip se queda
   del mismo peso que sus vecinos (14-oct). */
.je-raiz .je-barra[data-perfil="admin"] .je-chip[data-act="admin"] { font-weight: 800; }
/* Abierta la sección, la condición ya la dice la tarjeta de adentro. */
.je-raiz .sec[open] > summary .sum-cond { display: none; }

/* ═══ LA MALLA DEL EQUIPO ══════════════════════════════════════════════════
   Copiada VERBATIM del `<style>` que `mi-dia/MallaEquipo.tsx` lleva dentro del
   componente — por eso no estaba en `lamente/`: no vive en ninguna de las tres
   hojas, vive en el propio archivo del portal. */
.mallascroll { overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 2px; }
table.jemalla { border-collapse: separate; border-spacing: 0; width: 100%; min-width: 700px; }
table.jemalla th, table.jemalla td { padding: 0; }
table.jemalla thead th {
  font-size: 9.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--tinta2, #6b7280); text-align: center; padding: 0 4px 7px; white-space: nowrap;
}
/* El naranja de la marca sobre blanco da 3,39:1, y esto es un encabezado de
   9,5 px: pide 4,5. Mismo naranja oscurecido hasta pasar → 4,56:1. */
table.jemalla thead th.coljue { color: #cb4c1e; }
/* El fondo se pone en línea, con el color de la división de esa persona;
   la regla sólo pone el de la cabecera y el de respaldo. */
table.jemalla th.colp {
  position: sticky; left: 0; z-index: 1; background: #fff;
  text-align: left; padding: 6px 12px 6px 2px; white-space: nowrap;
  border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 400;
}
table.jemalla thead th.colp { padding-bottom: 7px; }
table.jemalla tbody td { border-bottom: 1px solid var(--line); text-align: center; }
table.jemalla tbody tr:last-child td, table.jemalla tbody tr:last-child th { border-bottom: none; }
/* Raya que separa el bloque del jueves de los ocho días */
table.jemalla th:nth-child(5), table.jemalla td:nth-child(5) { border-left: 1px solid var(--line); }
/* 44 px de área de toque, que es lo que pide Apple y lo que la gente acierta */
.jemc { display: inline-grid; place-items: center; width: 44px; height: 44px; font-size: 14px; font-weight: 800; }
button.jemc {
  border: none; background: none; cursor: pointer; padding: 0;
  color: #a02015; border-radius: 10px;
}
button.jemc > span {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px;
  background: #fdecea; border: 1px solid #f0b3ab;
}
button.jemc:hover > span { background: #fbd9d4; }
button.jemc:active { transform: scale(.94); }
button.jemc:focus-visible { outline: none; box-shadow: 0 0 0 4px rgba(160, 32, 21, .22); }
button.jemc:disabled { opacity: .45; cursor: wait; }
.jemc.ok { color: #0e7a5f; }
.jemc.ok > span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: #e6f2ee; border: 1px solid #9fd3c3; }
/* El «—» de «no le toca» se lee, aunque sea lo más apagado de la malla: a
   #9aa3ad daba 2,56:1 contra blanco —por debajo incluso del 3:1 con el que un
   texto se considera legible—. Oscurecido con la técnica del portal (bajar el
   brillo de a 8% hasta pasar 4,5:1) queda en #6e757c → 4,68:1. Sigue siendo el
   elemento más callado de la tabla; ahora además se ve. */
.jemc.no { color: #6e757c; font-weight: 400; }

/* ── La fila de mando se para sobre sus divisiones ───────────────────────────
   En el portal `.mandos` es un flex centrado: las tres cajas salen juntas en el
   medio y no se ve de qué columnas responde cada una. Un organigrama existe
   para leer de quién cuelga qué, así que las dos filas comparten una MISMA
   rejilla de columnas y cada banda declara su `grid-column`.

   `minmax(320px, 1fr)` y no `1fr` a secas: con siete columnas elásticas en una
   pantalla estrecha las cajas de departamento se aplastan hasta ser ilegibles,
   y para eso está el desplazamiento de `.boardscroll`. */
.je-raiz .board .cb-rej {
  display: grid;
  grid-template-columns: repeat(7, minmax(320px, 1fr));
  gap: 14px;
  align-items: stretch;
}
/* La fila de mando deja de ser pegajosa y centrada: ahora su sitio lo manda la
   rejilla, y `position:sticky` la sacaría de sus columnas al desplazar. */
.je-raiz .board .mandos.cb-rej { position: static; width: auto; justify-content: initial; }
.je-raiz .board .mandos.cb-rej .banda { flex: none; }
.je-raiz .board .mandos.cb-rej .banda .bx { position: static; max-width: none; width: auto; }
/* La CAJA se centra sobre su tramo en vez de estirarse de borde a borde: una
   banda de 2.500 px de ancho con el texto en una punta no se lee, y lo que hay
   que ver es que está CENTRADA sobre las columnas de las que responde. */
.je-raiz .board .mandos.cb-rej .banda .exec {
  width: min(100%, 420px);
  margin: 0 auto;
  min-width: 0;
}
/* El tallo de cada banda cae en el centro de su tramo, que es donde está la
   caja; con `left:50%` del portal caía en el centro del FLEX, no del tramo. */
.je-raiz .board .mandos.cb-rej .banda::before { left: 50%; }
/* El travesaño va de la primera banda a la última, no al 50% fijo del portal:
   con las bandas repartidas por la rejilla, medio ancho ya no las toca. */
.je-raiz .board .hline { width: calc(100% - 320px); margin: 0 auto; }

@media (max-width: 900px) {
  /* En el teléfono las columnas se apilan: una rejilla de siete no cabe, y
     entonces «encima de su división» no significa nada. */
  .je-raiz .board .cb-rej { display: flex; flex-direction: column; }
  .je-raiz .board .cb-rej .banda { grid-column: auto !important; }
}

/* ── En la tira de semanas, la VIVA manda y las cerradas se atenúan ──────────
   Con las ocho al mismo peso no se distingue cuál se está llenando — y es la
   única sobre la que se puede hacer algo hoy. */
.je-raiz .fichap-7 .c.cb-cerrada { opacity: .55; }
.je-raiz .fichap-7 .c.cb-viva {
  border-color: var(--je-marca);
  box-shadow: inset 0 0 0 1px var(--je-marca);
  font-weight: 700;
}


/* ── El programa de la condición: cada paso de la fórmula ────────────────────
   Un paso no es un renglón que se lee, es trabajo: lleva su nota y sus tareas.
   Por eso tiene caja propia y no es un `<li>` de una lista numerada. */
.je-raiz .cb-paso {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 8px 10px; margin-top: 7px; background: #fff;
}
.je-raiz .cb-paso-t { display: flex; align-items: flex-start; gap: 8px; font-size: 12px; line-height: 1.4; }
.je-raiz .cb-paso-t > span:nth-child(2) { flex: 1; min-width: 0; font-weight: 600; }
.je-raiz .cb-paso-n {
  flex: none; width: 20px; height: 20px; border-radius: 6px; background: var(--je-marca); color: #fff;
  display: grid; place-items: center; font-family: var(--je-mono); font-size: 10px; font-weight: 800;
}
/* EL CAMPO DE LA NOTA NO ES UN BUSCADOR. Lleva la clase `.je-busca` por el
   borde y el foco del portal, y con ella se traía `max-width:230px` y
   `flex:1 1 150px`: un campo de tres renglones angostos para escribir qué se va
   a hacer en el paso, con media tarjeta vacía al lado. Aquí se le devuelve el
   ancho completo y el alto de algo en lo que se escribe de verdad. */
.je-raiz .cb-paso-nota {
  width: 100%; max-width: none; flex: none; display: block;
  margin-top: 8px; min-height: 68px; font-size: 12.5px; line-height: 1.5;
  padding: 8px 11px; border-radius: 10px; resize: vertical;
}
/* El ＋ del paso, pequeño de verdad. `je-v2.css:752` le pone 44 px de alto a
   todo `.btn.mini` por el dedo; acá el botón se encoge y el ÁREA que se toca se
   queda en 44 px con un ::before invisible — que es la misma salida que usa el
   portal para los iconos de una fila densa. */
.je-raiz .cb-paso-t .btn.mini {
  min-height: 0; padding: 3px 9px; font-size: 11px; border-radius: 8px;
  position: relative; flex: none; align-self: flex-start;
}
.je-raiz .cb-paso-t .btn.mini::before {
  content: ""; position: absolute; inset: -12px -8px; border-radius: 12px;
}
.je-raiz .cb-paso-tarea {
  display: flex; align-items: center; gap: 7px; font-size: 11.5px;
  padding: 5px 0 0; border-top: 1px dashed rgba(0,0,0,.08); margin-top: 6px;
}
.je-raiz .cb-paso-tarea > span:nth-child(2) { flex: 1; min-width: 0; }
.je-raiz .cb-paso-tarea.hecha > span:nth-child(2) { text-decoration: line-through; color: var(--mut); }
.je-raiz .cb-paso-vacio { margin-top: 6px; opacity: .6; }
.je-raiz .cb-paso-alta { margin-top: 8px; background: #f7f9fc; }

/* ══ EL TELÉFONO ═══════════════════════════════════════════════════════════
   Medido a 390×844 antes de tocar nada: la barra 158 px + las pestañas 47 +
   el aviso de demostración 56 + la tira de días 51 = **312 px de 844 antes
   del primer dato**. Ninguna pantalla se iba de lado —eso ya estaba bien—, el
   problema era el aire: más de un tercio de la pantalla gastado en cabecera.
   Aquí se recorta el RELLENO y el tamaño de letra de la cabecera, nunca el
   alto de lo que se toca: los chips, los botones y los campos conservan sus
   44 px, que es lo que pide el dedo (`je-apple.css:63`). */
@media (max-width: 560px) {
  .je-raiz .je-barra { min-height: 0; padding: 5px 10px; gap: 5px 8px; }
  .je-raiz .je-barra .je-chip { padding: 0 9px; font-size: 11.5px; }
  .je-raiz .je-barra .je-logo, .je-raiz .je-barra img { max-height: 30px; }

  /* El aviso de demostración dice lo mismo en dos renglones que en cuatro. */
  .je-banda-demo { padding: 6px 10px; font-size: 11px; line-height: 1.35; }
  .je-tira { padding: 5px 10px; }

  /* Las pestañas NO se tocan: `je.css:129` ya las desplaza de lado y les quita
     la barra. Repetirlo con `-webkit-overflow-scrolling:touch` creó un contexto
     de desplazamiento propio y 14 comprobaciones se quedaron 30 s esperando un
     clic en una pestaña que era visible y no llegaba nunca. */

  /* Las tarjetas ganan ancho útil: 14 px de relleno a cada lado en una pantalla
     de 390 son 28 px menos de gráfica. */
  .je-raiz .card { padding: 11px 12px; }
  .je-raiz .scuerpo { padding: 10px 11px; }
  .je-raiz .cb-paso { padding: 8px 9px; }
  .je-raiz .cb-paso-nota { min-height: 76px; font-size: 13px; }

  /* Un campo con menos de 16 px hace que iOS ACERQUE la pantalla al tocarlo, y
     de ahí no vuelve solo: la persona se queda con la página ampliada. */
  .je-raiz input[type="text"], .je-raiz input[type="email"],
  .je-raiz input[type="password"], .je-raiz textarea, .je-raiz select { font-size: 16px; }
  /* Menos las siete casillas del día, que son una tabla de números y tienen que
     caber siete en 348 px. Ahí el zoom no molesta porque el campo es diminuto. */
  .je-raiz input[data-act="dayval"] { font-size: 13px; }
}

/* La fila de un día en el teléfono: «Sep 18» partido en dos renglones y «1 to
   do» en tres. El texto no se achica —se deja de leer—, se le quita el corte y
   se aprieta el aire entre las cinco piezas de la fila. */
@media (max-width: 560px) {
  .je-raiz .je-sem-cab { gap: 6px; padding: 6px 8px; }
  .je-raiz .je-sem-cab b { min-width: 34px; }
  .je-raiz .je-sem-fecha,
  .je-raiz .je-sem-resumen { white-space: nowrap; }
  .je-raiz .je-sem-cierre { display: none; }   /* «cierra 2 pm» sólo el domingo */
}


/* ═══ LA FRANJA DE LA CUOTA DE LA SEMANA ═════════════════════════════════════
   PORTADA VERBATIM de `la-mente/web/app/globals.css` (bloque `.fr`), con dos
   traducciones al vocabulario de esta casa: sus variables (`--acento-cap`,
   `--ink-faint`, `--surface`) se cambian por las de La Mente (`--acum`, `--mut`,
   `--linea`), y nada más. La marca de arriba es naranja porque es lo mismo que
   pide una tarea: algo que hacer AHORA, no un dato más.
   Alta medida en el portal: 94 px en escritorio, 161 en teléfono. */
.je-raiz .fr {
  border-top: 2px solid var(--acum);
  background: #fafaf9;
  display: flex; align-items: center; gap: clamp(10px, 1.6vw, 18px);
  padding: 10px clamp(17px, 3vw, 30px) 11px;
  color: var(--je-tinta);
  border-radius: 14px;
  border: 1px solid var(--line);
  border-top: 2px solid var(--acum);
  margin-bottom: 14px;
}
.je-raiz .fr__rot {
  flex: 0 0 auto; margin: 0;
  font-family: var(--je-mono), monospace;
  font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase; line-height: 1.55;
}
.je-raiz .fr__rot b { display: block; color: var(--acum); font-weight: 600; }
.je-raiz .fr__rot span { color: var(--mut); }
.je-raiz .fr__tira { display: flex; gap: 9px; flex: 1 1 auto; overflow-x: auto; padding-bottom: 1px; }
.je-raiz .fr__st { flex: 0 0 auto; width: 118px; }
.je-raiz .fr__st > b {
  display: block; font-size: 11.5px; font-weight: 600; line-height: 1.25; margin-bottom: 3px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.je-raiz .fr input {
  font-family: var(--je-mono), monospace; font-variant-numeric: tabular-nums;
  color: var(--je-tinta); background: #fff; border: 1px solid var(--line);
  border-radius: 8px; width: 100%;
}
.je-raiz .fr__q { height: 31px; font-size: 14px; text-align: center; padding: 0 4px; }
.je-raiz .fr__q::placeholder { color: var(--mut); }
.je-raiz .fr__q:focus {
  outline: none; border-color: var(--acum);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--acum) 20%, transparent);
}
/* La casilla que falta NO se pone gris ni se bloquea: se marca. */
.je-raiz .fr__st.falta .fr__q {
  border-color: #b91c1c;
  box-shadow: 0 0 0 3px color-mix(in srgb, #b91c1c 16%, transparent);
}
.je-raiz .fr__ant {
  display: flex; align-items: center; gap: 4px; margin-top: 3px;
  font-family: var(--je-mono), monospace;
  font-size: 9px; letter-spacing: .04em; color: var(--mut);
}
.je-raiz .fr__p {
  flex: 1 1 auto; min-width: 0; height: 19px; font-size: 10.5px; text-align: right;
  padding: 0 4px; border-color: transparent; background: #f1efec; color: var(--mut);
}
.je-raiz .fr__p:focus { outline: none; border-color: var(--acum); background: #fff; color: var(--je-tinta); }
.je-raiz .fr__ok {
  flex: 0 0 auto; font-size: 14px; font-weight: 700; color: #fff;
  background: var(--acum); border: none; border-radius: 999px;
  height: 36px; padding: 0 19px; cursor: pointer;
}
.je-raiz .fr__ok:hover { filter: brightness(.94); }
.je-raiz .fr__ok:focus-visible { outline: none; box-shadow: 0 0 0 4px color-mix(in srgb, var(--acum) 30%, transparent); }
.je-raiz .fr__aviso { flex: 0 0 auto; font-size: 12px; color: #b91c1c; font-weight: 700; }
.je-raiz .fr--hecha {
  border-top-color: #047857; color: #047857;
  font-size: 13px; padding-top: 11px; padding-bottom: 12px;
  gap: 10px;
}
.je-raiz .fr--hecha .fr__rot b { color: #047857; }

/* ── El porcentaje en la malla ─────────────────────────────────────────────
   Mismos colores que el resto del tablero: no hay leyenda nueva que aprender. */
.je-raiz .jempct {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 46px; height: 24px; padding: 0 7px; border-radius: 999px;
  font-family: var(--je-mono), monospace; font-size: 11px; font-weight: 700;
  font-variant-numeric: tabular-nums;
}
.je-raiz .jempct.ok   { background: #d9f2e3; color: #0f6a30; }
.je-raiz .jempct.med  { background: #fdeecd; color: #8f5f00; }
.je-raiz .jempct.bajo { background: #fbdcd9; color: #a02015; }

@media (max-width: 640px) {
  .je-raiz .fr { flex-wrap: wrap; gap: 8px; }
  .je-raiz .fr__rot { flex: 1 1 100%; }
  .je-raiz .fr__rot span { display: none; }
  .je-raiz .fr__tira { flex: 1 1 100%; }
}
@media (max-width: 560px) {
  /* Teléfono: la casilla más grande (y a 16 px, que es lo que evita el zoom de
     iOS), el número de la semana pasada legible, y el botón a 44 px. */
  .je-raiz .fr { gap: 10px; padding: 12px 18px 14px; }
  .je-raiz .fr__rot { font-size: 10px; }
  .je-raiz .fr__st { width: 146px; }
  .je-raiz .fr__st > b { font-size: 12.5px; }
  .je-raiz .fr__q { height: 40px; font-size: 16px; }
  .je-raiz .fr__ant { font-size: 10px; margin-top: 5px; }
  .je-raiz .fr__p { height: 30px; font-size: 16px; }
  .je-raiz .fr__ok { height: 44px; padding: 0 24px; font-size: 15px; width: 100%; }
}


/* ── LA TARJETA DE CLIENTE ────────────────────────────────────────────────
   Dos cosas que se veían mal y se medían: la fila de botones a alturas
   distintas entre tarjetas de la misma fila, y tres íconos del tamaño de un
   botón de verdad pesando más que el nombre del cliente. */
.je-raiz .cb-cli { display: flex; flex-direction: column; }
.je-raiz .cb-cli-acc {
  display: flex; gap: 4px; align-items: center;
  margin-top: auto;              /* ← pega la fila al fondo de la tarjeta */
  padding-top: 10px;
}
/* Los tres íconos: pequeños a la vista, grandes al dedo. El `::before`
   invisible conserva el área de 44 px sin dibujar un círculo de 44 px. */
.je-raiz .cb-cli-acc .btn.sec.mini[data-act^="cli-"]:not([data-act="cli-nota"]) {
  min-height: 26px; height: 26px; width: 26px; padding: 0;
  font-size: 12px; position: relative; opacity: .72;
}
.je-raiz .cb-cli-acc .btn.sec.mini[data-act^="cli-"]:not([data-act="cli-nota"])::before {
  content: ""; position: absolute; inset: -9px; border-radius: 999px;
}
.je-raiz .cb-cli-acc .btn.sec.mini[data-act^="cli-"]:not([data-act="cli-nota"]):hover { opacity: 1; }


/* NO se fuerza la altura de `.tag` ni de `.pill`: son piezas de La Mente y su
   ritmo es el que manda. Lo que se ajusta es LO NUESTRO —`.cb-quien`— para
   caer en esa misma línea. Al revés sería reescribir el portal desde acá, que
   es justo lo que la regla de «no editar lamente/» existe para impedir. */


/* ── LA LEYENDA DE COLORES DE LA 7R ───────────────────────────────────────
   Dice qué es cada línea de la gráfica. Va en monoespaciada chica y apagada:
   es un pie de gráfica, no un párrafo. A 12,5 px ocupaba TRES renglones en
   medio de la tarjeta y le quitaba sitio a lo único que se vino a mirar. */
.je-raiz .leyenda-color {
  font-family: var(--je-mono), monospace;
  font-size: 9.5px; line-height: 1.5; color: var(--mut);
  margin: -2px 0 7px; letter-spacing: .01em;
}

/* ── UN BOTÓN QUE ES SÓLO UN ÍCONO ────────────────────────────────────────
   Pequeño a la vista, 44 px al dedo con el `::before` invisible. Antes estos
   dos círculos grises pesaban más que el nombre de la estadística. */
.je-raiz .btn.sec.mini.ico {
  min-height: 26px; height: 26px; width: 26px; padding: 0;
  font-size: 12px; position: relative; opacity: .72;
}
.je-raiz .btn.sec.mini.ico::before { content: ""; position: absolute; inset: -9px; border-radius: 999px; }
.je-raiz .btn.sec.mini.ico:hover { opacity: 1; }


/* ── CON EL DEDO, 44 PX DE VERDAD ─────────────────────────────────────────
   Medido con `elementFromPoint` en el teléfono: tres controles nuestros no
   llegaban al área de 44 px de Apple.

   Y el ÁREA INVISIBLE NO SIRVE CUANDO HAY DOS BOTONES PEGADOS: dos íconos de
   26 px separados por 4 px, cada uno con su `::before` de -9, se solapan — y el
   de la derecha le roba al de la izquierda media diana. Por eso acá no se
   estira el aire: se le da tamaño de verdad al control, que es lo que hace el
   portal con `@media (pointer: coarse)`.

   En escritorio siguen pequeños: el ratón apunta fino y ahí lo que importa es
   que el ícono no pese más que el contenido. */
@media (pointer: coarse) {
  .je-raiz .btn.sec.mini.ico,
  .je-raiz .cb-cli-acc .btn.sec.mini[data-act^="cli-"]:not([data-act="cli-nota"]) {
    width: 44px; height: 44px; min-height: 44px; font-size: 15px;
  }
  /* Con tamaño real, el aire invisible sobra y es el que causaba el robo. */
  .je-raiz .btn.sec.mini.ico::before,
  .je-raiz .cb-cli-acc .btn.sec.mini[data-act^="cli-"]:not([data-act="cli-nota"])::before { content: none; }

  /* Los cuatro botones de la tarjeta de un negocio —las dos flechas de mover de
     etapa, el ✎ y el ✕— iban entre 26 y 28 px de ancho. */
  .je-raiz .deal .btn.sec.mini { min-width: 44px; height: 44px; }

  /* La pastilla de condición abre la fórmula: es un botón, y medía 19 px. */
  .je-raiz .pill[data-act="condver"] { min-height: 44px; padding-left: 12px; padding-right: 12px; }
}


/* ── LA MALLA, MÁS COMPACTA Y CON JERARQUÍA ───────────────────────────────
   Dos cosas que se veían mal y se miden:

   1. El renglón de la persona iba a 12,5 px y el de «División 4 · Jefe de
      compras» prácticamente igual, en mayúsculas y monoespaciada: dos líneas
      peleando por ser el título. El nombre es lo que se busca; la división es
      dónde está. Ahora el nombre manda (12,5 px, 700) y el contexto queda
      claramente debajo (10 px, 400, sin mayúsculas forzadas).
   2. La tabla entera pesaba más de lo necesario: diez personas con casillas de
      44 px daban una malla más alta que la pantalla. Se baja el alto de fila
      SIN bajar el área de toque en el teléfono (ahí se mantiene en 44). */
.je-raiz table.jemalla th.colp { padding: 5px 10px 5px 2px; }
.je-raiz table.jemalla .jm-nom {
  display: block; font-size: 12.5px; font-weight: 700; line-height: 1.25;
  letter-spacing: -.005em;
}
.je-raiz table.jemalla .jm-tu { font-weight: 400; opacity: .6; font-size: 10.5px; margin-left: 4px; }
.je-raiz table.jemalla .jm-sub {
  font-family: var(--je-mono), monospace;
  font-size: 10px; font-weight: 400; line-height: 1.35; color: var(--mut);
  text-transform: none; letter-spacing: .01em; margin-top: 1px;
}
/* Con ratón la malla se aprieta; con dedo se respeta el área de 44. */
@media (pointer: fine) {
  .je-raiz table.jemalla .jemc { width: 34px; height: 34px; font-size: 12.5px; }
  .je-raiz table.jemalla button.jemc > span { width: 24px; height: 24px; border-radius: 7px; }
  .je-raiz table.jemalla .jempct { min-width: 42px; height: 21px; font-size: 10.5px; }
  .je-raiz table.jemalla thead th { font-size: 9px; padding-bottom: 5px; }
}


/* ── El pie legal de WISE ───────────────────────────────────────────────────
   Chico pero legible: el checklist pide «normalmente pequeño pero legible,
   como 6 puntos». 11px es el equivalente en pantalla — 6pt de papel se lee a
   30 cm y una pantalla se mira más lejos. No se oculta en ningún ancho. */
.je-raiz .cb-legal{
  max-width:820px;margin:34px auto 0;padding:16px 18px 26px;
  border-top:1px solid var(--je-linea,#e3e3e3);
  font-size:11px;line-height:1.55;color:var(--je-tenue,#6b6b6b);text-align:center;
}
.je-raiz .cb-legal p{margin:0 0 4px}
.je-raiz .cb-legal p:last-child{margin-bottom:0}
.je-raiz .cb-legal-l1{font-weight:600;color:var(--je-texto,#333)}
.je-raiz .cb-legal-ia{margin-top:8px;font-family:var(--je-mono,ui-monospace,monospace);letter-spacing:.04em}

/* La línea de origen en la portada. MÁS CHICA que el nombre del producto:
   el checklist lo exige («your name is bigger than LRH's») para que no parezca
   que él escribió o autorizó el producto. El <h1> va a ~26px; ésta a 11. */
.pu-tarjeta .pu-lrh{
  /* Alineada con el <h1>, no centrada: va colgada del nombre del producto,
     que es lo que la frase califica. Centrada se lee como un subtítulo suelto. */
  margin:-4px 0 12px;font-size:11px;line-height:1.45;
  color:var(--je-tenue,#6b6b6b);text-align:left;font-weight:400;
}

/* La firma al pie de los pasos de una fórmula. */
.je-raiz .cb-lrh-firma{margin-top:8px;font-style:italic;opacity:.85}

/* ── EL DINERO ─────────────────────────────────────────────────────────────
   En el teléfono la tabla NO se desplaza de lado: se apila. Una tabla con
   scroll lateral «cabe» —el medidor la deja pasar porque la página no
   desborda— y aun así nadie la lee: lo que queda a la derecha no existe.
   Cada fila pasa a ser una ficha, y cada celda dice de qué es. */
.mn-tabla { width: 100%; border-collapse: collapse; }
.mn-tabla td { padding: 9px 6px; border-bottom: 1px solid var(--je-linea, #e6eaef); vertical-align: top; }
@media (max-width: 620px) {
  .mn-tabla, .mn-tabla tbody, .mn-tabla tr, .mn-tabla td { display: block; width: 100%; }
  .mn-tabla tr { border: 1px solid var(--je-linea, #e6eaef); border-radius: 10px;
                 padding: 10px 12px; margin-bottom: 9px; }
  .mn-tabla td { border: 0; padding: 3px 0; text-align: left !important; }
  /* El rótulo de la celda sólo aparece en el teléfono, donde ya no hay
     encabezado de columna que lo explique. */
  .mn-tabla td[data-r]::before { content: attr(data-r) " · "; color: var(--mut, #6b7280);
                                 font-size: 11.5px; letter-spacing: .03em; }
  .mn-tabla td:first-child::before { content: none; }
}

/* Las barras del ingreso, día por día. Un día que todavía no llegó va a rayas:
   dibujarlo en cero lo haría parecer un día malo, que es otra cosa. */
.mn-dias { display: flex; gap: 6px; align-items: flex-end; }
.mn-dia { flex: 1; text-align: center; min-width: 0; }
.mn-barra { background: var(--je-azul, #7dc0ea); border-radius: 4px 4px 0 0; margin: 3px 0; }
.mn-dia.futuro .mn-barra { background: repeating-linear-gradient(45deg,
  var(--line, #e6eaef), var(--line, #e6eaef) 3px, transparent 3px, transparent 6px); }
.mn-acum { font: 600 10.5px/1.2 var(--je-mono, monospace); color: var(--mut, #6b7280); min-height: 13px; }
.mn-rot  { font: 600 11px/1.2 var(--je-mono, monospace); color: var(--mut, #6b7280); }
.mn-monto{ font: 700 11.5px/1.3 var(--je-mono, monospace); }
.mn-dia.futuro .mn-acum, .mn-dia.futuro .mn-monto { color: var(--mut, #9aa3ad); }
@media (max-width: 480px) { .mn-acum, .mn-monto { font-size: 10px; } .mn-dias { gap: 3px; } }

/* ── La malla del dinero (14-oct-2026) ─────────────────────────────────────
   Verde entra, rojo sale, ámbar apartado. La columna izquierda queda fija al
   desplazarse: sin ella, en la semana 9 ya no se sabe qué renglón es. */
.mm-scroll { overflow-x: auto; border: 1px solid var(--je-linea, #e6eaef); border-radius: 10px; }
.mm { border-collapse: separate; border-spacing: 0; font-family: var(--je-mono); font-size: 12px; min-width: 100%; }
.mm th, .mm td { padding: 6px 7px; border-bottom: 1px solid var(--je-linea, #e6eaef); text-align: right; white-space: nowrap; }
.mm th { background: #f6f7f9; font-size: 11px; position: sticky; top: 0; }
.mm th a { color: inherit; }
.mm .mm-mes { text-align: center; text-transform: uppercase; border-left: 1px solid #d5dbe3; }
.mm .mm-izq { position: sticky; left: 0; z-index: 1; background: #fff; text-align: left; white-space: normal;
  min-width: 220px; max-width: 260px; font-family: var(--je-sans, inherit); font-size: 13px; border-right: 1px solid #d5dbe3; }
.mm th.mm-izq { background: #f6f7f9; z-index: 2; }
.mm .mm-izq .small { font-size: 11px; }
.mm .mm-grupo td { background: #eef1f5; font-weight: 800; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; }
.mm .mm-sub td { border-top: 2px solid #d5dbe3; }
.mm td.mm-hoy, .mm th.mm-hoy { box-shadow: inset 2px 0 0 #e8892f, inset -2px 0 0 #e8892f; }
.mm td.mm-in  { background: #e7f6ec; color: #166534; }
.mm td.mm-out { background: #fdecec; color: #b42318; }
.mm td.mm-ap  { background: #fff5e0; color: #92400e; }
.mm td.mm-ded { color: #6b7280; }
.mm td.mm-asig { color: #334155; }
.mm td.mm-neg { background: #b42318; color: #fff; font-weight: 800; }
.mm td.mm-otro { font-style: italic; }
.mm td.mm-recorte { background: repeating-linear-gradient(45deg, #fff, #fff 4px, #f1f1f1 4px, #f1f1f1 8px); color: #6b7280; }
.mm .mm-marca { display: inline-block; width: 1.1em; font-size: 10px; }
.mm-leg { margin: 4px 0 8px; }
.mm-leg i { display: inline-block; width: 12px; height: 12px; border-radius: 3px; }
.mm-leg i.mm-in { background: #bfe8cc; } .mm-leg i.mm-out { background: #f6c3c3; } .mm-leg i.mm-ap { background: #fde3a7; }
.mm-alerta { color: #b42318; font-weight: 700; margin-bottom: 8px; }
.mm-meses { border-collapse: collapse; font-family: var(--je-mono); font-size: 12.5px; width: 100%; }
.mm-meses th, .mm-meses td { padding: 7px 8px; border-bottom: 1px solid var(--je-linea, #e6eaef); text-align: right; }
.mm-meses td:first-child, .mm-meses th:first-child { text-align: left; font-family: inherit; }
.mm-meses td.mm-in { color: #166534; } .mm-meses td.mm-out { color: #b42318; } .mm-meses td.mm-ap { color: #92400e; }
.mm-meses td.mm-neg { color: #b42318; font-weight: 800; }
@media (max-width: 640px) { .mm .mm-izq { min-width: 150px; max-width: 160px; font-size: 12px; } }
/* Malla v2: vistas, celdas que se tocan, estado apartado/pagado, deudas proyectadas */
.mm-barra { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 10px; }
.mm-seg { margin-left: auto; }
.mm-botones { display: flex; gap: 6px; }
.mm-resumen { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 8px; margin-bottom: 10px; }
.mm-kpi { border-radius: 10px; padding: 9px 12px; border: 1px solid var(--je-linea, #e6eaef); }
.mm-kpi span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #6b7280; }
.mm-kpi b { font-family: var(--je-mono); font-size: 19px; }
.mm-kpi.in b { color: #166534; } .mm-kpi.out b { color: #b42318; } .mm-kpi.ap b { color: #92400e; }
.mm-kpi.neg { background: #b42318; } .mm-kpi.neg span, .mm-kpi.neg b { color: #fff; }
.mm-kpi.deu b { color: #1e3a8a; }
.mm .mm-fecha { font-weight: 400; font-size: 10px; color: #6b7280; }
.mm td.mm-toca { cursor: pointer; }
.mm td.mm-toca:hover { outline: 2px solid #2563eb; outline-offset: -2px; }
.mm .mm-vacio { color: #cbd5e1; }
.mm td.mm-toca:hover .mm-vacio { color: #2563eb; }
.mm .mm-marca { width: auto; min-width: 1.1em; margin-right: 3px; font-weight: 800; }
.mm th.mm-fut, .mm td.mm-fut { background: #f8fafc; }
.mm td.mm-proy, .mm-leg i.mm-proy { background: #fff; color: #1e3a8a; box-shadow: inset 0 0 0 1.5px #93c5fd; border-radius: 4px; }
.mm-leg i.mm-proy { border: 1.5px dashed #93c5fd; box-shadow: none; }
.mm-izq-fila { display: flex; align-items: center; gap: 6px; }
.mm-acc { margin-left: auto; display: flex; gap: 2px; opacity: .55; }
.mm tr:hover .mm-acc { opacity: 1; }
.mm-ico { border: 0; background: none; cursor: pointer; font-size: 13px; padding: 2px 4px; border-radius: 6px; min-width: 28px; min-height: 28px; }
.mm-ico:hover { background: #eef1f5; }
.mm-pills { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.mm-pill { font-size: 10.5px; font-family: inherit; padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.mm-pill.si { background: #dcfce7; color: #166534; }
.mm-pill.no { background: #f1f5f9; color: #475569; }
.mm-pill.neg { background: #fee2e2; color: #b42318; }
.mm-pct { border: 1px dashed #94a3b8; background: #fff; border-radius: 6px; padding: 1px 6px; font: inherit; font-size: 11px; cursor: pointer; }
.mm-pct:hover { border-color: #2563eb; color: #2563eb; }
.mm .mm-izq { min-width: 250px; }
.mm-v-semana td, .mm-v-semana th { font-size: 14px; }
.mm-v-semana { min-width: 0; }
@media (max-width: 640px) { .mm-seg { margin-left: 0; width: 100%; } .mm-botones { width: 100%; } .mm .mm-izq { min-width: 170px; } }
/* Hoja semanal: ingreso, reservar, ¿se reservó?, a pagar, ¿se pagó? */
.mm-hoja td.mm-in-c { color: #166534; background: #f0faf3; }
.mm-hoja td.mm-res-c { color: #92400e; background: #fffaf0; font-weight: 700; }
.mm-hoja td.mm-out-c { color: #b42318; background: #fff6f6; }
.mm-hoja td.mm-bt { text-align: center; }
.mm-hoja th { text-align: center; }
.mm-tog { font: inherit; font-size: 12px; min-height: 34px; min-width: 104px; padding: 4px 10px; border-radius: 999px; cursor: pointer;
  border: 1.5px solid #cbd5e1; background: #fff; color: #334155; }
.mm-tog:hover { border-color: #2563eb; color: #2563eb; }
.mm-tog.on { background: #16a34a; border-color: #16a34a; color: #fff; font-weight: 700; }
.mm-hoja .mm-izq { min-width: 230px; }
.mm-tog.bloq { color: #94a3b8; border-style: dashed; cursor: not-allowed; }

/* Semana: dos lados, la semana y la cuenta */
.mm-dos{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:10px}
.mm-lado{border:1px solid rgba(0,0,0,.1);border-radius:12px;padding:10px 12px}
.mm-lado h4{margin:0 0 8px;font-size:.85rem;text-transform:uppercase;letter-spacing:.04em;opacity:.7}
@media (max-width:760px){.mm-dos{grid-template-columns:1fr}}