/* ═══════════════════════════════════════════════════════════════════════════
   je-apple.css — la capa de acabado del portal de J.E. Jaimes.

   POR QUÉ ES UN ARCHIVO APARTE Y VA DE ÚLTIMO
   `je.css` tiene la marca del inquilino (la inyecta la base) y `je-v2.css` es
   copia verbatim del CSS de GEI: tocarlos desviaría de su original y rompería
   la regla de que la sala 7 del Admin manda sobre los colores. Esta capa NO
   cambia ni un color de marca ni un color de dato — sólo MEDIDAS, RADIOS,
   ÁREA DE TOQUE y MOVIMIENTO. Se puede borrar el archivo entero y el portal
   sigue funcionando igual, más apretado.

   DE DÓNDE SALEN LOS NÚMEROS (Human Interface Guidelines de Apple)
   · rejilla de 8 pt — todo espacio es múltiplo de 4/8
   · 44 px de área de toque mínima en cualquier control
   · radios concéntricos: radio interno + relleno = radio externo
   · curvas y duraciones del sistema; `scale(.97)` al presionar
   · «deference»: el cromo no compite con el contenido — bordes suaves, sombras
     cortas, el color fuerte reservado a UNA acción por pantalla

   LO QUE NO SE TOCA
   · Los colores de las seis condiciones y los de las gráficas. Su rojo dice
     «esto va mal», no «esto es Apple».
   · Las tipografías: Poppins/Roboto vienen de `je_empresa`, son del CLIENTE.
     Se le pone la MEDIDA de Apple a la letra del cliente, no la letra de Apple.
   ═══════════════════════════════════════════════════════════════════════════ */

.je-raiz {
  /* Rejilla de 8 pt */
  --e1: 4px;  --e2: 8px;  --e3: 12px; --e4: 16px;
  --e5: 20px; --e6: 24px; --e8: 32px;

  /* Radios concéntricos */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-cap: 999px;

  /* Movimiento del sistema */
  --curva: cubic-bezier(.25, .1, .25, 1);
  --curva-salida: cubic-bezier(0, 0, .58, 1);
  --rapido: 120ms;
  --normal: 220ms;

  /* Separadores y sombras: cortas y bajas, como en macOS */
  --sep: rgba(60, 60, 67, .16);
  --sombra-1: 0 1px 2px rgba(20, 30, 50, .06);
  --sombra-2: 0 4px 14px -6px rgba(20, 30, 50, .22);

  /* La letra del sistema, para los controles que no llevan la del cliente */
  --je-sistema: var(--font-roboto), -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;

  font-feature-settings: "cv01", "ss01";
  -webkit-font-smoothing: antialiased;
}

/* ── 1 · TODO LO QUE SE TOCA MIDE 44 px ────────────────────────────────────
   Es el único número no negociable del HIG. Se consigue con `min-height` y
   relleno, NO agrandando la letra: el texto sigue del tamaño que estaba. */
.je-raiz .btn,
.je-raiz .je-sel,
.je-raiz .je-seg > button,
.je-raiz .je-busca {
  min-height: 36px;                 /* escritorio: el ratón apunta fino */
  font-family: var(--je-sistema);
}
@media (pointer: coarse) {
  .je-raiz .btn,
  .je-raiz .je-sel,
  .je-raiz .je-seg > button,
  .je-raiz .je-busca { min-height: 44px; }  /* el dedo pide los 44 completos */
}

/* ── 2 · BOTONES ──────────────────────────────────────────────────────────
   Cápsula para la acción principal (recomendación del HIG), gris de sistema
   para la secundaria, y respuesta al presionar. El color de marca NO cambia. */
.je-raiz .btn {
  border-radius: var(--r-cap);
  padding: var(--e2) var(--e4);
  font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: var(--sombra-1);
  transition: transform var(--rapido) var(--curva-salida),
              box-shadow var(--normal) var(--curva),
              background-color var(--normal) var(--curva);
}
.je-raiz .btn.mini { padding: var(--e1) var(--e3); }
.je-raiz .btn.sec {
  background: rgba(120, 120, 128, .12);
  color: var(--je-tinta);
  box-shadow: none;
}
.je-raiz .btn:hover:not(:disabled) { box-shadow: var(--sombra-2); }
.je-raiz .btn.sec:hover:not(:disabled) { background: rgba(120, 120, 128, .2); box-shadow: none; }
.je-raiz .btn:active:not(:disabled) { transform: scale(.97); }

/* El foco se ve. Sin esto el teclado navega a ciegas (WCAG 2.4.7). */
.je-raiz .btn:focus-visible,
.je-raiz .je-sel:focus-visible,
.je-raiz .je-busca:focus-visible,
.je-raiz .je-seg > button:focus-visible {
  outline: none;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--je-marca) 28%, transparent);
}

/* ── 3 · EL SELECTOR ──────────────────────────────────────────────────────
   La pieza que reemplaza las tiras de píldoras. La regla es de Daro y es la
   misma del HIG: **el control que ya muestra el valor es el que lo cambia.**
   Siete píldoras que dicen «Div 1 … Div 7» ocupan una fila entera para
   informar de nada; un desplegable dice en qué división estás Y te lleva a
   otra, en el mismo sitio y con un solo clic.
   Es un <select> NATIVO a propósito: en el teléfono abre la rueda del sistema,
   responde al teclado solo y no hay un menú flotante que mantener. */
