/*
 * EL SISTEMA DE DISEÑO DE LA WEB. Calcado del de la app, no reinventado.
 *
 * ⭐ POR QUE ESTE ARCHIVO ES UNA COPIA Y NO UNA VERSION «WEB»
 * Es la misma app. Si aquí se eligieran otros colores, otros redondeos u otros
 * tamaños de letra, serían dos productos que se parecen, y quien use el móvil
 * en el gimnasio y el ordenador en casa notaría el salto. Cada número de este
 * archivo sale de `diseno/Tema.kt`, uno por uno.
 *
 * ⚠️ SI SE TOCA UN COLOR AQUI, SE TOCA ALLI. Y al reves. Son el mismo diseño
 * escrito dos veces porque las dos plataformas no comparten formato; no son
 * dos diseños.
 *
 * ⚠️ POR QUE ESTA PALETA — el porqué entero está en `Tema.kt`. En corto: la
 * primera versión era oscura con acento rojo y resultó ser la misma piel que
 * LEVEL. Esta es CLARA Y CALIDA: fondo crema (papel, no pantalla apagada),
 * verde profundo para lo que hay que tocar, terracota para lo conseguido. Y
 * el modo oscuro NO es negro azulado: es marrón muy oscuro, para que siga
 * siendo la misma app de noche.
 */

/* ─────────────────────────── Color ─────────────────────────── */

:root {
  /* Modo claro */
  --fondo:            #FBF7F0;  /* Crema. El fondo, papel bueno */
  --superficie:       #FFFDF8;  /* surfaceContainer: las tarjetas */
  --superficie-var:   #F3EDE1;  /* CremaHonda: huecos y avisos neutros */
  --superficie-alta:  #F3EDE1;
  --tinta:            #1A1614;  /* casi negro, pero cálido */
  --tinta-suave:      #6B6259;  /* gris cálido, no gris azulado */
  --verde:            #0F6B4F;  /* ACCION: lo que hay que tocar */
  --sobre-verde:      #FDFDFB;
  --verde-claro:      #D6EBE0;
  --sobre-verde-claro:#06301F;
  --terracota:        #C2410C;  /* LOGRO: lo que ya se consiguió */
  --terracota-suave:  #FBE3D5;
  --mostaza:          #9A6B0F;  /* aviso */
  --mostaza-suave:    #FAEFD4;
  --granate:          #9F1239;  /* derivación médica */
  --granate-suave:    #FCE4EC;
  --borde:            #E4DCCC;  /* outlineVariant */
  --contorno:         #C9BFAC;  /* outline */

  /* ─── Espacio: rejilla de 4. TODO margen sale de aquí ───
     ⚠️ Si algo necesita «18px porque queda mejor», está usando el escalón
     equivocado. Con seis se construye cualquier pantalla. */
  --xs: 4px;  --sm: 8px;  --md: 16px;  --lg: 24px;  --xl: 32px;  --xxl: 48px;
  --borde-pantalla: 20px;   /* el margen lateral. El mismo SIEMPRE */
  --toque-minimo: 56px;     /* por debajo, la gente falla el toque */

  /* Redondeos. Tres, no siete. */
  --r-chico: 12px;  --r-medio: 20px;  --r-grande: 28px;  --r-pastilla: 999px;

  /* ⚠️ El ancho de la columna en pantalla grande.
     La app es una columna de móvil y en el ordenador se queda columna: no se
     estira a 1900px porque entonces sería otra app. Se centra sobre el mismo
     fondo crema, como una hoja sobre la mesa. */
  --ancho: 560px;

  /* Lo que tapa el teclado ahora mismo. Lo mide `app.js`. */
  --teclado: 0px;
}

/* Modo oscuro — el MISMO carácter, no otra app.
   ⚠️ Sigue al sistema, igual que `isSystemInDarkTheme()` en la app. */
@media (prefers-color-scheme: dark) {
  :root {
    --fondo:            #16130F;  /* NocheCalida: marrón muy oscuro */
    --superficie:       #211C17;
    --superficie-var:   #211C17;
    --superficie-alta:  #2C251E;
    --tinta:            #F3EDE3;
    --tinta-suave:      #A89C8C;
    --verde:            #4FB98C;  /* el mismo verde, aclarado para que se lea */
    --sobre-verde:      #00281A;
    --verde-claro:      #0F6B4F;
    --sobre-verde-claro:#D6EBE0;
    --terracota:        #F08A5D;
    --terracota-suave:  #43200F;
    --mostaza:          #E0B95C;
    --mostaza-suave:    #3A2E12;
    --granate:          #FF9BB0;
    --granate-suave:    #43121F;
    --borde:            #3A322A;
    --contorno:         #544A3F;
  }
}

