/* ==========================================================================
   BASE.CSS — la piel: colores, tipografía, botones, campos, tablas
   REPINTADO PARA SUPLEMENTOS DZ (verde #7ed321 sobre negro #1a1a1a).
   --------------------------------------------------------------------------
   ⚠ ESTE ARCHIVO PISA ESTILOS DE TU PÁGINA.

   Cinco de estas reglas no llevan clase y se aplican a TODO el documento:

       *                          (el box-sizing)
       html, body                 (fondo, color y tipografía de la página)
       input, select, textarea, button
       h1, h2, h3, h4

   Si lo metes en una página que ya tiene su propio diseño, tienes tres
   caminos, de más fácil a más limpio:

     1. Cargarlo igual y aceptar que la página tome el negro y el dorado. Es
        lo que hace demo.html.
     2. Cargar solo el bloque `:root` y escribir tú los botones y los campos
        con tu propio estilo.
     3. Meter el módulo en un <iframe>. Suena tosco, pero es lo único que
        aísla de verdad, y para una sección tan grande no está mal.

   Lo que NO puedes quitar es el bloque `:root`: todo el módulo pinta con esas
   variables, y sin ellas sale en blanco y negro y con la letra del navegador.
   Cámbiales el valor y cambia el color de todo — para eso están.

   Las tipografías (Anton para títulos y números, Instrument Sans para el
   texto, Bayon solo para el logotipo) se cargan en el <head> del HTML.
   ========================================================================== */

/* ==========================================================================
   PLAN ENTRENAMIENTO DZ — Hoja de estilos
   Sistema visual de la tienda (DESIGN.md, "The Fight Poster"): Rojo DZ
   #d9ae62, Negro Ring en las franjas oscuras, títulos en Anton, texto en
   Instrument Sans, tarjetas de radio 20 px y botones tipo píldora.
   Tema claro por defecto; tema oscuro con [data-tema="oscuro"] en <html>.
   ========================================================================== */

:root{
  /* ---- marca SUPLEMENTOS DZ ----
     El acento es el rojo de la tienda (#d9ae62, el mismo --acento de
     styles.css y dz-tema.css), ahora sobre blanco. Antes este tema era rojo
     sobre negro; se pasó a claro para que haga pareja con el rosado, que
     también es claro: son los dos temas de la casa y chocaba que uno fuera
     de noche y el otro de día.

     El fondo no es blanco puro sino #fdf7f8, un blanco con una gota de rojo.
     Es a propósito: con el fondo y las tarjetas los dos en #ffffff, las
     tarjetas desaparecen y no se distingue dónde empieza cada bloque.

     Las variables se siguen llamando "azul" porque las usan los 10 archivos
     del módulo; cambiarles el nombre no cambiaría nada en pantalla. */
  --azul:#d9ae62;
  --azul-osc:#b8903f;
  --azul-suave:rgba(217,174,98,.12);
  /* Las franjas oscuras (modo entrenamiento, temporizador, diálogos, visor)
     son Negro Ring, el negro de la tienda: antes eran vino tinto. */
  --carbon:#0a0a0a;
  --carbon2:#1a1a1a;

  /* ---- el piso: los mismos grises neutros de la tienda (DESIGN.md) ----
     Antes eran blancos con una gota de rojo (#fdf7f8) y el conjunto se leía
     rosado. Las tarjetas siguen distinguiéndose: #f5f5f5 de fondo, blanco
     en las tarjetas. */
  --fondo:#f5f5f5;
  --superficie:#ffffff;
  --superficie2:#f6f6f6;
  --superficie3:#ececec;
  --borde:#ececec;
  --borde2:#dcdcdc;
  --texto:#111111;
  --texto2:#5c5c5c;
  --texto3:#6b6b6b;
  --sombra:0 2px 10px rgba(0,0,0,.06);
  --sombra-alta:0 12px 34px rgba(0,0,0,.14);

  /* alias por compatibilidad con estilos en línea */
  --acento:var(--azul);
  --info:#2563eb;
  /* color de texto/iconos que van encima del color de acento */
  --sobre-acento:#ffffff;

  /* Estados con color propio, nunca el rojo de la marca: una serie hecha en
     rojo se leía como un error (regla "Status Is Not Brand" de DESIGN.md).
     Tonos oscuros a propósito, para que sirvan también como texto (≥4.5:1). */
  --ok:#15803d;
  --aviso:#b45309;
  --peligro:#e11d48;

  --r:20px;
  --r-s:12px;
  --pill:999px;
  --nav-alto:66px;

  /* Las letras de la tienda (DESIGN.md): Anton para títulos y números,
     Instrument Sans para todo lo demás, Bayon solo para "SUPLEMENTOS DZ".
     Antes era Oswald + Segoe UI, que en iPhone y Mac terminaba en Verdana. */
  --titulo:'Anton','Impact','Arial Narrow',sans-serif;
  --cuerpo:'Instrument Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --marca:'Bayon','Anton','Impact',sans-serif;
}
/* El <html> de rutinas.html lleva data-tema="oscuro" fijo, de cuando este
   tema era negro. Este bloque repetía aquí los valores oscuros y pisaba a
   :root, así que es el que de verdad mandaba. Ahora repite los claros.

   No se borra ni se le quita el atributo al <html>: más abajo hay diez reglas
   colgadas de [data-tema="oscuro"] que ajustan el contraste de campos y
   cabeceras, y todas pintan con estas mismas variables. Quitando el atributo
   se caerían las diez de golpe. */
