/* /assets/theme.css — LA base visual de DetailersCore (estilo "Taller de noche").
   Una sola paleta y una sola tipografía para TODAS las páginas: panel,
   reservas, portal del cliente, sitio del negocio, landing y súper-admin.

   Antes cada HTML traía su propio :root copiado, y no coincidían entre sí
   (tres negros distintos, tres blancos distintos). Ahora ningún HTML define
   colores: todos cargan este archivo. Para cambiar un color del sistema, se
   cambia AQUÍ y solo aquí.

   Los nombres viejos de las variables se conservan a propósito para no
   tener que tocar miles de líneas, pero ojo con dos que engañan:
     --gold    = el COLOR DE MARCA (rojo). Es el único que cada negocio
                 cambia desde Apariencia (applyVar('--gold', …)).
     --accent  = ahora es el mismo color de marca. Antes era un gris, y
                 mezclarlo con --gold en un degradado daba botones rosados.
   Para código nuevo usa --brand, --brand-deep y --brand-tint: se calculan
   solos a partir de --gold, así que siguen al color de cada negocio. */

/* Tipografías alojadas en tu propio servidor (carpeta /assets/fonts): no
   dependen de Google, así que cargan igual aunque Google falle o esté
   bloqueado. Son Red Hat Display y Red Hat Text, de licencia libre (OFL). */
@font-face{font-family:'Red Hat Display';font-style:normal;font-display:swap;font-weight:300 900;
  src:url('/assets/fonts/red-hat-display-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Red Hat Display';font-style:normal;font-display:swap;font-weight:300 900;
  src:url('/assets/fonts/red-hat-display-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Red Hat Text';font-style:normal;font-display:swap;font-weight:300 700;
  src:url('/assets/fonts/red-hat-text-latin-ext-wght-normal.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:'Red Hat Text';font-style:normal;font-display:swap;font-weight:300 700;
  src:url('/assets/fonts/red-hat-text-latin-wght-normal.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* Superficies */
  --black:#09090A;      /* fondo de todas las pantallas */
  --surface:#0E0E10;    /* menú lateral, campos de formulario */
  --card:#141416;       /* tarjetas, tablas, ventanas */
  --border:#27272B;     /* bordes y separadores */

  /* Texto */
  --text:#F4F4F5;
  --dim:#A1A1AA;        /* texto secundario */
  --muted:#8E8E98;      /* etiquetas pequeñas */

  /* Marca — el negocio solo cambia --gold; lo demás se deriva */
  --gold:#E0242B;
  --gold-dk:#8C1017;
  --brand:var(--gold);
  /* Los derivados de abajo son el respaldo fijo (rojo del sistema) para navegadores viejos;
     en los actuales se recalculan del color de cada negocio en el bloque @supports del final. */
  --brand-deep:#8B161B;                  /* fin de los degradados */
  --brand-tint:rgba(224,36,43,.16);      /* fondo tenue de íconos y pastillas */
  --brand-glow:rgba(224,36,43,.55);      /* resplandor del botón principal */
  --on-brand:#FFFFFF;
  --brand-text:#E65055;                  /* el color de marca para TEXTO PEQUEÑO: un poco más claro para que se lea sobre fondo oscuro */
  --accent:var(--gold);
  --accent-dk:var(--brand-tint);
  --icon-bg:var(--brand-tint);
  --chrome:#8B9199;     /* el plateado del logo */

  /* Estados */
  --green:#4ADE80;  --green-dk:#12301F;   /* confirmado, activo, ingreso */
  --orange:#FBBF24; --orange-dk:#3A2C0A;  /* pendiente, en espera */
  --red:#F87171;    --red-dk:#3B1517;     /* error, gasto, cancelado (no es el rojo de marca) */

  /* Tipografía */
  --font-display:'Red Hat Display',system-ui,sans-serif; /* titulares, cifras, horas */
  --font-text:'Red Hat Text',system-ui,sans-serif;       /* todo lo demás */
}

/* Modo claro. El modo por defecto es el oscuro, que es la identidad del
   sistema. El claro se elige así:
   - Panel: Configuración → Apariencia → Modo de tema (vale para todo el negocio).
   - Reservas y portal del cliente: cada visitante con el botón de sol/luna. */
[data-theme="light"]{
  --black:#F4F4F5;
  --surface:#FFFFFF;
  --card:#FFFFFF;
  --border:#E4E4E7;
  --text:#18181B;
  --dim:#52525B;
  --muted:#6B6B73;
  --gold:#D81F26;
  --gold-dk:#8C1017;
  --brand-tint:rgba(216,31,38,.10);
  --brand-text:#BE1B21;                  /* en claro, un poco más oscuro */
  --green:#15803D;  --green-dk:#DCFCE7;
  --orange:#B45309; --orange-dk:#FEF3C7;
  --red:#B91C1C;    --red-dk:#FEE2E2;
}

/* Navegadores actuales (casi todos): los tonos derivados siguen el color de
   marca de cada negocio. Un navegador viejo (iPhone con iOS 15 o anterior)
   no entiende color-mix y se queda con los valores fijos de arriba, en vez de
   quedarse sin color (botones transparentes). */
@supports (color: color-mix(in srgb, red 50%, blue)) {
  :root{
    --brand-deep:color-mix(in srgb, var(--gold) 62%, #000);
    --brand-tint:color-mix(in srgb, var(--gold) 16%, transparent);
    --brand-glow:color-mix(in srgb, var(--gold) 55%, transparent);
    --brand-text:color-mix(in srgb, var(--gold) 80%, #fff);
  }
  [data-theme="light"]{
    --brand-tint:color-mix(in srgb, var(--gold) 10%, transparent);
    --brand-text:color-mix(in srgb, var(--gold) 88%, #000);
  }
}