/* Y si la persona lo eligió a mano, manda ella sobre el sistema. */
:root[data-tema="claro"] {
  --fondo: #FBF7F0; --superficie: #FFFDF8; --superficie-var: #F3EDE1;
  --superficie-alta: #F3EDE1; --tinta: #1A1614; --tinta-suave: #6B6259;
  --verde: #0F6B4F; --sobre-verde: #FDFDFB; --verde-claro: #D6EBE0;
  --sobre-verde-claro: #06301F; --terracota: #C2410C; --terracota-suave: #FBE3D5;
  --mostaza: #9A6B0F; --mostaza-suave: #FAEFD4; --granate: #9F1239;
  --granate-suave: #FCE4EC; --borde: #E4DCCC; --contorno: #C9BFAC;
}
:root[data-tema="oscuro"] {
  --fondo: #16130F; --superficie: #211C17; --superficie-var: #211C17;
  --superficie-alta: #2C251E; --tinta: #F3EDE3; --tinta-suave: #A89C8C;
  --verde: #4FB98C; --sobre-verde: #00281A; --verde-claro: #0F6B4F;
  --sobre-verde-claro: #D6EBE0; --terracota: #F08A5D; --terracota-suave: #43200F;
  --mostaza: #E0B95C; --mostaza-suave: #3A2E12; --granate: #FF9BB0;
  --granate-suave: #43121F; --borde: #3A322A; --contorno: #544A3F;
}

/* ─────────────────────────── Base ─────────────────────────── */

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--fondo);
  color: var(--tinta);
  /* La app usa la tipografía del sistema. Aquí igual: la del teléfono en el
     teléfono y la del ordenador en el ordenador. Ninguna fuente que descargar
     es una pantalla que no parpadea al abrirse. */
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
               "Helvetica Neue", Arial, sans-serif;
  /* Cuerpo a 17px, no a 14: la app se lee de pie, con prisa entre serie y
     serie, y la tiene que poder leer un niño y alguien de 68 años. */
  font-size: 17px;
  line-height: 25px;
  -webkit-font-smoothing: antialiased;
  overscroll-behavior-y: none;
}

/* La columna. En el móvil ocupa todo; en el ordenador se centra. */
#app {
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--borde-pantalla);
  /* Respeta la muesca del iPhone y la barra de gestos. Sin esto, en un iPhone
     el contenido se mete debajo del notch. */
  padding-top: env(safe-area-inset-top);
  /* ⚠️ `--teclado` lo pone `app.js` midiendo lo que tapa el teclado. En un
     iPhone el teclado se dibuja encima de la pagina y no la encoge: sin este
     hueco, el cuadro de escribir del chat se quedaba debajo. */
  padding-bottom: calc(var(--xxl) + env(safe-area-inset-bottom) + var(--teclado, 0px));
  min-height: 100vh;
  min-height: 100dvh;
}

/* ─────────────────────────── Letra ───────────────────────────
   Cada uno de estos sale de la tipografía de `Tema.kt`, tamaño por tamaño. */

.display-l { font-size: 40px; line-height: 46px; font-weight: 700; letter-spacing: -0.5px; }
.display-m { font-size: 32px; line-height: 38px; font-weight: 700; letter-spacing: -0.3px; }
.headline  { font-size: 25px; line-height: 31px; font-weight: 700; }
.title-l   { font-size: 20px; line-height: 26px; font-weight: 600; }
.title-m   { font-size: 17px; line-height: 23px; font-weight: 600; }
.body-l    { font-size: 17px; line-height: 25px; }
.body-m    { font-size: 15px; line-height: 22px; }
.label-l   { font-size: 16px; line-height: 20px; font-weight: 600; letter-spacing: 0.2px; }
.label-m   { font-size: 13px; line-height: 17px; font-weight: 500; letter-spacing: 0.6px; }
/* El número enorme del peso, en la pantalla de entrenar. */
.cifra-grande { font-size: 46px; line-height: 50px; font-weight: 700; letter-spacing: -1px; }

.suave  { color: var(--tinta-suave); }
.acento { color: var(--verde); }
.logro  { color: var(--terracota); }
.mal    { color: var(--granate); }
h1, h2, h3, p { margin: 0; }

/* ─────────────────────── Piezas ─────────────────────── */

/* Título de pantalla. Grande, con aire encima y debajo. */
.cabecera { padding-top: var(--xl); padding-bottom: var(--lg); }
.cabecera .bajada { margin-top: var(--sm); color: var(--tinta-suave); }

/* La tarjeta: fondo de superficie, borde de 1px y redondeo medio. */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--r-medio);
  padding: var(--md);
  width: 100%;
}
.tarjeta + .tarjeta { margin-top: var(--sm); }
.pulsable { cursor: pointer; user-select: none; }
.pulsable:active { filter: brightness(0.97); }

