/* ====================================================================
 * Portal de organizadores de Tribusfera
 * ====================================================================
 *
 * Lo usan un colegio, una academia, un ayuntamiento o quien organiza una
 * extraescolar. Es la tercera pantalla del producto, despues del kiosk de la
 * cocina y del panel de familia, y la primera que no es de una familia.
 *
 * Los colores y las tipografias salen de /comun/tokens.css, la unica fuente
 * de verdad de la marca. Aqui NO se declara ni un color a pelo: es
 * exactamente lo que hizo que la paleta del kiosk y la del panel derivaran
 * respecto a la web publica (ver "Identidad visual" en PROJECT.md).
 *
 * Esta hoja la carga TAMBIEN la consola de superadmin (/super/), que son
 * tres tarjetas y dos botones: darle una hoja propia habria sido duplicar
 * estos mismos estilos para volver a tener dos copias que se separan.
 *
 * De escritorio primero, al reves que /mi/: un cole rellena esto en el
 * ordenador de la secretaria. Pero cabe en un movil sin nada raro, porque
 * quien lleva una extraescolar puede no tener otra cosa.
 * ==================================================================== */

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.45;
  transition: background .5s ease, color .5s ease;
}

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

/* ============================== ACCESO ============================= */
.acceso {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}
.tarjeta-acceso {
  width: 100%; max-width: 27rem;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 30px 26px 24px;
}
.marca {
  font-family: var(--font-display);
  font-size: 30px; font-weight: 600;
  margin: 0; color: var(--azulejo-texto);
}
.lema { margin: 2px 0 22px; color: var(--ink-soft); font-size: 15px; }
.pie-acceso { margin: 18px 0 0; font-size: 13px; color: var(--ink-soft); }

/* Entrar / crear cuenta. Dos caminos, no dos paginas. */
.conmutador {
  display: flex; gap: 6px;
  margin-bottom: 18px;
  border-bottom: 1px solid var(--line);
}
.conmutador-op {
  background: none; border: 0;
  padding: 9px 2px; margin-bottom: -1px;
  font-family: var(--font-body); font-size: 14px; font-weight: 500;
  color: var(--ink-soft);
  cursor: pointer;
  border-bottom: 2px solid transparent;
}
.conmutador-op + .conmutador-op { margin-left: 16px; }
.conmutador-op.activa { color: var(--azulejo-texto); border-bottom-color: var(--azulejo); }

/* =============================== BARRA ============================= */
.barra {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 12px 18px;
  border-bottom: 1px solid var(--line);
  background: var(--bg-card);
  position: sticky; top: 0; z-index: 3;
}
.barra-yo { display: flex; align-items: center; gap: 11px; min-width: 0; }
.barra-nombre { font-weight: 600; font-size: 16px; }
.barra-sub { font-size: 12px; color: var(--ink-soft); }
.barra-botones { display: flex; gap: 6px; flex: 0 0 auto; }

/* La "T" de Tribusfera en lugar del avatar de una persona: un organizador no
 * es alguien, es una entidad. */
.marca-mini {
  width: 38px; height: 38px; border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); font-weight: 600; font-size: 18px;
  flex: 0 0 auto;
}

/* =============================== HOJAS ============================= */
.hojas {
  padding: 22px 18px 60px;
  max-width: 46rem; margin: 0 auto;
}
.hojas section + section { margin-top: 36px; }
.hoja-titulo {
  font-family: var(--font-display);
  font-size: 20px; font-weight: 600;
  margin: 0 0 4px;
}
.hoja-sub { margin: 0 0 14px; font-size: 13.5px; color: var(--ink-soft); }

.tarjeta {
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px 20px;
}
.tarjeta + .tarjeta { margin-top: 12px; }
.tarjeta-pie {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap;
  margin-top: 18px;
}
.apunte { font-size: 13px; color: var(--ink-soft); }
.opcional { color: var(--ink-soft); font-weight: 400; }

