/*
 * jByte — theme.css
 * Paleta derivada del logotipo (docs/jbyte.png) con teoría del color.
 *
 * Del logotipo se tomaron dos colores reales:
 *   - Azul cian del globo/QR ......... #29B6F6  (matiz 199°, seed de marca)
 *   - Azul marino del texto "JByte" .. #003366  (sombra profunda del mismo azul)
 *
 * A partir del matiz semilla (--primary-h) se calculan, en vivo, el
 * complementario y la triada exactos del círculo cromático:
 *   - Complementario = matiz + 180°
 *   - Triada         = matiz ± 120° (triángulo equilátero en el círculo)
 *
 * Para modificar TODA la paleta basta con cambiar --primary-h/-s/-l: los
 * colores derivados, sus tintes/sombras y los degradados se recalculan solos.
 * Requiere navegadores con soporte de hsl() en sintaxis CSS Color 4
 * (Chrome/Edge 111+, Firefox 113+, Safari 16.4+).
 */

:root {
  /* ==========================================================
   * 1. Colores tomados directamente del logotipo
   * ========================================================== */
  --color-logo-azul: #29b6f6;
  /* globo / QR */
  --color-logo-marino: #003366;
  /* texto "JByte" / núcleo del QR */

  /* ==========================================================
   * 2. Motor de teoría del color (H/S/L editables del color semilla)
   * ========================================================== */
  --primary-h: 199;
  --primary-s: 92%;
  --primary-l: 56%;

  /* Cuánto se aclara/oscurece cada color para su tinte y su sombra */
  --shift-l: 22%;

  /* Complementario: opuesto exacto en el círculo cromático (+180°) */
  --complementary-h: calc(var(--primary-h) + 180);
  --complementary-s: var(--primary-s);
  --complementary-l: var(--primary-l);

  /* Triada: dos colores a ±120° del primario (triángulo equilátero) */
  --triad-1-h: calc(var(--primary-h) + 120);
  --triad-2-h: calc(var(--primary-h) - 120);
  --triad-s: var(--primary-s);
  --triad-l: var(--primary-l);

  /* ==========================================================
   * 3. Colores base resueltos (listos para usar)
   * ========================================================== */
  --color-primary: hsl(var(--primary-h) var(--primary-s) var(--primary-l));
  --color-complementary: hsl(var(--complementary-h) var(--complementary-s) var(--complementary-l));
  --color-triad-1: hsl(var(--triad-1-h) var(--triad-s) var(--triad-l));
  --color-triad-2: hsl(var(--triad-2-h) var(--triad-s) var(--triad-l));

  /* ==========================================================
   * 4. Tintes y sombras — mismo matiz, luminosidad distinta
   * ========================================================== */
  --color-primary-light: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) + var(--shift-l)));
  --color-primary-base: var(--color-primary);
  --color-primary-deep: hsl(var(--primary-h) var(--primary-s) calc(var(--primary-l) - var(--shift-l)));

  --color-complementary-light: hsl(var(--complementary-h) var(--complementary-s) calc(var(--complementary-l) + var(--shift-l)));
  --color-complementary-base: var(--color-complementary);
  --color-complementary-deep: hsl(var(--complementary-h) var(--complementary-s) calc(var(--complementary-l) - var(--shift-l)));

  --color-triad-1-light: hsl(var(--triad-1-h) var(--triad-s) calc(var(--triad-l) + var(--shift-l)));
  --color-triad-1-base: var(--color-triad-1);
  --color-triad-1-deep: hsl(var(--triad-1-h) var(--triad-s) calc(var(--triad-l) - var(--shift-l)));

  --color-triad-2-light: hsl(var(--triad-2-h) var(--triad-s) calc(var(--triad-l) + var(--shift-l)));
  --color-triad-2-base: var(--color-triad-2);
  --color-triad-2-deep: hsl(var(--triad-2-h) var(--triad-s) calc(var(--triad-l) - var(--shift-l)));

  /* ==========================================================
   * 5. Contraste — los dos únicos tonos "planos" del logotipo
   * ========================================================== */
  --color-on-dark: #ffffff;
  /* texto/ícono sobre fondos base o profundos */
  --color-on-light: var(--color-logo-marino);
  /* texto/ícono sobre tintes claros */

  /* ==========================================================
   * 6. Degradados — de primarios, de complementos y de triadas
   * ========================================================== */
  --gradient-primary: linear-gradient(135deg, var(--color-primary-light), var(--color-primary-deep));
  --gradient-complementary: linear-gradient(135deg, var(--color-complementary-light), var(--color-complementary-deep));
  --gradient-triad-1: linear-gradient(135deg, var(--color-triad-1-light), var(--color-triad-1-deep));
  --gradient-triad-2: linear-gradient(135deg, var(--color-triad-2-light), var(--color-triad-2-deep));

  /* Combinados: primario + su opuesto, y el trío completo de la triada */
  --gradient-accent: linear-gradient(135deg, var(--color-primary), var(--color-complementary));
  --gradient-triadic: linear-gradient(135deg, var(--color-primary), var(--color-triad-1), var(--color-triad-2));
}