/*
 * El botón de la acción principal. Alto, ancho y en forma de pastilla.
 * ⚠️ Mide el toque mínimo de alto y ocupa todo el ancho a propósito: en el
 * gimnasio se toca de pie, con prisa y a veces con las manos sudadas.
 */
.boton {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--toque-minimo);
  border: none; border-radius: var(--r-pastilla);
  background: var(--verde); color: var(--sobre-verde);
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  font-family: inherit; cursor: pointer;
  padding: 0 var(--md);
}
.boton:disabled { opacity: 0.38; cursor: default; }
.boton:active:not(:disabled) { filter: brightness(0.92); }

/* La acción de segunda fila: existe, pero no compite con la principal. */
.boton-suave {
  display: flex; align-items: center; justify-content: center;
  width: 100%; min-height: var(--toque-minimo);
  border: 1px solid var(--contorno); border-radius: var(--r-pastilla);
  background: transparent; color: var(--verde);
  font-size: 16px; font-weight: 600; letter-spacing: 0.2px;
  font-family: inherit; cursor: pointer; padding: 0 var(--md);
}
.boton-suave:active { background: var(--superficie-var); }

/* Campos */
.campo { width: 100%; }
.campo label {
  display: block; font-size: 13px; line-height: 17px; font-weight: 500;
  letter-spacing: 0.6px; color: var(--tinta-suave); margin-bottom: var(--xs);
}
.campo input, .campo textarea, .campo select {
  width: 100%; min-height: var(--toque-minimo);
  padding: 0 var(--md);
  background: var(--superficie); color: var(--tinta);
  border: 1px solid var(--contorno); border-radius: var(--r-chico);
  font-family: inherit; font-size: 17px; line-height: 25px;
}
.campo textarea { padding: var(--md); min-height: 96px; resize: vertical; }
.campo input:focus, .campo textarea:focus, .campo select:focus {
  outline: 2px solid var(--verde); outline-offset: -2px;
}
.campo .ayuda { margin-top: var(--xs); padding-left: var(--md);
                font-size: 13px; line-height: 17px; color: var(--tinta-suave); }
.campo .error { color: var(--granate); }

/*
 * Una opción que se elige tocándola.
 * ⭐ Es una tarjeta grande, no un círculo diminuto. Elegir «tres días a la
 * semana» tiene que ser un gesto cómodo, no puntería.
 */
.opcion {
  display: flex; align-items: center; gap: var(--md);
  width: 100%; min-height: 64px;
  padding: var(--md);
  background: var(--superficie-var);
  border: 1px solid var(--borde); border-radius: var(--r-medio);
  color: var(--tinta); font-family: inherit; font-size: 17px;
  text-align: left; cursor: pointer;
}
.opcion.elegida {
  background: var(--verde-claro); border: 2px solid var(--verde);
  color: var(--sobre-verde-claro);
}
.opcion + .opcion { margin-top: var(--sm); }
.opcion .detalle { font-size: 15px; line-height: 22px; color: var(--tinta-suave); }
.opcion.elegida .detalle { color: var(--sobre-verde-claro); opacity: 0.8; }

/* Avisos: cuatro tonos, cada uno con su significado. */
.aviso {
  display: flex; gap: var(--sm);
  padding: var(--md); border-radius: var(--r-chico);
  background: var(--superficie-var); color: var(--tinta-suave);
  font-size: 15px; line-height: 22px;
  white-space: pre-line;   /* los \n de los textos, como en la app */
}
.aviso .icono { font-size: 20px; line-height: 26px; flex: none; }
.aviso.logro   { background: var(--terracota-suave); color: var(--tinta); }
.aviso.cuidado { background: var(--mostaza-suave);   color: var(--tinta); }
.aviso.medico  { background: var(--granate-suave);   color: var(--tinta); }
.aviso .titulo { font-size: 17px; font-weight: 600; margin-bottom: var(--xs); }
.aviso.logro   .titulo { color: var(--terracota); }
.aviso.cuidado .titulo { color: var(--mostaza); }
.aviso.medico  .titulo { color: var(--granate); }

/* Etiqueta pequeña de una sola palabra. */
.etiqueta {
  display: inline-block;
  padding: var(--xs) calc(var(--sm) + var(--xs));
  border-radius: var(--r-pastilla);
  background: var(--superficie-var); color: var(--tinta-suave);
  font-size: 13px; line-height: 17px; font-weight: 500; letter-spacing: 0.6px;
  text-transform: uppercase;
}

.cifra { text-align: center; }
.cifra .unidad { font-size: 13px; line-height: 17px; font-weight: 500;
                 letter-spacing: 0.6px; color: var(--tinta-suave); }

.raya { height: 1px; background: var(--borde); border: none; margin: 0; }