/* ============================= CONTROLES =========================== */
input[type="text"], input[type="password"], input[type="email"], input[type="tel"], input[type="url"],
input[type="date"], input[type="time"], input[type="number"], select, textarea {
  width: 100%;
  font-family: var(--font-body);
  /* 16 px exactos: por debajo, iOS hace zoom al enfocar y descoloca la
   * pagina entera. Mismo motivo que en /mi/. */
  font-size: 16px;
  padding: 11px 13px;
  border: 1px solid var(--line-input); border-radius: 8px;
  background: var(--bg); color: var(--ink);
}
textarea { min-height: 5rem; resize: vertical; line-height: 1.45; }
input:focus, select:focus, textarea:focus { outline: 2px solid var(--azulejo); outline-offset: 1px; }
label { display: block; font-size: 13px; color: var(--ink-soft); margin: 14px 0 5px; }
label:first-child { margin-top: 0; }

/* La casilla de los terminos. No es un `label` normal de los de arriba: aqui
 * el texto va A LA DERECHA de la casilla y en color de lectura, no de
 * etiqueta, porque es una frase que hay que leer antes de marcar y no el
 * nombre de un campo.
 *
 * `align-items: flex-start` y no `center`: son dos lineas en un movil, y
 * centrado la casilla queda a la altura del hueco entre ellas.
 * El `input` se salva del `width: 100%` de la regla de arriba, que lo dejaba
 * como una barra de lado a lado. */
.casilla-legal {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 18px 0 4px;
  font-size: 14px; line-height: 1.45;
  color: var(--ink);
  cursor: pointer;
}
/* Con el color de la paleta y no con el azul de serie del navegador: son los
 * dos unicos enlaces de texto del portal. */
.casilla-legal a { color: var(--azulejo-texto); }
.casilla-legal input[type="checkbox"] {
  width: auto; margin: 2px 0 0;
  /* Algo mas grande que el defecto: es el unico control obligatorio del
   * formulario que se pulsa con el dedo. */
  transform: scale(1.15);
  flex: 0 0 auto;
}

.btn {
  font-family: var(--font-body); font-size: 15px; font-weight: 500;
  border-radius: 8px; padding: 11px 16px;
  border: 1px solid transparent;
  cursor: pointer;
  min-height: 44px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center;
}
.btn:disabled { opacity: .55; cursor: default; }
.btn-primario { background: var(--azulejo); color: var(--sobre-azulejo); }
.btn-primario:not(:disabled):active { filter: brightness(1.12); }
.btn-fantasma {
  background: transparent; color: var(--ink-soft);
  border-color: var(--line-input);
  font-size: 13px; padding: 8px 11px; min-height: 38px;
}
.btn-fantasma:hover { border-color: var(--azulejo); color: var(--azulejo-texto); }
/* Rechazar, borrar: en arcilla, y con el color de TEXTO que pasa AA, no el
 * de relleno (ver los contrastes en tokens.css). */
.btn-peligro {
  background: transparent; color: var(--arcilla-texto);
  border-color: var(--arcilla-texto);
  font-size: 13px; padding: 8px 11px; min-height: 38px;
}
.form-acceso .btn-primario, .tarjeta-acceso .btn-primario { width: 100%; margin-top: 18px; }

.mensaje {
  font-size: 14px; line-height: 1.5;
  margin: 14px 0 0; padding: 11px 13px;
  border-radius: 6px;
  border-left: 3px solid var(--azulejo);
  background: var(--bg-card);
}
.mensaje.error { border-left-color: var(--arcilla-texto); }
.mensaje.ok { border-left-color: var(--salvia); }

.aviso {
  margin: 14px auto 0; padding: 12px 14px;
  max-width: 46rem;
  border-radius: 8px;
  border-left: 3px solid var(--ocre-texto);
  background: var(--bg-card);
  font-size: 14px;
}
.aviso.malo { border-left-color: var(--arcilla-texto); }
.aviso.bueno { border-left-color: var(--salvia); }
.aviso b { font-weight: 600; }

