/* ===========================================================================
   je.css — variables y medidas del inquilino J.E. Jaimes Ingenieros.

   Los valores de aquí son el RESPALDO. Los de verdad los inyecta layout.tsx
   leyendo la fila de la empresa (je_empresa.color_primario, logo_url…), que es
   lo que hace que la sala 7 del Admin cambie la barra de todas las pantallas.
   Si estos se escribieran duros, esa sala quedaría mintiendo.

   No toca app/globals.css. Todo cuelga de .je-raiz.
   =========================================================================== */

.je-raiz {
  /* Marca — respaldo si la lectura de la empresa falla (feature 19) */
  --je-marca: #EC1C24;
  --je-marca-presion: #E52628;
  --je-tinta: #333333;
  --je-tinta-suave: #5A5A5A;

  /* Tipografías de la marca (feature 50). Las variables --font-* las define
     next/font en el <div> raíz; acá solo se les pone nombre de negocio. */
  --je-titulo: var(--font-poppins), system-ui, sans-serif;
  --je-texto: var(--font-roboto), system-ui, sans-serif;
  /* La monoespaciada y la serif se conservan donde ya tenían trabajo (f. 51) */
  --je-mono: var(--font-geist-mono), ui-monospace, monospace;
  --je-serif: Georgia, "Times New Roman", serif;

  /* Las cápsulas de día y hora (.cap, en globals.css) son la MISMA pieza que usa
     el portal del staff. Lo único que cambia entre inquilinos es el acento, y se
     cambia acá: así el control se ve de JE sin duplicar una línea de código. */
  --acento-cap: var(--je-marca);
  --border: var(--line);

  /* Colores de dato — NO son de marca y no se tocan con el rojo de JE */
  --acum: #f05a24;
  --mut: #5b6b7c;
  --line: #e3e9f0;
  --je-bg: #f4f6fa;
  --dia: #60a5fa;
  --dia-hoy: #1d4ed8;
  --sant: #c4c0ba;
  --cuota: #a16207;
  --viabline: #0a7d4e;
  --viab: #0e7a5f;
  --sem: #7c4dbb;
  --destructivo: #a02015;

  /* Las seis condiciones. Su rojo significa «esto va mal», no «esto es JE». */
  --cond-peligro-bg: #fadbd8;      --cond-peligro-tx: #a02015;
  --cond-emergencia-bg: #fdeecd;   --cond-emergencia-tx: #8f5f00;
  --cond-normal-bg: #deeafc;       --cond-normal-tx: #1d4f9c;
  --cond-inexistencia-bg: #e8ebef; --cond-inexistencia-tx: #68758a;
  --cond-afluencia-bg: #d9f2e0;    --cond-afluencia-tx: #0f6a30;
  --cond-poder-bg: #b9e6c9;        --cond-poder-tx: #0a4d24;

  background: var(--je-bg);
  color: var(--je-tinta);
  font-family: var(--je-texto);
  min-height: 100dvh;
  /* Regla dura: la página nunca se desplaza de lado (§ Celular). Lo ancho va
     dentro de su propia caja con desplazamiento. */
  overflow-x: clip;
}

/* Dentro de /je los títulos van en Poppins, no en la serif de La Mente. */
.je-raiz h1,
.je-raiz h2,
.je-raiz h3,
.je-raiz h4 {
  font-family: var(--je-titulo);
  font-weight: 700;
  letter-spacing: -0.01em;
}

.je-mono { font-family: var(--je-mono); }
.je-serif { font-family: var(--je-serif); }

/* ── Barra roja ────────────────────────────────────────────────────────────
   Contraste (feature 48): blanco sobre #EC1C24 da 4,41:1 — alcanza para texto
   grande o en negrita, queda por debajo del 4,5 que pide el texto pequeño.
   De ahí sale la regla: nada de la barra va en letra fina. */
.je-barra {
  background: var(--je-marca);
  min-height: 54px;
  padding: 0 14px;
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  color: #fff;
}
.je-barra * { font-weight: 600; }