/*
 * ●●●○○ — la constancia de la semana.
 * ⭐ NO es una racha. Los círculos vacíos no son fallos: son lo que queda. Si
 * la semana acaba a medias, la siguiente empieza limpia.
 */
.puntos-semana { display: flex; gap: var(--sm); align-items: center; }
.punto { width: 12px; height: 12px; border-radius: 50%;
         background: var(--superficie-alta); border: 1px solid var(--borde); }
.punto.hecho { background: var(--verde); border-color: var(--verde); }

/*
 * Lo que dice el entrenador.
 * ⭐ SE VE DISTINTO DE TODO LO DEMAS A PROPOSITO. El resto de los textos los
 * escribimos nosotros y son iguales para todo el mundo; esto se lo acaba de
 * escribir su entrenador, a ella. Si se pintara como un aviso más, se leería
 * como una frase de plantilla.
 */
.dice-entrenador {
  border-left: 3px solid var(--verde);
  padding: var(--sm) 0 var(--sm) var(--md);
  font-size: 17px; line-height: 25px; white-space: pre-line;
}

/* Cargando */
.cargando { display: flex; flex-direction: column; align-items: center;
            gap: var(--md); padding: var(--xxl) 0; color: var(--tinta-suave); }
.rueda {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--superficie-alta); border-top-color: var(--verde);
  animation: gira 0.9s linear infinite;
}
@keyframes gira { to { transform: rotate(360deg); } }
/* Quien pidió menos movimiento en su sistema, no ve la rueda girar. */
@media (prefers-reduced-motion: reduce) { .rueda { animation: none; } }

/*
 * La columna de la derecha de una fila: el peso, la marca, el cambio.
 *
 * ⚠️ CON TOPE DE ANCHO, Y SE VIO PROBANDO. «Peso muerto convencional» con
 * «te lo sube tu entrenador» debajo empujaba la columna del nombre hasta
 * partirlo en tres líneas: el nombre del ejercicio, que es lo primero que se
 * lee, quedaba peor que la nota de al lado. La cifra nunca se parte; la
 * etiqueta de debajo sí puede.
 */
.a-la-derecha { flex: 0 1 auto; max-width: 46%; text-align: right; }
/* La cifra del peso del dia: nunca se parte y nunca empuja al nombre. */
.peso-del-dia { flex: none; white-space: nowrap; }
.a-la-derecha .title-m, .a-la-derecha .title-l { white-space: nowrap; }

/*
 * El distintivo de quién te entrena. Es la pieza `Distintivo` de la APK: una
 * fila con fondo, y con borde verde cuando lo que dice es «esto es tuyo».
 */
.distintivo {
  display: flex; align-items: center; gap: var(--md);
  padding: var(--sm) var(--md);
  border-radius: var(--r-medio);
  background: var(--superficie);
  color: var(--tinta-suave);
}
.distintivo.destacado {
  background: var(--verde-claro); color: var(--sobre-verde-claro);
  border: 1px solid var(--verde);
}
.distintivo .title-m { font-size: 15px; }
.distintivo .body-m { font-size: 13px; line-height: 17px; }

/*
 * El bloque grande de color: «HOY, DOMINGO / Empuje» y «PARA EMPEZAR».
 * ⚠️ Va en verde y con la letra encima, como en la APK: es lo único de la
 * pantalla que grita, y por eso solo puede haber uno.
 */
.bloque-fuerte {
  background: var(--verde); color: var(--sobre-verde);
  border-radius: var(--r-grande); padding: var(--lg);
}
.bloque-fuerte .sobre-verde-suave { color: var(--sobre-verde); opacity: 0.85; }

/* El mismo bloque, en tono callado: lo que se te pasó. */
.bloque-suave {
  background: var(--superficie-var); color: var(--tinta);
  border-radius: var(--r-grande); padding: var(--lg);
}

/* Filas y columnas, para no repetir flex por todos lados */
.fila { display: flex; align-items: center; gap: var(--md); }
.fila.sm { gap: var(--sm); }
.crece { flex: 1; min-width: 0; }
.entre { justify-content: space-between; }
.centro { justify-content: center; }
.h-xs { height: var(--xs); } .h-sm { height: var(--sm); }
.h-md { height: var(--md); } .h-lg { height: var(--lg); }
.h-xl { height: var(--xl); } .h-xxl { height: var(--xxl); }

/* ─────────────────── Cabecera de la app ─────────────────── */
.cabecera-app { display: flex; align-items: center; gap: var(--sm);
                padding-top: var(--lg); }
.icono-redondo {
  width: 44px; height: 44px; flex: none;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--superficie-var);
  border: 1px solid var(--borde);
  font-size: 20px; cursor: pointer; color: var(--tinta);
}