.je-raiz .je-sel {
  appearance: none;
  border: 1px solid var(--sep);
  border-radius: var(--r-sm);
  background: #fff;
  color: var(--je-tinta);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 26px 0 var(--e3);
  cursor: pointer;
  max-width: 100%;
  /* Un <select> se estira hasta su opción MÁS LARGA. Sin esto, «Div 1 ·
     División de Comunicaciones» le da 280 px a un control que en reposo dice
     «Ir a división…», y la fila se parte en dos. Con ancho fijo, el rótulo
     cerrado se recorta con puntos suspensivos y la lista desplegada se sigue
     viendo entera. */
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
  transition: border-color var(--normal) var(--curva), box-shadow var(--normal) var(--curva);
  /* La flecha va dibujada en el fondo: un <select> con `appearance:none` pierde
     la suya y sin flecha nadie sabe que se despliega. */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M3 4.5 6 7.5 9 4.5' fill='none' stroke='%235b6b7c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat;
  background-position: right var(--e2) center;
}
.je-raiz .je-sel:hover { border-color: rgba(60, 60, 67, .34); }
.je-raiz .je-sel.puesto {
  /* Cuando NO está en su valor por defecto se nota, sin gritar. */
  border-color: var(--je-marca);
  color: var(--je-marca);
  background-color: color-mix(in srgb, var(--je-marca) 6%, #fff);
}

/* ── 4 · EL CONTROL SEGMENTADO ────────────────────────────────────────────
   Se queda como tira SÓLO donde el HIG lo pide: pocas opciones, excluyentes
   entre sí, y el cambio repinta la pantalla entera. En este portal hay uno
   solo — Diarias / Semanales / Las dos. Todo lo demás es desplegable. */
.je-raiz .je-seg {
  display: inline-flex;
  background: rgba(120, 120, 128, .12);
  border-radius: var(--r-sm);
  padding: 2px;
  gap: 2px;
}
.je-raiz .je-seg > button {
  border: none;
  background: transparent;
  color: var(--je-tinta);
  font-size: 12.5px;
  font-weight: 600;
  padding: 0 var(--e3);
  border-radius: 6px;                /* 6 + 2 de relleno = 8 del contenedor */
  cursor: pointer;
  white-space: nowrap;
  transition: background var(--normal) var(--curva), color var(--normal) var(--curva);
}
.je-raiz .je-seg > button[aria-pressed="true"] {
  background: #fff;
  color: var(--je-marca);
  box-shadow: var(--sombra-1);
}
.je-raiz .je-seg > button:active { transform: scale(.97); }

/* ── 5 · EL BUSCADOR ──────────────────────────────────────────────────────*/
.je-raiz .je-busca {
  border: 1px solid var(--sep);
  border-radius: var(--r-sm);
  padding: 0 var(--e3);
  font-size: 12.5px;
  background: #fff;
  /* Elástico: es lo ÚNICO de la barra que puede encoger sin perder función —un
     buscador de 120 px sigue buscando— así que absorbe él la falta de ancho en
     vez de partir la fila. Medido: sin esto la barra se rompía en dos a 1.180 px
     y en la captura de 1.280 se veía perfecta. */
  flex: 1 1 150px;
  min-width: 116px;
  max-width: 230px;
  transition: border-color var(--normal) var(--curva);
}
.je-raiz .je-busca:focus { border-color: var(--je-marca); }

/* ── 6 · LA BARRA DE HERRAMIENTAS, EN UNA SOLA FILA ───────────────────────
   Antes eran TRES filas y dieciocho controles antes de ver un número. El
   contenido es lo que se vino a ver; la barra sólo tiene que dejarlo pasar.
   `flex-wrap` sigue puesto: en el teléfono baja sola en vez de desbordarse. */
.je-raiz .je-barra-herr {
  display: flex;
  align-items: center;
  gap: var(--e2);
  flex-wrap: wrap;
}
.je-raiz .je-barra-herr .je-crece { margin-left: auto; }

/* ── 7 · TARJETAS ─────────────────────────────────────────────────────────
   Menos borde, más aire, la sombra corta de macOS. */
.je-raiz .card {
  border-radius: var(--r-lg);
  border-color: var(--sep);
  box-shadow: var(--sombra-1);
  padding: var(--e4);
}
.je-raiz .stickybar {
  padding: var(--e3) 0 var(--e2);
  border-bottom: 1px solid var(--sep);
  /* Vidrio de barra: el contenido se ve pasar por debajo, como en iOS. Con
     respaldo sólido — sin `backdrop-filter` queda opaca y se lee igual. */
  background: color-mix(in srgb, var(--je-bg) 82%, transparent);
}
@supports (backdrop-filter: blur(20px)) {
  .je-raiz .stickybar { backdrop-filter: blur(20px) saturate(180%); }
}

/* ── 8 · MOVIMIENTO ───────────────────────────────────────────────────────
   Quien pidió menos movimiento en su sistema, no lo recibe. */
@media (prefers-reduced-motion: reduce) {
  .je-raiz *, .je-raiz *::before, .je-raiz *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .je-raiz .btn:active:not(:disabled),
  .je-raiz .je-seg > button:active { transform: none; }
}