.vacio { color: var(--ink-soft); font-size: 14px; padding: 14px 0; margin: 0; }

.cargando {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0;
  inset: 0; z-index: 9;
  display: flex; align-items: center; justify-content: center;
  background: var(--bg); color: var(--ink-soft);
  font-family: var(--font-body); font-size: 16px;
}

/* ============================= PASTILLAS =========================== */
/* El estado de verificacion, y mas adelante el de una invitacion. */
.pastilla {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink-soft);
  white-space: nowrap;
}
.pastilla.pendiente { color: var(--ocre-texto); border-color: var(--ocre-texto); }
.pastilla.aprobado  { color: var(--salvia-texto); border-color: var(--salvia-texto); }
.pastilla.rechazado { color: var(--arcilla-texto); border-color: var(--arcilla-texto); }

/* ============================ ACTIVIDADES ========================== */
.act-fila {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 14px; flex-wrap: wrap;
}
.act-datos { min-width: 0; flex: 1 1 15rem; }
.act-titulo {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.act-cuando { font-size: 14px; color: var(--ink-soft); margin-top: 3px; }
.act-donde { font-size: 13.5px; color: var(--ink-soft); }
.act-desc {
  font-size: 13.5px; margin-top: 7px;
  overflow-wrap: anywhere;
}
.act-acciones { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }
/* Las proximas fechas de una recurrencia, para comprobarla de un vistazo. */
.act-ocurrencias {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid var(--line);
  font-size: 13px; color: var(--ink-soft);
}
.act-ocurrencias b { color: var(--ink); font-weight: 500; }

/* La pastilla de la cuota: en ocre, que es el color de "ojo con esto" en
 * esta paleta, y con el de TEXTO que pasa AA (el ocre de relleno da 1.93:1
 * como texto, ver tokens.css). */
.pastilla.cuota { color: var(--ocre-texto); border-color: var(--ocre-texto); }

/* ======================= DIALOGO DE ACTIVIDAD ====================== */
.dialogo {
  border: 1px solid var(--line); border-radius: 14px;
  background: var(--bg-card); color: var(--ink);
  padding: 22px;
  width: min(94vw, 32rem);
  /* Los limites son los de la pantalla, escritos a mano y no heredados del
   * navegador: un <dialog> modal trae `max-height` y `overflow: auto`, y con
   * eso lo que scrollea es el dialogo ENTERO, asi que la fila de botones
   * —que va al final— se queda por debajo del borde visible. Es el mismo
   * fallo que se arreglo en el kiosk el 2026-09-10. */
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 2rem);
  max-height: calc(100dvh - 2rem);
}
/* Con `[open]`: un `display` en la regla general le gana al `display: none`
 * que el navegador da a un dialogo cerrado (una regla de autor gana a una
 * del navegador), y el dialogo se quedaria maquetado en la pagina. */
.dialogo[open] { display: flex; flex-direction: column; }
.dialogo::backdrop { background: rgba(0, 0, 0, .5); }
.dialogo h2 {
  font-family: var(--font-display); font-size: 20px; margin: 0 0 14px;
  flex: 0 0 auto;
}
.dialogo > form { display: flex; flex-direction: column; min-height: 0; flex: 1 1 auto; }
/* La parte que crece con el formulario. `min-height: 0` es lo que permite
 * que un hijo de un flex se encoja por debajo de su contenido; sin el, el
 * scroll no se activa y el desborde vuelve al dialogo. */
.dialogo-scroll {
  flex: 1 1 auto; min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding-right: 2px;
}
.dialogo-botones {
  display: flex; gap: 8px; justify-content: flex-end;
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid var(--line);
  flex: 0 0 auto;
}

.grupo {
  border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px 16px; margin: 18px 0 0;
}
.grupo legend {
  font-size: 13px; font-weight: 600; color: var(--ink-soft);
  padding: 0 6px;
}
.dos { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 26rem) { .dos { grid-template-columns: 1fr; } }