/* El menú: una hoja que sube desde abajo, como en la app. */
.velo {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45);
  display: flex; align-items: flex-end; justify-content: center;
  z-index: 50;
}
.hoja {
  width: 100%; max-width: var(--ancho);
  max-height: 86vh; overflow-y: auto;
  background: var(--fondo);
  border-radius: var(--r-grande) var(--r-grande) 0 0;
  padding: var(--md) var(--borde-pantalla)
           calc(var(--xl) + env(safe-area-inset-bottom));
  animation: sube 0.18s ease-out;
}
@keyframes sube { from { transform: translateY(24px); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) { .hoja { animation: none; } }
.agarre { width: 40px; height: 4px; border-radius: 2px;
          background: var(--contorno); margin: 0 auto var(--md); }
.destino { display: flex; align-items: center; gap: var(--md);
           padding: var(--md) 0; cursor: pointer; }
.destino .emoji { font-size: 25px; flex: none; width: 32px; text-align: center; }

/* En pantalla ancha la hoja se centra en vez de pegarse abajo: en un
   ordenador una hoja pegada al borde inferior queda lejísimos del ratón. */
@media (min-width: 700px) and (min-height: 620px) {
  .velo { align-items: center; }
  .hoja { border-radius: var(--r-grande); max-height: 80vh; }
}

/* ─────────────────── El contador de la serie ─────────────────── */
/*
 * ⚠️ APILADOS EN EL MOVIL, Y SE VIO PROBANDO A 375 px. Uno al lado del otro
 * suman 392 px entre mandos y cifras, asi que el contador del peso se salia
 * de la pantalla por la derecha. Apilados caben, se tocan mas comodos con el
 * pulgar y la cifra puede ser igual de grande. En una pantalla ancha vuelven
 * a ir en fila, que es como estan en la app del telefono.
 */
.contadores { display: flex; flex-direction: column; gap: var(--md); width: 100%; }
.contadores .separador-v { display: none; }
@media (min-width: 480px) {
  .contadores { flex-direction: row; align-items: center;
                justify-content: space-evenly; }
  .contadores .separador-v { display: block; }
}

.contador { display: flex; flex-direction: column; align-items: center;
            gap: var(--sm); width: 100%; }
/* Los mandos a los lados y la cifra en medio, ocupando lo que sobre. */
.contador .mandos { display: flex; align-items: center; gap: var(--sm);
                    width: 100%; justify-content: space-between; }
@media (min-width: 480px) { .contador .mandos { justify-content: center; } }
.contador .mando {
  width: 52px; height: 52px; border-radius: 50%;
  border: 1px solid var(--contorno); background: var(--superficie);
  color: var(--tinta); font-size: 24px; line-height: 1; cursor: pointer;
}
.contador .mando:active { background: var(--superficie-var); }
.separador-v { width: 1px; height: 96px; background: var(--borde); }

/* La barra de lo que te queda del plan */
.barra { height: 6px; border-radius: 3px; background: var(--superficie-alta);
         overflow: hidden; }
.barra > i { display: block; height: 100%; background: var(--verde); }
.barra.poco > i { background: var(--granate); }

/* ─────────────────── Pedir un plan ─────────────────── */

/*
 * Los dias de la semana y los minutos: una rejilla de casillas iguales.
 * ⚠️ Van TODOS en una fila y del mismo ancho. Con `flex-wrap` los ultimos se
 * caian a una segunda linea y la semana dejaba de leerse como una semana.
 */
.rejilla-dias { display: flex; gap: var(--xs); }
.dia {
  flex: 1; min-width: 0; padding: var(--md) 0;
  border: 0; border-radius: var(--r-chico);
  background: var(--superficie-var); color: var(--tinta-suave);
  font-family: inherit; font-size: 17px; font-weight: 600; cursor: pointer;
}
.dia.puesto { background: var(--verde); color: var(--sobre-verde); }

/* El selector de fecha de la carrera. */
.fecha {
  width: 100%; border: 0; background: none; color: var(--tinta);
  font-family: inherit; font-size: 17px; line-height: 23px; font-weight: 600;
  padding: 0;
}

/* La fila de un ritmo: el nombre a la izquierda, el ritmo a la derecha. */
.fila-ritmo { padding: var(--xs) 0; }
/* El dia corto de una sesion de correr, en su columna fija. */
.dia-corto { flex: none; width: 30px; padding-top: 4px; }
.fila.arriba { align-items: flex-start; }

/* ─────────────────── Editar el plan ─────────────────── */

.fila-plan { padding: var(--xs) 0; border-radius: var(--r-chico); }

/*
 * Las flechas de subir y bajar.
 * ⚠️ La de arriba del todo y la de abajo del todo se APAGAN, no desaparecen:
 * si cambiaran de sitio en cada fila, moverse por la lista seria un tiro al
 * blanco.
 */
.flecha-plan {
  flex: none; width: 34px; height: 34px; border: 0; border-radius: 50%;
  background: none; color: var(--verde); font-size: 17px; cursor: pointer;
  font-family: inherit;
}
.flecha-plan.apagada { color: var(--borde); cursor: default; }

/* Los mandos de series y repeticiones. Nada de teclado. */
.redondo {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid var(--borde); background: var(--superficie-var);
  color: var(--tinta); font-family: inherit; font-size: 17px; cursor: pointer;
}
.redondo:disabled { opacity: 0.5; cursor: default; }
.centrado { text-align: center; }

/* Quitar un ejercicio: en el color de lo que no se deshace. */
.quitar {
  flex: none; border: 0; background: none; color: var(--granate);
  font-family: inherit; font-size: 16px; font-weight: 500;
  padding: var(--xs) var(--sm); border-radius: var(--r-pastilla);
  cursor: pointer;
}
.quitar:disabled { opacity: 0.5; cursor: default; }

/* ─────────────────── Entrenar ─────────────────── */

/*
 * El descanso: la tarjeta verde grande que lo tapa todo.
 * Mientras se descansa no se ensena nada mas. Antes esta pantalla lo
 * ensenaba todo a la vez y no se entendia en cual estabas.
 */
.descanso {
  border-radius: var(--r-grande); background: var(--verde);
  color: var(--sobre-verde); padding: var(--lg); text-align: center;
}
.descanso .label-m { opacity: 0.8; }
.descanso .cifra-grande { color: var(--sobre-verde); }
.descanso .body-l { opacity: 0.9; }

/* El redondel con la «?» que abre la guia sin salir de la sesion. */
.redondel-guia {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--superficie-var); color: var(--verde);
  font-size: 20px; font-weight: 600;
}