html[data-tema="oscuro"]:not([data-tema-dz]),
html[data-tema="oscuro"][data-tema-dz="rojo"]{
  --fondo:#f5f5f5;
  --superficie:#ffffff;
  --superficie2:#f6f6f6;
  --superficie3:#ececec;
  --borde:#ececec;
  --borde2:#dcdcdc;
  --texto:#111111;
  --texto2:#5c5c5c;
  --texto3:#6b6b6b;
  --pad-lat:16px;
  --sombra:0 2px 10px rgba(0,0,0,.06);
  --sombra-alta:0 12px 34px rgba(0,0,0,.14);
}

/* El tema rosado ya trae su propio fondo de cuerpo; el rojo ahora también lo
   necesita, porque dejó de ser oscuro y el body sigue pintado por el bloque
   general de más abajo. */
html[data-tema="oscuro"]:not([data-tema-dz]) body,
html[data-tema="oscuro"][data-tema-dz="rojo"] body{
  background:var(--fondo); color:var(--texto);
}

/* ==========================================================================
   LOS TEMAS
   --------------------------------------------------------------------------
   Se cambian poniendo data-tema-dz en el <html>. El de la marca es el que
   está arriba, en :root, y es el que se ve si no se elige ninguno.

   Una decisión de diseño que conviene entender: las franjas "carbón" —la
   pantalla de entrenamiento, el temporizador, la cabecera de los diálogos y
   el visor de fotos a pantalla completa— se quedan OSCURAS en todos los
   temas, teñidas del color de cada uno. Dos razones:

     1. En el gimnasio se entrena con el teléfono en la mano, muchas veces
        con luz fuerte encima. Una pantalla blanca a pantalla completa
        encandila y una foto se ve mejor sobre negro.
     2. Todo el texto blanco del módulo vive sobre esas franjas. Si se
        aclararan, habría que revisar 70 colores uno por uno para que no
        quedara texto invisible.

   Para hacer un tema nuevo se copia uno de estos bloques y se le cambian los
   valores. No hay que tocar nada más.
   ========================================================================== */

/* El tema rosado se retiró (octubre 2026): DZ tiene un solo rojo. Las cuentas
   que lo tenían guardado caen solas en el de la marca (ver rutinas.html). */

*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;max-width:100%}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  /* Nada puede empujar la página de lado. Se usa `clip` y no `hidden` a
     propósito: `hidden` convertiría la página en un contenedor de scroll y la
     cabecera dejaría de quedarse pegada arriba. `clip` corta sin eso. */
  overflow-x:clip;
}
body{
  background:var(--fondo);
  color:var(--texto);
  font:15px/1.6 var(--cuerpo);
  -webkit-font-smoothing:antialiased;
  padding-bottom:calc(var(--nav-alto) + env(safe-area-inset-bottom));
  overscroll-behavior-y:contain;
}
input,select,textarea,button{font-family:var(--cuerpo);color:inherit}
h1,h2,h3,h4,.titular{
  font-family:var(--titulo);font-weight:400;text-transform:uppercase;
  letter-spacing:.4px;line-height:1.12;
}
/* Anton viene en un solo grosor: los font-weight 500-700 que traía Oswald
   harían una negrita falsa y borrosa. Instrument Sans sí trae sus grosores. */
