/* =============================================================================
   marca.css — IDENTIDAD DE MARCA: +20HP Mecánica (paleta y tipografías).

   Todo sale del logo (img/logo.webp): negro carbón (~55% de la imagen), naranja
   de llama, plateados/grises del metal y blanco de las letras.

   Todo el sitio (home, reservar/ y admin/) usa el tema OSCURO, como el logo: fondo
   negro, texto blanco y el secundario en un blanco apagado. Se activa con
   <html data-bs-theme="dark">, que además oscurece los componentes de Bootstrap
   (tablas, formularios, modales). Los valores de :root son el tema claro de
   respaldo (una página sin data-bs-theme); hoy ninguna lo usa.

   Contraste verificado (WCAG AA): texto >= 4.5:1 y bordes de campos >= 3:1 en
   ambos temas; texto negro sobre el naranja de los botones = 7.1:1. Por eso el
   naranja NUNCA lleva texto blanco encima.
   ============================================================================= */

:root {
    /* --- Colores de marca (los que salen del logo) --- */
    --color-primario:      #0c0c0c;   /* negro del logo: barra del admin, fondo público */
    --color-secundario:    #b4b4b4;   /* plateado del metal */
    --color-acento:        #f07c1b;   /* naranja de llama: llamados a la acción */
    --color-acento-hover:  #ff9440;
    --color-acento-texto:  #b34e00;   /* naranja oscuro: legible como TEXTO sobre fondos claros */
    --color-sobre-acento:  #0c0c0c;   /* texto sobre el naranja */

    /* --- Tema claro (admin): neutro/utilitario --- */
    --color-fondo:         #f3f4f6;
    --color-superficie:    #ffffff;   /* tarjetas, paneles */
    --color-texto:         #1a1a1a;
    --color-texto-suave:   #5b6068;
    --color-borde:         #dcdfe4;
    --color-borde-campo:   #8a8f98;   /* bordes de inputs: 3:1 mínimo */

    /* --- Estados de turno (texto/fondo con contraste AA) --- */
    --color-ok:            #146c43;
    --color-alerta:        #b02a37;

    /* --- Tipografías --- */
    --fuente-texto:        'Barlow', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
    --fuente-titulos:      'Barlow Condensed', 'Arial Narrow', 'Roboto Condensed', system-ui, sans-serif;

    /* --- Forma --- */
    --radio:               .75rem;
    --radio-chico:         .5rem;
    --sombra:              0 .25rem 1rem rgba(0, 0, 0, .08);
    --alto-tactil:         2.75rem;   /* 44 px: objetivo táctil mínimo */

    /* --- Bootstrap 5.3: se alinean sus variables con la marca --- */
    --bs-body-font-family: var(--fuente-texto);
    --bs-body-bg:          var(--color-fondo);
    --bs-body-color:       var(--color-texto);
    --bs-secondary-color:  var(--color-texto-suave);
    --bs-border-color:     var(--color-borde);
    --bs-link-color:       var(--color-acento-texto);
    --bs-link-hover-color: var(--color-acento-texto);
    --bs-focus-ring-color: rgba(240, 124, 27, .35);
}

/* Tema oscuro (parte pública). Redefine SOLO los neutros y el naranja-texto. */
[data-bs-theme="dark"] {
    --color-fondo:         #0c0c0c;
    --color-superficie:    #161616;
    --color-texto:         #f5f5f5;
    --color-texto-suave:   #c4c4c4;   /* secundario: blanco apagado, 11:1 sobre la superficie */
    --color-borde:         #333333;
    --color-borde-campo:   #6b6b6b;
    --color-acento-texto:  #f07c1b;   /* sobre negro el naranja de llama sí se lee: 7:1 */
    --color-ok:            #4ade80;
    --color-alerta:        #ff6b6b;

    --bs-body-bg:          var(--color-fondo);
    --bs-body-color:       var(--color-texto);
    --bs-secondary-color:  var(--color-texto-suave);
    --bs-border-color:     var(--color-borde);
    --bs-link-color:       var(--color-acento);
    --bs-link-hover-color: var(--color-acento-hover);
    --bs-emphasis-color:   #ffffff;
    --bs-secondary-rgb:    196, 196, 196;   /* .text-secondary / .bg-secondary legibles sobre negro */
    --bs-tertiary-bg:      #1f1f1f;
    --sombra:              0 .25rem 1rem rgba(0, 0, 0, .5);
}