/*
 * La marca de HECHO junto al nombre.
 * ⚠️ Sin ella, al volver a un ejercicio ya terminado la pantalla se ve igual
 * que uno sin empezar y parece que hay que repetirlo.
 */
.sello-hecho {
  display: inline-flex; align-items: center; gap: var(--xs);
  padding: var(--xs) var(--sm); border-radius: var(--r-pastilla);
  background: var(--verde-claro); color: var(--sobre-verde-claro);
  font-size: 13px; line-height: 17px; font-weight: 600; letter-spacing: 0.6px;
}

/* Cada serie ya apuntada, con su visto. */
.serie-fila { padding: var(--xs) 0; }
.visto {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde); color: var(--sobre-verde);
  font-size: 15px; font-weight: 700;
}

/* Un boton de solo texto, para «Salir» y para los dialogos. */
.boton-texto {
  border: 0; background: none; color: var(--tinta-suave);
  font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 500;
  padding: var(--sm) var(--md); border-radius: var(--r-pastilla);
  cursor: pointer;
}
.boton-texto:active { background: var(--superficie-var); }

/* «Siguiente ejercicio»: se toca mucho, pero no es la accion principal. */
.boton-neutro {
  width: 100%; min-height: var(--toque-minimo);
  border: 0; border-radius: var(--r-pastilla);
  background: var(--superficie-alta); color: var(--tinta);
  font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 600;
  cursor: pointer;
}
.boton-neutro:active { background: var(--superficie-var); }

.al-final { justify-content: flex-end; }
.envuelve { flex-wrap: wrap; row-gap: var(--sm); }

/*
 * Un dialogo, como el `AlertDialog` de la app.
 * ⚠️ NO se usa `confirm()` del navegador: sale con la tipografia y los
 * colores del sistema, dice «localhost dice:» y rompe de golpe la ilusion de
 * que esto es una app.
 */
/* Un dialogo se centra siempre; el menu es el que sube desde abajo. */
.velo.centrado { align-items: center; }
.dialogo {
  width: 100%; max-width: 400px; margin: var(--md);
  background: var(--fondo); border-radius: var(--r-medio);
  padding: var(--lg);
}

/* Tabla de las series ya hechas */
.serie-hecha {
  display: inline-block; padding: var(--xs) var(--sm);
  border-radius: var(--r-pastilla); background: var(--verde-claro);
  color: var(--sobre-verde-claro); font-size: 13px; font-weight: 600;
  margin: 0 var(--xs) var(--xs) 0;
}

/* Quien habla, encima de su globo. Solo en los del entrenador. */
.quien-habla {
  font-size: 13px; line-height: 17px; font-weight: 600;
  color: var(--verde); margin-bottom: var(--xs);
}

/* Los saltos que van escritos dentro del texto se pintan. */
.con-saltos { white-space: pre-line; }

/* La bienvenida: el simbolo grande y los botones abajo del todo. */
.bienvenida { display: flex; flex-direction: column; min-height: 82vh; }
.marca-redonda {
  width: 76px; height: 76px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde); font-size: 32px;
}
/* Lo que empuja los botones al pie, como el `weight(1f)` de la app. */
.empuja { flex: 1; min-height: var(--xl); }