/* ================================================================
 * Clases utilitarias — consumen solo las variables de arriba;
 * para retonar la paleta entera basta con editar la sección 2.
 * ================================================================ */

/* Fondos sólidos */
.bg-primary {
  background-color: var(--color-primary);
  color: var(--color-on-dark);
}

.bg-primary-light {
  background-color: var(--color-primary-light);
  color: var(--color-on-light);
}

.bg-primary-deep {
  background-color: var(--color-primary-deep);
  color: var(--color-on-dark);
}

.bg-complementary {
  background-color: var(--color-complementary);
  color: var(--color-on-dark);
}

.bg-complementary-light {
  background-color: var(--color-complementary-light);
  color: var(--color-on-light);
}

.bg-complementary-deep {
  background-color: var(--color-complementary-deep);
  color: var(--color-on-dark);
}

.bg-triad-1 {
  background-color: var(--color-triad-1);
  color: var(--color-on-dark);
}

.bg-triad-2 {
  background-color: var(--color-triad-2);
  color: var(--color-on-dark);
}

/* Texto */
.text-primary {
  color: var(--color-primary);
}

.text-complementary {
  color: var(--color-complementary);
}

.text-triad-1 {
  color: var(--color-triad-1);
}

.text-triad-2 {
  color: var(--color-triad-2);
}

/* Bordes */
.border-primary {
  border-color: var(--color-primary);
}

.border-complementary {
  border-color: var(--color-complementary);
}

/* Degradados */
.bg-gradient-primary {
  background: var(--gradient-primary);
  color: var(--color-on-dark);
}

.bg-gradient-complementary {
  background: var(--gradient-complementary);
  color: var(--color-on-dark);
}

.bg-gradient-triad-1 {
  background: var(--gradient-triad-1);
  color: var(--color-on-dark);
}

.bg-gradient-triad-2 {
  background: var(--gradient-triad-2);
  color: var(--color-on-dark);
}

.bg-gradient-accent {
  background: var(--gradient-accent);
  color: var(--color-on-dark);
}

.bg-gradient-triadic {
  background: var(--gradient-triadic);
  color: var(--color-on-dark);
}

/* ================================================================
 * Logo de marca — dimensiona docs/jbyte.png (500x308px) para que
 * quepa en la barra de navegación de cualquier plantilla, sin
 * depender de los estilos originales de cada una.
 * ================================================================ */
.jbyte-logo {
  display: block;
  height: 120px;
  width: 250px;
}

/* ================================================================
 * Contenido de empresa (empresa.json vía jbyte-empresa.js) — estilos
 * mínimos y neutros para que la lista de horario y los valores se
 * vean ordenados en cualquier plantilla sin CSS propio.
 * ================================================================ */
[data-jbyte-horario] {
  list-style: none;
  padding: 0;
  margin: 0;
}

[data-jbyte-horario] li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
}

[data-jbyte-horario] .jbyte-dia {
  font-weight: 600;
}

[data-jbyte-valores] {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

[data-jbyte-valores] .jbyte-valor {
  flex: 1 1 200px;
}

[data-jbyte-valores] .jbyte-valor strong {
  display: block;
  color: var(--color-primary);
  margin-bottom: 4px;
}