.je-chip {
  background: rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  padding: 5px 10px;
  font-size: 12.5px;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.12s;
  max-width: 46vw;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.je-chip:hover { background: rgba(255, 255, 255, 0.22); }

/* Pastilla del logo: obligatoria. El logo trae texto gris #5A5A5A que sobre el
   rojo no se lee. No es decoración. */
.je-pastilla-logo {
  background: #fff;
  border-radius: 7px;
  padding: 4px 9px;
  display: inline-flex;
  align-items: center;
}
.je-logo { height: 42px; width: auto; }

.je-marca-mente-icono {
  width: 24px;
  height: 24px;
  background: #333333;
  -webkit-mask: url("/brand/la-mente-mark.svg") center / contain no-repeat;
  mask: url("/brand/la-mente-mark.svg") center / contain no-repeat;
}

/* ── Barra de pestañas ──────────────────────────────────────────────────── */
.je-pestanas {
  background: #fff;
  border-bottom: 1px solid var(--line);
  display: flex;
  gap: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.je-pestanas::-webkit-scrollbar { display: none; }

.je-pestana {
  padding: 11px 14px;
  font-size: 13px;
  font-weight: 600;
  color: var(--mut);
  border: 0;
  background: none;
  cursor: pointer;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
}
.je-pestana[data-activa="1"] {
  font-weight: 700;
  color: var(--je-tinta);
  border-bottom-color: var(--acum);
}

/* ── Banda de demostración (feature 46) ─────────────────────────────────── */
.je-banda-demo {
  background: #FFF4DB;
  border-left: 4px solid #8F5F00;
  color: #7A4E00;
  font-size: 13px;
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── Tira de la semana ──────────────────────────────────────────────────── */
.je-tira {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: 9px 16px;
  display: flex;
  align-items: center;
  gap: 16px;
}
.je-tira-fecha {
  font-family: var(--je-serif);
  font-size: 13px;
  color: var(--mut);
  white-space: nowrap;
  background: none;
  border: 0;
  cursor: pointer;
}
.je-tira-fecha[disabled] { cursor: default; opacity: 0.55; }

.je-punto { width: 9px; height: 9px; border-radius: 50%; background: var(--sant); }
.je-punto[data-estado="pasado"] { background: var(--je-tinta); }
.je-punto[data-estado="hoy"] {
  width: 15px; height: 15px; border-radius: 34%;
  background: var(--acum);
  box-shadow: 0 0 0 5px rgba(240, 90, 36, 0.22);
}
.je-avance {
  height: 5px; border-radius: 3px;
  background: linear-gradient(90deg, #333333, var(--je-marca), var(--acum));
}

/* ── Contenido ──────────────────────────────────────────────────────────── */
.je-contenido {
  max-width: 1880px;
  margin: 0 auto;
  padding: 16px 24px 64px;
}
.je-tarjeta {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
}

/* ── Carga (feature 33): nueve puntos, ciclo de 1,1 s ───────────────────── */
@keyframes je-brinco {
  0%, 60%, 100% { transform: translateY(0); opacity: 0.45; }
  30% { transform: translateY(-7px); opacity: 1; }
}
.je-punto-carga {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mut);
  animation: je-brinco 1.1s ease-in-out infinite;
}

/* ── Hoja de decisión (feature 38) ──────────────────────────────────────── */
@keyframes je-fondo-entra { from { opacity: 0; } to { opacity: 1; } }
@keyframes je-hoja-entra { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.je-fondo-hoja {
  position: fixed; inset: 0; z-index: 50;
  background: rgba(15, 20, 28, 0.45);
  backdrop-filter: blur(2px);
  animation: je-fondo-entra 0.14s ease-out;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
}
.je-hoja {
  background: #fff; border-radius: 14px;
  width: min(440px, 100%);
  animation: je-hoja-entra 0.16s ease-out;
}
/* Los campos van a 16 px a propósito: con menos, el navegador del iPhone hace
   zoom al enfocar y descuadra la pantalla. */
.je-hoja input, .je-hoja select, .je-hoja textarea { font-size: 16px; }

/* Corte en 560 px: la hoja sube desde el borde inferior, al alcance del pulgar. */
@media (max-width: 560px) {
  .je-fondo-hoja { align-items: flex-end; padding: 0; }
  .je-hoja {
    width: 100%;
    border-radius: 18px 18px 0 0;
    max-height: 92dvh;
    overflow-y: auto;
    padding-bottom: env(safe-area-inset-bottom);
    animation-duration: 0.18s;
  }
  .je-hoja .je-hoja-pie button { width: 100%; }
}

/* ── Celular ────────────────────────────────────────────────────────────── */
@media (max-width: 760px) {
  .je-barra { padding: 6px 10px; gap: 6px; }
  .je-barra .je-derecha { font-size: 11.5px; }
  .je-logo { height: 26px; }
  .je-pastilla-logo { padding: 3px 7px; }
  .je-marca-mente { width: 28px !important; height: 29px !important; }
  .je-contenido { padding: 12px 12px 56px; }
  .je-tira { gap: 10px; }
  .je-tira-fecha { display: none; }   /* quedan los ocho puntos y el avance */
}

/* Semana cerrada: lo que solo vale en la semana viva baja al 55 % y no responde. */
.je-pasado { opacity: 0.55; pointer-events: none; }