/* El aviso de arriba del todo cuando el entrenador escribe */
.aviso-flotante {
  position: fixed; left: 50%; transform: translateX(-50%);
  top: calc(env(safe-area-inset-top) + 8px);
  width: calc(100% - 2 * var(--borde-pantalla)); max-width: var(--ancho);
  z-index: 60;
  background: var(--superficie); border: 1px solid var(--borde);
  border-radius: var(--r-medio); padding: var(--md);
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  cursor: pointer;
}

/* El chat */
.burbuja { max-width: 86%; padding: var(--sm) var(--md);
           border-radius: var(--r-medio); margin-bottom: var(--sm);
           white-space: pre-line; font-size: 17px; line-height: 25px; }
.burbuja.mia { margin-left: auto; background: var(--verde-claro);
               color: var(--sobre-verde-claro);
               border-bottom-right-radius: var(--xs); }
.burbuja.suya { background: var(--superficie); border: 1px solid var(--borde);
                border-bottom-left-radius: var(--xs); }
.escribir { display: flex; align-items: flex-end; gap: var(--sm);
            padding: var(--sm) 0; }

/*
 * ⭐ EL CLIP Y EL MICROFONO VAN DENTRO DEL CUADRO, como en WhatsApp.
 *
 * ⚠️ Y NO como botones grandes debajo. Se probó con un botón verde enorme de
 * «háblale» y el dueño lo rechazó: dos botones sueltos convierten un chat en
 * un formulario. Dentro del cuadro se entienden solos y no le quitan sitio a
 * lo que se está escribiendo.
 */
.cuadro-escribir {
  flex: 1; min-width: 0;
  display: flex; align-items: flex-end; gap: var(--xs);
  padding-right: var(--xs);
  border: 1px solid var(--contorno); border-radius: var(--r-medio);
  background: var(--superficie);
}
.cuadro-escribir textarea {
  flex: 1; min-width: 0;
  min-height: calc(var(--toque-minimo) - 2px); max-height: 140px;
  padding: var(--md); border: none; background: transparent;
  color: var(--tinta); font-family: inherit; font-size: 17px;
  line-height: 25px; resize: none; outline: none;
}
/* Los iconos de dentro: del tamaño de un dedo aunque se vean pequeños. */
.dentro-del-cuadro {
  flex: none; width: 44px; height: 52px;
  display: flex; align-items: center; justify-content: center;
  font-size: 22px; cursor: pointer; user-select: none;
  border-radius: var(--r-pastilla);
}
.dentro-del-cuadro:active { background: var(--superficie-var); }
/* Grabando: se ve de un vistazo que el micrófono está abierto. */
.dentro-del-cuadro.grabando {
  background: var(--granate-suave); animation: latido 1.2s ease-in-out infinite;
}
@keyframes latido { 50% { opacity: 0.55; } }
@media (prefers-reduced-motion: reduce) {
  .dentro-del-cuadro.grabando { animation: none; }
}
.punto-rojo { width: 10px; height: 10px; border-radius: 50%;
              background: var(--granate); flex: none;
              animation: latido 1.2s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) { .punto-rojo { animation: none; } }

/* ── Las fotos ── */

/* La foto dentro de una burbuja del chat. */
.foto-chat {
  display: block; width: 100%; max-width: 260px;
  border-radius: var(--r-chico); margin-bottom: var(--sm);
  cursor: zoom-in; background: var(--superficie-var);
}

/* Si no se puede traer, se DICE. Un cuadro gris hace pensar que se perdio. */
.foto-rota { padding: var(--md); border-radius: var(--r-chico);
             background: var(--superficie-var); margin-bottom: var(--sm); }

/* La que se acaba de elegir, antes de mandarla. */
.foto-elegida { position: relative; display: inline-block; }
.foto-elegida img {
  display: block; max-width: 160px; max-height: 160px;
  border-radius: var(--r-chico); border: 1px solid var(--borde);
}
.quitar-foto {
  position: absolute; top: -8px; right: -8px;
  width: 28px; height: 28px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--tinta); color: var(--fondo);
  font-size: 15px; cursor: pointer;
}
.foto-elegida .subiendo {
  position: absolute; inset: 0; display: flex;
  align-items: center; justify-content: center;
  background: rgba(0,0,0,0.35); border-radius: var(--r-chico);
}

/* Mirarla de cerca: a pantalla completa, y se cierra tocando. */
.velo.mirar-foto { align-items: center; padding: var(--md); cursor: zoom-out; }
.velo.mirar-foto img { max-width: 100%; max-height: 90vh;
                       border-radius: var(--r-chico); }

/*
 * El altavoz de cada respuesta.
 * ⚠️ NO se lee sola. Se probó leyendo cada respuesta al llegar y se quitó: una
 * app que empieza a hablar sin avisar se usa en silencio o no se usa.
 */
