/* Maluenda Solar — hoja de estilos «mobile first».
 *
 * Primero el móvil, que es donde se usa; las pantallas grandes solo reciben
 * ajustes al final. Pensada para leerse a partir de los 60:
 *  - Los tamaños van en rem: si alguien sube la letra en su teléfono,
 *    la web crece con ella (en iPhone también con el «Tamaño del texto»).
 *  - Botones y enlaces de al menos 48 px de alto.
 *  - Cabecera arriba y pie abajo siempre a la vista, respetando la muesca
 *    y la barra de inicio del iPhone.
 */

:root {
  --fondo: #fbfaf7;
  --tarjeta: #ffffff;
  --texto: #1c1a17;
  --suave: #5b5650;
  --borde: #ddd6cc;
  --sol: #f7a600;
  --sobre-sol: #1c1a17;
  --verde: #1f7a37;
  --rojo: #b3261e;
  --naranja: #b3691e;
  --resalte: #fff3d6;
  --pie: #1c1a17;
  --sobre-pie: #fff8e1;
  --alto-pie: 3.75rem;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #14130f;
    --tarjeta: #201e1a;
    --texto: #f5f1ea;
    --suave: #b5ada1;
    --borde: #3a3630;
    --verde: #5fcc7f;
    --rojo: #ff8a80;
    --naranja: #f0a35e;
    --resalte: #3a3222;
    --pie: #000000;
  }
}

/* ── Base ─────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  font-size: 100%;                 /* el tamaño que haya elegido cada persona */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* En iPhone, seguir el «Tamaño del texto» de Ajustes → Pantalla y brillo */
@supports (font: -apple-system-body) {
  html { font: -apple-system-body; }
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--fondo);
  color: var(--texto);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 1.25rem;
  line-height: 1.55;
}

a, button, summary, label { touch-action: manipulation; }