.radios { display: flex; gap: 16px; flex-wrap: wrap; }
.radio {
  display: flex; align-items: center; gap: 7px;
  margin: 0; font-size: 15px; color: var(--ink);
  cursor: pointer;
}
.radio input { width: auto; }

/* Los dias de la semana, como siete botones que se encienden. Mas rapido de
 * tocar que siete casillas, y se lee de un vistazo cuales estan puestos. */
.dias { display: flex; gap: 6px; flex-wrap: wrap; }
.dia {
  width: 42px; height: 40px;
  border: 1px solid var(--line-input); border-radius: 8px;
  background: transparent; color: var(--ink-soft);
  font-family: var(--font-body); font-size: 13px; font-weight: 500;
  cursor: pointer;
}
.dia.puesto {
  background: var(--azulejo); color: var(--sobre-azulejo);
  border-color: transparent;
}

/* ============================ INVITAR ============================== */
.fila-invitar { display: flex; gap: 8px; align-items: flex-start; }
.fila-invitar input { flex: 1 1 auto; min-width: 0; }
.fila-invitar .btn { flex: 0 0 auto; }

.sub-titulo {
  font-family: var(--font-display); font-size: 15px; font-weight: 600;
  margin: 22px 0 10px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}

.inv-fila {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: 14px;
}
.inv-fila:last-child { border-bottom: none; }
.inv-quien { min-width: 0; overflow-wrap: anywhere; }
.inv-cuando { font-size: 12px; color: var(--ink-soft); margin-top: 2px; }

/* Los contadores de una actividad, en la tarjeta. */
.act-cuentas {
  display: flex; gap: 8px; flex-wrap: wrap;
  margin-top: 10px;
}
.pastilla.esperando { color: var(--ocre-texto); border-color: var(--ocre-texto); }
.pastilla.aceptadas { color: var(--salvia-texto); border-color: var(--salvia-texto); }

/* ====================== CONSOLA DE SUPERADMIN ====================== */
/* Tres tarjetas y dos botones. Comparte esta hoja con el portal a
 * proposito: son la misma marca y no merece una copia de los mismos
 * estilos. */
.org-fila {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.org-datos { min-width: 0; flex: 1 1 16rem; }
.org-nombre {
  font-family: var(--font-display); font-weight: 600; font-size: 17px;
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
}
.org-meta { font-size: 13px; color: var(--ink-soft); margin-top: 4px; line-height: 1.6; }
.org-meta div { overflow-wrap: anywhere; }
.org-acciones { display: flex; gap: 8px; flex: 0 0 auto; flex-wrap: wrap; }

/* El enlace de alta (F7). */
#bloque-enlace { margin-bottom: 8px; }
#enlace-url { font-size: 14px; }
#enlace-no { margin: 0; }
.enlace-cifra { margin: 10px 0 0; font-weight: 600; }
@media (max-width: 520px) {
  .fila-invitar { flex-direction: column; align-items: stretch; }
  /* El nombre del organizador ocupaba cuatro lineas al lado de los botones:
   * arriba el nombre en una linea, debajo los botones. */
  .barra { flex-wrap: wrap; row-gap: 8px; padding: 10px 14px; }
  .barra-yo { flex: 1 1 100%; }
  .barra-botones { flex: 1 1 100%; justify-content: flex-end; }
}

/* Importar actividades (F7). */
.acciones-actividades { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.acciones-actividades .btn-primario { width: auto; margin-top: 0; }
.columnas-importar { margin: 0 0 8px; font-weight: 600; font-size: 13.5px; }
.lista-ayuda { margin: 0 0 12px; padding-left: 18px; }
.lista-ayuda li { margin: 2px 0; }
#importar-texto { font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: 13px; white-space: pre; }
.lista-importar { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; max-height: 14rem; overflow: auto; }
.lista-importar li { margin: 3px 0; }
.lista-importar li.mal { color: var(--arcilla-texto, #a23b26); font-weight: 600; }