/* LOS COLORES DE ApiarioTech.
 *
 * Elegidos por el dueño el 15 de septiembre de 2026: amarillo #FFD400 sobre negro
 * #08090A. El logo es la danza de la abeja —el ocho tumbado, con el cruce cortado—
 * y vive en ../logo.svg.
 *
 * ── POR QUÉ ESTE ARCHIVO EXISTE, Y NO SE TOCAN LOS CSS DE LOS PANELES ────────
 *
 * Las cuatro pantallas son LAS MISMAS para La Abejería y para ApiarioTech: un solo
 * archivo servido por dos servidores. Cambiar sus colores les cambiaría también los
 * de la miel, que son suyos y están decididos desde antes.
 *
 * Así que aquí solo se vuelven a declarar las VARIABLES de color, y el servidor
 * engancha este archivo únicamente cuando la instancia es ApiarioTech (ver
 * src/server.js). Va después del CSS del panel, así que gana.
 *
 * Se mantienen los DOS modos —claro y oscuro—: en el apiario se trabaja al sol, y
 * forzar el modo oscuro sería peor para leer. Lo que cambia es la marca.
 */

:root {
  /* Los cuatro paneles de campo: entrar, apiario y flora */
  --ground: #f7f4ef;
  --surface: #ffffff;
  --surface-2: #efece6;
  --ink: #08090a;
  --ink-soft: #5c6063;
  --brand: #08090a;
  --amber: #ffd400;
  --line: rgba(8, 9, 10, 0.14);
  --on-brand: #f7f4ef;

  /* El panel de certificación llama a lo mismo de otra manera */
  --bg: #f7f4ef;
  --card: #ffffff;
  --text: #08090a;
  --text-muted: #5c6063;
  --border: rgba(8, 9, 10, 0.12);
  --gold: #ffd400;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme='light']) {
    --ground: #08090a;
    --surface: #141617;
    --surface-2: #1c1f20;
    --ink: #f3f1ec;
    --ink-soft: #a9a59f;
    --brand: #ffd400;
    --amber: #ffd400;
    --line: rgba(243, 241, 236, 0.16);
    --on-brand: #08090a;

    --bg: #08090a;
    --card: #141617;
    --text: #f3f1ec;
    --text-muted: #a9a59f;
    --border: rgba(243, 241, 236, 0.14);
    --gold: #ffd400;
  }
}

/* Y el mismo juego para quien tenga el modo oscuro elegido a mano en la pantalla,
 * que es como lo hacen flora y certificación. */
:root[data-theme='dark'] {
  --ground: #08090a;
  --surface: #141617;
  --surface-2: #1c1f20;
  --ink: #f3f1ec;
  --ink-soft: #a9a59f;
  --brand: #ffd400;
  --amber: #ffd400;
  --line: rgba(243, 241, 236, 0.16);
  --on-brand: #08090a;

  --bg: #08090a;
  --card: #141617;
  --text: #f3f1ec;
  --text-muted: #a9a59f;
  --border: rgba(243, 241, 236, 0.14);
  --gold: #ffd400;
}

/* EL LOGO, ENCIMA DEL NOMBRE.
 *
 * Solo donde se presenta la aplicación: la tarjeta de acceso y la pantalla de
 * arranque de cada panel. En las pantallas de trabajo no pinta nada — ahí el
 * apicultor necesita sitio, no marca.
 *
 * Va como máscara y no como imagen, para que tome el color de la marca: negro
 * sobre claro y amarillo sobre oscuro, sin tener dos archivos. */
.tarjeta > h1::before,
#arranque h1::before {
  content: '';
  display: block;
  width: 78px;
  height: 40px;
  margin: 0 auto 14px;
  background-color: var(--brand, #08090a);
  -webkit-mask: url('/_marca/logo.svg') center / contain no-repeat;
  mask: url('/_marca/logo.svg') center / contain no-repeat;
}