html{font-synthesis-weight:none}
/* Faltaba [type=password]: por eso los campos de contraseña salían con el
   cuadro blanco del navegador en vez del estilo de la app. */
input[type=text],input[type=number],input[type=date],input[type=url],
input[type=password],input[type=email],input[type=tel],input[type=search],
select,textarea{
  width:100%;background:var(--superficie2);border:1.5px solid var(--borde);
  border-radius:var(--r-s);padding:11px 13px;outline:none;transition:.15s;min-height:46px;
  font-size:16px;
}
input:focus,select:focus,textarea:focus{border-color:var(--azul);background:var(--superficie);box-shadow:0 0 0 3px var(--azul-suave)}
textarea{resize:vertical;min-height:80px}
html[data-tema="oscuro"] .etq[class*="g-"]{
  background:var(--superficie3);border-color:var(--borde2);
}
/* Los grupos musculares iban cada uno de un color; ahora todos en dorado. */

/* Ajustes de contraste cuando el carbón coincide con la superficie.

   Estas reglas aclaran el fondo de cuatro componentes que en rutinas.css van
   sobre carbón y llevan el texto en blanco fijo. Al aclarar solo el fondo, el
   texto se quedaba blanco sobre blanco: el peso de trabajo, el título de los
   diálogos, los avisos y la cabecera de cada bloque eran ilegibles. Pasaba en
   los dos temas —el rosado lo arrastraba desde que se publicó—, así que el
   color se fija aquí, junto al fondo que lo provoca, y se corrige para ambos
   de una vez. */
html[data-tema="oscuro"] .total-peso{background:var(--superficie2);border:1px solid var(--borde);color:var(--texto)}
html[data-tema="oscuro"] .total-peso input{background:var(--superficie3);border-color:var(--borde2);color:var(--texto)}
html[data-tema="oscuro"] .bloque-cab{background:var(--superficie2);border-bottom:1px solid var(--borde);color:var(--texto)}
html[data-tema="oscuro"] .dato{background:var(--superficie3);border-color:var(--borde2);color:var(--texto2)}
html[data-tema="oscuro"] .modal-cab{background:var(--superficie2);border-bottom:1px solid var(--borde)}
html[data-tema="oscuro"] .modal-cab h3{color:var(--texto)}
html[data-tema="oscuro"] .aviso{background:var(--superficie3);color:var(--texto)}
body.con-acceso{overflow:hidden}
/* Lo que la clienta no debe ver ni poder tocar */
body.rol-cliente .solo-entrenador{display:none!important}
body.rol-cliente .dia.vacio{cursor:default}
body.rol-cliente .dia.vacio:hover{background:var(--superficie)}
/* ==========================================================================
   MODO ENTRENAMIENTO — un bloque a la vez, pensado para usar de pie
   ========================================================================== */

body.entrenando{overflow:hidden}
/* El temporizador de descanso se sube para no chocar con la barra de abajo */
body.entrenando .temporizador{bottom:88px;z-index:130}
body.entrenando .nav{display:none}
body.imprimiendo > .cabecera,
body.imprimiendo > .contenido,
body.imprimiendo > .nav,
body.imprimiendo > .ticker,
body.imprimiendo > .modal,
body.imprimiendo > #avisos,
body.imprimiendo > #aviso-conexion,
body.imprimiendo > .temporizador{display:none!important}
body.imprimiendo > #hoja-impresion{
  display:block;position:fixed;inset:0;z-index:9999;overflow:auto;
  background:#fff;color:#111;
}
@media print{

body.imprimiendo{background:#fff;padding:0;margin:0}

body.imprimiendo > #hoja-impresion{position:static;z-index:auto}
}
body.con-visor{overflow:hidden}