:focus-visible {
  outline: 3px solid var(--sol);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

h1 { font-size: 1.75rem; line-height: 1.25; margin: 0.75rem 0 1rem; }
h2 { font-size: 1.375rem; line-height: 1.3; margin: 0 0 0.5rem; }

/* Para lectores de pantalla: está en la página pero no se ve */
.visualmente-oculto {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ── Cabecera fija arriba ─────────────────────────────────────────────────── */
.cabecera {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.5rem 1rem;
  padding-top: max(0.5rem, env(safe-area-inset-top));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  background: var(--sol);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.cabecera a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  color: var(--sobre-sol);
  text-decoration: none;
}

.marca {
  min-width: 0;
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.marca .marca-texto { margin-left: 0.375rem; }
/* Con la letra muy grande no cabe el nombre: queda solo el sol (navegacion.js) */
.marca-corta .marca-texto {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}

.inicio {
  flex-shrink: 0;
  padding: 0 0.875rem;
  border: 2px solid var(--sobre-sol);
  border-radius: 0.75rem;
  font-size: 1.125rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ── Contenido ────────────────────────────────────────────────────────────── */
main {
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem;
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  /* Que el pie fijo no tape lo último de la página */
  padding-bottom: calc(var(--alto-pie) + 1.5rem + env(safe-area-inset-bottom));
}

.tarjeta {
  background: var(--tarjeta);
  border: 2px solid var(--borde);
  border-radius: 0.875rem;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.etiqueta {
  margin: 0 0 0.25rem;
  font-weight: 400;
  line-height: 1.4;
  color: var(--suave);
  font-size: 1.0625rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.cifra { margin: 0; font-size: 2.75rem; font-weight: 700; line-height: 1.1; }
.titular { margin: 0.375rem 0; font-size: 1.3125rem; font-weight: 600; }
.dato { margin: 0.25rem 0; color: var(--suave); font-size: 1.125rem; }
.nota { margin: 1.5rem 0 0; color: var(--suave); font-size: 1rem; text-align: center; }

.momento.bueno    { border-color: var(--verde); }
.momento.moderado { border-color: var(--sol); }
.momento.basico   { border-color: var(--naranja); }
.momento.nada     { border-color: var(--naranja); }
.momento.parado   { border-color: var(--borde); }
.momento.bueno .cifra  { color: var(--verde); }
.momento.basico .cifra { color: var(--naranja); }

.verde { color: var(--verde); }
.rojo  { color: var(--rojo); }
.aviso { border-color: var(--rojo); }
.aviso-linea { color: var(--rojo); font-weight: 600; }
.ok-linea { color: var(--verde); font-weight: 600; }
.privacidad { border-color: var(--verde); }

/* Listas de aparatos y de horas */
.aparatos, .horas { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.aparatos li, .horas li {
  display: flex;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.625rem 0;
  border-bottom: 1px solid var(--borde);
}
.aparatos li span, .horas li span { color: var(--suave); white-space: nowrap; }

/* ── Botones ──────────────────────────────────────────────────────────────── */
.acciones { display: grid; gap: 0.875rem; margin: 1.5rem 0; }

.boton {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 3.875rem;
  margin: 0 0 0.875rem;
  padding: 0.75rem 1rem;
  background: var(--tarjeta);
  border: 2px solid var(--texto);
  border-radius: 0.875rem;
  color: var(--texto);
  font: inherit;
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}
.acciones .boton { margin: 0; }
.boton:active { background: var(--sol); color: var(--sobre-sol); }

/* ── Formularios ──────────────────────────────────────────────────────────── */
.campo {
  width: 100%;
  min-height: 3.875rem;
  margin: 0.375rem 0 1rem;
  padding: 0.75rem 1rem;
  background: var(--fondo);
  border: 2px solid var(--texto);
  border-radius: 0.875rem;
  color: var(--texto);
  font: inherit;
  font-size: 1.375rem;
}

.opciones { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.75rem; margin-top: 0.75rem; }
.opciones .opcion { margin: 0; font-size: 1.625rem; }
.opciones .elegida { background: var(--sol); border-color: var(--sol); color: var(--sobre-sol); }

/* ── Tablas, desplegables y gráficas ──────────────────────────────────────── */
.tabla { width: 100%; border-collapse: collapse; margin-top: 0.625rem; }
.tabla th, .tabla td { padding: 0.625rem 0.375rem; border-bottom: 1px solid var(--borde); text-align: left; }
.tabla tr.ahora { background: var(--resalte); font-weight: 700; }

details summary {
  min-height: 3rem;
  padding: 0.5rem 0;
  font-size: 1.3125rem;
  font-weight: 600;
  cursor: pointer;
}

.cielo { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.375rem; list-style: none; margin: 0.5rem 0 0; padding: 0; }
.cielo li { padding: 0.375rem 0; text-align: center; border-radius: 0.625rem; }
.cielo li.ahora { background: var(--resalte); font-weight: 700; }
.cielo .icono { display: block; font-size: 1.5rem; }
.cielo .hora { font-size: 1rem; color: var(--suave); }

.barras { list-style: none; margin: 0.625rem 0 0; padding: 0; }
.barras li { display: flex; align-items: center; gap: 0.625rem; padding: 0.3125rem 0; }
.barras .hora { width: 3rem; font-variant-numeric: tabular-nums; }
.barras .barra { flex: 1; height: 1.125rem; background: var(--fondo); border-radius: 0.5625rem; overflow: hidden; }
.barras .barra i { display: block; height: 100%; background: var(--sol); }
/* Ancho de las barras en pasos de 5 %: la política de seguridad no admite estilos en línea */
.barra .w0 { width: 0%; }
.barra .w5 { width: 5%; }
.barra .w10 { width: 10%; }
.barra .w15 { width: 15%; }
.barra .w20 { width: 20%; }
.barra .w25 { width: 25%; }
.barra .w30 { width: 30%; }
.barra .w35 { width: 35%; }
.barra .w40 { width: 40%; }
.barra .w45 { width: 45%; }
.barra .w50 { width: 50%; }
.barra .w55 { width: 55%; }
.barra .w60 { width: 60%; }
.barra .w65 { width: 65%; }
.barra .w70 { width: 70%; }
.barra .w75 { width: 75%; }
.barra .w80 { width: 80%; }
.barra .w85 { width: 85%; }
.barra .w90 { width: 90%; }
.barra .w95 { width: 95%; }
.barra .w100 { width: 100%; }
.barras .valor-texto { flex: 1; color: var(--suave); font-size: 1rem; font-style: italic; }
.barras.dias .hora { width: 4.5rem; }
.barras li.hueco .hora { color: var(--suave); }

/* Histórico: un mes por fila, toda la fila se puede pulsar */
.meses { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.meses li { border-bottom: 1px solid var(--borde); }
.meses li:last-child { border-bottom: none; }
.meses a {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.25rem 0.75rem;
  align-items: center;
  min-height: 3.5rem;
  padding: 0.75rem 0;
  color: var(--texto);
  text-decoration: none;
}
.meses .mes-nombre { font-weight: 600; }
.meses .mes-nombre small { color: var(--suave); font-size: 1rem; font-weight: 400; }
.meses .mes-valor { color: var(--suave); font-size: 1.0625rem; white-space: nowrap; }
.meses .barra {
  grid-column: 1 / -1;
  display: block;
  height: 1.125rem;
  background: var(--fondo);
  border-radius: 0.5625rem;
  overflow: hidden;
}
.meses .barra i { display: block; height: 100%; background: var(--sol); }
.meses .dato { grid-column: 1 / -1; margin: 0; }
.barras .valor { min-width: 5.5rem; text-align: right; color: var(--suave); font-size: 1.0625rem; }

.grupo { padding: 0.75rem 0; border-bottom: 1px solid var(--borde); }

/* Administración: listado de socios plegable, uno por fila */
.listado-socios .buscador { margin-top: 0.5rem; }
.socio { border-top: 1px solid var(--borde); }
.socio summary {
  display: flex;
  flex-direction: column;
  padding: 0.75rem 0;
  font-size: 1.1875rem;
}
.socio summary .socio-resumen { color: var(--suave); font-size: 1rem; font-weight: 400; }
.socio summary small { color: var(--suave); font-size: 1rem; font-weight: 400; }
.socio[open] { padding-bottom: 0.75rem; }
.grupo:last-child { border-bottom: none; }

/* ── Pie fijo abajo ───────────────────────────────────────────────────────── */
.pie {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  min-height: var(--alto-pie);
  padding: 0.375rem 1rem;
  padding-bottom: max(0.375rem, env(safe-area-inset-bottom));
  padding-left: max(1rem, env(safe-area-inset-left));
  padding-right: max(1rem, env(safe-area-inset-right));
  background: var(--pie);
  color: var(--sobre-pie);
  font-size: 1rem;
  line-height: 1.3;
}

.entidad { min-width: 0; font-size: 1rem; }

.pie .legal {
  flex-shrink: 0;
  display: flex;
  gap: 0.25rem;
}

.pie .legal a {
  display: inline-flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.75rem;
  color: inherit;
  white-space: nowrap;
}

/* En pantallas estrechas, el nombre de la cooperativa cede el sitio a los enlaces */
@media (max-width: 26rem) {
  .entidad { display: none; }
  .pie .legal { margin: 0 auto; }
}

/* Si con la letra grande cabecera y pie se comen la pantalla, el pie deja de
   estar fijo y queda al final de la página (lo decide navegacion.js) */
.pie-suelto .pie { position: static; }
.pie-suelto main { padding-bottom: 1.5rem; }

/* ── Aviso mientras carga la siguiente página ─────────────────────────────── */
.cargando-aviso { display: none; }
body.cargando .cargando-aviso {
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10;
  margin: 0;
  padding: 1rem;
  padding-top: max(1rem, env(safe-area-inset-top));
  background: var(--pie);
  color: var(--sobre-pie);
  font-size: 1.3125rem;
  font-weight: 700;
  text-align: center;
}
body.cargando main { opacity: 0.45; pointer-events: none; }

/* ── Pantallas grandes (tabletas y ordenadores) ───────────────────────────── */
@media (min-width: 40rem) {
  main { max-width: 46rem; padding-top: 1.5rem; }
  .acciones { grid-template-columns: repeat(2, 1fr); }
  .opciones { grid-template-columns: repeat(5, 1fr); }
  .cielo { grid-template-columns: repeat(7, 1fr); }
  .pie { justify-content: center; gap: 1.5rem; }
}

/* ── Aviso para instalar la web en la pantalla de inicio ──────────────────── */
.instalar {
  border: 2px solid var(--sol);
  background: var(--resalte);
}

.instalar h2 { margin-top: 0; }

.pasos {
  margin: 0 0 1rem;
  padding-left: 1.5rem;
}

.pasos li { margin-bottom: 0.5rem; }

/* Si ya se abre como aplicación, el aviso sobra aunque falle el JavaScript */
@media (display-mode: standalone), (display-mode: fullscreen), (display-mode: minimal-ui) {
  .instalar { display: none; }
}