.altavoz {
  display: inline-flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; margin-top: var(--xs);
  border-radius: 50%; background: var(--superficie-var);
  font-size: 17px; cursor: pointer; user-select: none;
}
.altavoz:active { background: var(--superficie-alta); }
.enviar { width: var(--toque-minimo); height: var(--toque-minimo); flex: none;
          border: none; border-radius: 50%; background: var(--verde);
          color: var(--sobre-verde); font-size: 22px; cursor: pointer; }
.enviar:disabled { opacity: 0.38; }

/* Los pasos de una guia de ejercicio: el numero fijo y el texto al lado. */
/*
 * Los pasos de una guia de ejercicio.
 * El numero va en su propio circulo y no como «1.» pegado al texto: se lee de
 * pie, de un vistazo, para encontrar rapido por que paso ibas.
 */
.paso { display: flex; gap: calc(var(--sm) + var(--xs)); margin-bottom: calc(var(--sm) + var(--xs)); }
.paso-num {
  flex: none; width: 26px; height: 26px; border-radius: 50%; margin-top: 2px;
  display: flex; align-items: center; justify-content: center;
  background: var(--verde-claro); color: var(--sobre-verde-claro);
  font-size: 13px; line-height: 17px; font-weight: 600;
}

/* Puntos sueltos, sin orden entre ellos: que vigilar mientras se hace. */
.punto-guia { display: flex; gap: var(--md); margin-bottom: var(--sm); }
.bolita {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  margin-top: 9px; background: var(--verde);
}

/*
 * Un fallo y como se arregla.
 * El arreglo se ve MAS que el fallo, no al reves: saber que lo estas haciendo
 * mal no sirve de nada por si solo.
 */
.correccion {
  border-radius: var(--r-chico); background: var(--superficie-var);
  padding: var(--md);
}
.correccion .label-m { margin-bottom: var(--xs); }

/* ── La biblioteca ── */

/* Los musculos, en rejilla: son dieciseis y cada uno es una palabra. */
.rejilla-musculos {
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--sm);
}
.cuadro-musculo {
  display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: var(--md) var(--sm);
  border: 0; border-radius: var(--r-medio);
  background: var(--superficie); color: var(--tinta);
  font-family: inherit; text-align: center; cursor: pointer;
}
.cuadro-musculo:active { background: var(--superficie-var); }
@media (min-width: 480px) { .rejilla-musculos { grid-template-columns: repeat(3, 1fr); } }

/*
 * La tira de filtros por grupo.
 * ⚠️ Se desliza de lado y NO se parte en varias lineas: son doce y en dos
 * filas empujarian la lista media pantalla hacia abajo. La barra se esconde
 * porque en el movil no se ve y en el ordenador solo ensucia.
 */
.tira-filtros {
  display: flex; gap: var(--sm); overflow-x: auto;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
  /* Que las pastillas de los extremos no queden pegadas al borde al deslizar. */
  margin: 0 calc(var(--borde-pantalla) * -1); padding: 0 var(--borde-pantalla);
}
.tira-filtros::-webkit-scrollbar { display: none; }
.pastilla {
  flex: none; border: 0; border-radius: var(--r-pastilla);
  padding: calc(var(--sm) + var(--xs)) var(--md);
  background: var(--superficie-var); color: var(--tinta-suave);
  font-family: inherit; font-size: 16px; line-height: 20px; font-weight: 500;
  cursor: pointer; white-space: nowrap;
}
.pastilla.elegida { background: var(--verde); color: var(--sobre-verde); }

/*
 * Una tira de pastillas que SE PARTE en varias lineas.
 * ⚠️ No es la misma que `.tira-filtros`: aquella se desliza de lado porque es
 * una lista larga de grupos; esta son cuatro o cinco opciones de un formulario
 * y esconderlas fuera de la pantalla haria que nadie las viera.
 */
.tira-pastillas {
  display: flex; flex-wrap: wrap; gap: var(--xs);
}

/* Cada intento de un benchmark, con su fecha a la izquierda. */
.intento { padding-top: var(--xs); }

/* La nota de adelanto de la lista: una linea y punto. */
.una-linea {
  margin-top: var(--xs);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* La etiqueta de CrossFit, que va en verde para distinguir la escuela. */
.etiqueta.acento { color: var(--verde); }
/* Y la de «FALTA», en el color de lo que hay que arreglar. */
.etiqueta.mal { color: var(--granate); }

/* Un campo que se lee y se copia, pero no se cambia. */
input[readonly], textarea[readonly] { color: var(--tinta-suave); }

/* Lista con lineas, para historial y medidas */
.linea { display: flex; align-items: center; gap: var(--sm);
         padding: var(--xs) 0; }