/* Waypost Organiza — el panel de las organizaciones.

   Mismo producto que sendwaypost.com y misma tipografía, que es lo que hacía
   falta: se llega aquí desde un botón de aquella página, y hasta ahora el
   salto era a otra web — otra letra, otro gris y, si tenías el sistema en
   oscuro, de una página oscura a una sábana blanca.

   Las superficies son de vidrio: translúcidas y con desenfoque sobre un fondo
   con color. No es solo estética. Esto es una herramienta con muchas cajas
   apiladas —tarjetas, campos dentro de tarjetas, avisos dentro de campos— y
   sobre fondo plano todas pesaban lo mismo; el vidrio deja ver lo que hay
   detrás y coloca cada capa a su altura sin más líneas ni más sombras.

   Dos frenos, porque el vidrio mal hecho es ilegible:

   - El texto nunca va sobre vidrio a medias: las superficies que llevan texto
     son lo bastante opacas como para leerse sobre cualquier parte del fondo.
   - Hay respaldo. Si el navegador no sabe desenfocar, o si quien mira ha
     pedido menos transparencia, las superficies se vuelven sólidas. */

:root {
  --verde: #047857;
  --verde-hondo: #065f46;
  --verde-claro: rgba(4, 120, 87, .10);
  --sobre-verde: #ffffff;
  --rojo: #be123c;
  --rojo-claro: rgba(190, 18, 60, .09);
  --ambar: #b45309;
  --ambar-claro: rgba(180, 83, 9, .11);
  --tinta: #0f1f1a;
  --gris: #53635d;
  --gris-claro: #8a9995;
  --linea: rgba(4, 120, 87, .13);

  /* El fondo de verdad va en body::before; esto es el color de debajo. */
  --fondo: #edf5f1;

  /* Las dos superficies. 'vidrio' es la tarjeta; 'papel' es lo que va dentro
     —campos, filas, avisos— y es más opaco a propósito: vidrio sobre vidrio
     sobre un fondo con color es donde el texto deja de leerse. */
  --vidrio: rgba(255, 255, 255, .68);
  --papel: rgba(255, 255, 255, .86);
  --borde-vidrio: rgba(255, 255, 255, .90);
  /* Lo que va dentro de una tarjeta: un velo, no otra tarjeta. */
  --capa: rgba(255, 255, 255, .50);
  --desenfoque: saturate(165%) blur(20px);

  --radio: 14px;
  --sombra:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 2px rgba(4, 120, 87, .05),
    0 18px 40px -24px rgba(4, 61, 45, .35);

  color-scheme: light;

  --letra: "Public Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --titular: "Fraunces", Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--fondo);
  color: var(--tinta);
  font: 15px/1.55 var(--letra);
  -webkit-font-smoothing: antialiased;
}

/* Lo que hay detrás del vidrio. Sin esto no hay nada que refractar y las
   superficies translúcidas se ven como grises sucios. Fijo y detrás de todo:
   no se mueve al desplazar, así que las tarjetas pasan por delante de él. */
body::before {
  content: "";
  position: fixed;
  inset: -20vmax;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(58vmax 58vmax at 10% -8%, rgba(4, 120, 87, .26), transparent 60%),
    radial-gradient(48vmax 48vmax at 96% 6%, rgba(52, 211, 153, .30), transparent 62%),
    radial-gradient(62vmax 62vmax at 58% 104%, rgba(16, 185, 129, .22), transparent 60%);
}

a { color: var(--verde); }

/* ------------------------------------------------------------- estructura */

.barra {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border-bottom: 1px solid var(--borde-vidrio);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .28);
  position: sticky;
  top: 0;
  z-index: 10;
}
.barra .marca { display: flex; align-items: center; gap: 9px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; font-size: 14px; }
.barra .marca svg { color: var(--verde); }
.barra .hueco { flex: 1; }
.barra .quien { color: var(--gris); font-size: 13px; }

main { max-width: 1040px; margin: 0 auto; padding: 24px 20px 80px; }

h1 {
  font-family: var(--titular);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: 30px;
  letter-spacing: -.5px;
  margin: 0 0 4px;
}
h2 {
  font-family: var(--titular);
  font-weight: 600;
  font-optical-sizing: auto;
  font-size: 20px;
  letter-spacing: -.2px;
  margin: 0 0 12px;
}
h3 { font-size: 14px; margin: 0 0 8px; text-transform: uppercase; letter-spacing: .06em; color: var(--gris); }
.sub { color: var(--gris); margin: 0 0 24px; }

.tarjeta {
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--borde-vidrio);
  border-radius: var(--radio);
  padding: 22px;
  margin-bottom: 16px;
  box-shadow: var(--sombra);
}

.fila { display: flex; gap: 12px; align-items: center; }
.fila.entre { justify-content: space-between; }
.rejilla { display: grid; gap: 14px 16px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* Los campos de una fila tienen que acabar a la misma altura.
   Las etiquetas no miden lo mismo —unas llevan una línea de ayuda debajo y
   otras no—, así que con el flujo normal el campo de al lado bajaba veinte
   píxeles y la fila quedaba en escalera. La etiqueta crece hasta ocupar el
   hueco y el control se queda pegado abajo, alineado con sus vecinos. */
.rejilla > * { display: flex; flex-direction: column; min-width: 0; }
.rejilla > * > label { flex: 1; margin-bottom: 6px; }

/* Una rejilla de seis columnas para poder pedir anchos de verdad: entero,
   mitad y tercio. La de arriba reparte todo a partes iguales, que está bien
   cuando los campos miden lo mismo y es justo lo que falla en «Lo básico»: el
   nombre de una carrera y un correo de club necesitan el doble de sitio que
   una hora, y con seis huecos iguales los tres se cortaban.

   Los anchos van por tramos y no con auto-fit porque aquí el orden importa:
   qué, quién y cuándo, y cada grupo junto. */
.rejilla.medida { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.rejilla.medida > .todo   { grid-column: span 6; }
.rejilla.medida > .mitad  { grid-column: span 3; }
.rejilla.medida > .tercio { grid-column: span 2; }

/* Los cortes están medidos, no elegidos a ojo: un correo de club de los
   largos —inscripciones.carreras@clubmontanaguadarrama.es— pide 467 px, y por
   debajo de esta anchura una mitad ya no se los da. */
@media (max-width: 960px) {
  .rejilla.medida > .mitad { grid-column: span 6; }
}

/* Y un tercio se queda corto para el desplegable de la zona horaria, que
   lleva el nombre del sitio y el identificador dentro. */
@media (max-width: 900px) {
  .rejilla.medida > .tercio { grid-column: span 3; }
}
@media (max-width: 680px) {
  .rejilla.medida > * { grid-column: 1 / -1; }
}

/* -------------------------------------------------------------- controles */

label { display: block; font-size: 13px; font-weight: 600; margin-bottom: 5px; color: var(--tinta); }
label .pista { display: block; font-weight: 400; color: var(--gris); font-size: 12px; margin-top: 2px; }

input, textarea, select {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  font: inherit;
  background: var(--papel);
  color: var(--tinta);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--verde);
  box-shadow: 0 0 0 3px var(--verde-claro);
}
/* El desplegable nativo no hereda la letra en todos los navegadores. */
select { font-family: var(--letra); }
textarea { min-height: 84px; resize: vertical; }

/* El control nativo de archivo no se puede maquillar por dentro, pero sí meter
   en una caja con la misma altura y el mismo borde que los campos de al lado,
   que es lo que hacía falta para que la fila del GPX dejara de ir suelta. */
input[type="file"] {
  padding: 8px 10px;
  font-size: 13px;
  color: var(--gris);
  cursor: pointer;
}
input[type="file"]::file-selector-button {
  margin-right: 10px;
  padding: 5px 12px;
  border: 1px solid var(--linea);
  border-radius: 7px;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
input[type="file"]::file-selector-button:hover { background: var(--linea); }

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 10px 18px;
  border: 0;
  border-radius: 9px;
  background: var(--verde);
  color: var(--sobre-verde);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.boton:hover { background: var(--verde-hondo); }
.boton[disabled] { background: var(--gris-claro); cursor: not-allowed; }
.boton.suave { background: var(--papel); color: var(--tinta); border: 1px solid var(--linea); }
.boton.suave:hover { background: var(--verde-claro); border-color: var(--verde); }
/* Un botón suave apagado se veía exactamente igual que uno encendido: la regla
   de [disabled] pinta el fondo, y la de .suave lo vuelve a pintar después. Sin
   esto, «Editar» en una carrera cerrada invita a pulsarlo para nada. */
.boton.suave[disabled] {
  background: transparent;
  color: var(--gris-claro);
  border-color: var(--linea);
  cursor: not-allowed;
}
.boton.suave[disabled]:hover { background: transparent; border-color: var(--linea); }
.boton.peligro { background: var(--rojo); }
.boton.peligro:hover { background: #9f1239; }
.boton.chico { padding: 6px 12px; font-size: 13px; }

/* ----------------------------------------------------------------- tablas */

table { width: 100%; border-collapse: collapse; font-size: 14px; }
th {
  text-align: left;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--gris);
  padding: 0 10px 8px 0;
  font-weight: 600;
}
td { padding: 10px 10px 10px 0; border-top: 1px solid var(--linea); vertical-align: middle; }
td.num, th.num { text-align: right; padding-right: 0; }
.tabla-scroll { overflow-x: auto; }

/* ---------------------------------------------------------------- estados */

.etiqueta {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}
.etiqueta.gris { background: var(--fondo); color: var(--gris); }
.etiqueta.verde { background: var(--verde-claro); color: var(--verde); }
.etiqueta.ambar { background: var(--ambar-claro); color: var(--ambar); }
.etiqueta.roja { background: var(--rojo-claro); color: var(--rojo); }

.aviso {
  border-radius: var(--radio);
  padding: 14px 16px;
  margin-bottom: 16px;
  border-left: 4px solid;
}
.aviso.error { background: var(--rojo-claro); border-color: var(--rojo); color: var(--rojo); }
.aviso.bien { background: var(--verde-claro); border-color: var(--verde); color: var(--verde-hondo); }
.aviso.ojo { background: var(--ambar-claro); border-color: var(--ambar); color: var(--ambar); }
.aviso strong { display: block; margin-bottom: 2px; }

.vacio {
  color: var(--gris);
  text-align: center;
  padding: 34px 16px;
  border: 1px dashed var(--linea);
  border-radius: var(--radio);
  background: var(--capa);
}

/* ------------------------------------------------------- recuento de la lista */

.recuento {
  display: flex;
  align-items: baseline;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
  padding: 14px 16px;
  background: var(--verde-claro);
  border-radius: var(--radio);
}
.recuento .cifra { font-size: 26px; font-weight: 800; color: var(--verde-hondo); letter-spacing: -.5px; }
.recuento .unidad { font-weight: 700; color: var(--verde-hondo); }
/* Cuando hay algo que mirar, el recuento deja de ser una buena noticia. */
.recuento.ojo { background: var(--ambar-claro); }
.recuento.ojo .cifra, .recuento.ojo .unidad { color: var(--ambar); }

/* Las listas de direcciones con problema. Se parten porque pueden ser muchas y
   larguísimas, y una lista que ensancha la tarjeta rompe la página entera. */
.problema { margin-top: 12px; font-size: 13px; }
.problema > strong { display: block; margin-bottom: 4px; }
.problema .correos {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px;
  word-break: break-all;
  max-height: 140px;
  overflow-y: auto;
}
.problema.malo > strong { color: var(--rojo); }
.problema.ojo > strong { color: var(--ambar); }

/* El importe, con su desglose. Va en la misma tarjeta que el recuento y con
   más peso que nada de lo que hay alrededor: es el número por el que se va a
   pasar por caja, y buscarlo no puede costar dos segundos. */
.precio {
  margin-top: 14px;
  padding: 14px 16px;
  border: 1px solid var(--borde);
  border-radius: var(--radio);
}
.precio .total { font-size: 24px; font-weight: 800; letter-spacing: -.5px; }
/* También lo usa la pasarela simulada, que no vive dentro de .precio. */
.precio .desglose, .desglose {
  margin-top: 8px;
  font-size: 13px;
  color: var(--gris);
  line-height: 1.7;
}

/* ------------------------------------------------------------------ mapa */

/* Más alto que ancho no, pero tampoco la tira de 320 px de antes: en una
   pantalla de portátil eso era una rendija por la que no se distingue un
   collado de otro. Se limita con vh para que en un portátil bajo no obligue a
   hacer scroll para ver el mapa entero. */
#mapa, #mapa-panel {
  height: min(60vh, 480px);
  min-height: 320px;
  border-radius: var(--radio);
  border: 1px solid var(--linea);
  z-index: 0;   /* por debajo de la barra pegajosa, que si no la tapan las teselas */
}

.mapa-barra { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.mapa-barra .buscador { display: flex; gap: 8px; flex: 1 1 260px; min-width: 0; }
.mapa-barra input { flex: 1; min-width: 0; }

/* El interruptor de poner controles. Es un botón y no una casilla porque su
   estado cambia lo que hace tocar el mapa, y eso tiene que verse de lejos. */
.boton.activo { background: var(--verde-hondo); box-shadow: 0 0 0 3px rgba(4, 120, 87, .18); }

.mapa-caja { position: relative; }
/* La nota de la rueda: tapa el mapa mientras la rueda no hace zoom, y se va en
   cuanto sí lo hace. Sin esto, girar la rueda sobre el mapa parecía que el
   mapa estaba muerto. */
.mapa-nota {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radio);
  background: rgba(8, 20, 15, .46);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: #f3f7f5;
  font-weight: 700;
  font-size: 15px;
  text-align: center;
  padding: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity .18s;
  z-index: 400;
}
.mapa-nota.vista { opacity: 1; }

/* Los resultados del buscador. */
.resultados { display: grid; gap: 2px; margin-bottom: 12px; }
.resultados button {
  text-align: left;
  background: var(--papel);
  border: 1px solid var(--linea);
  border-radius: 9px;
  padding: 9px 12px;
  font: inherit;
  font-size: 13px;
  cursor: pointer;
  color: var(--tinta);
}
.resultados button:hover { border-color: var(--verde); background: var(--verde-claro); }

/* ------------------------------------------------------------- pantallas */

.oculto { display: none !important; }

#acceso { max-width: 380px; margin: 60px auto; }
#acceso .tarjeta { padding: 28px; }

.lista-carreras { display: grid; gap: 12px; }
.carrera {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 18px;
  background: var(--vidrio);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  border: 1px solid var(--borde-vidrio);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  cursor: pointer;
  text-align: left;
  width: 100%;
  font: inherit;
  color: inherit;
}
.carrera:hover { border-color: var(--verde); }

/* La fila dejó de ser un botón entero para poder llevar dos acciones dentro:
   tocar la carrera lleva al seguimiento y «Editar» al formulario. Un botón
   dentro de otro botón no es HTML válido, así que la fila es ahora una caja y
   la zona grande es el botón. */
.carrera .principal {
  flex: 1;
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}
.carrera .principal:focus-visible { outline: 2px solid var(--verde); outline-offset: 3px; border-radius: 6px; }
.carrera .nombre { font-weight: 700; }
.carrera .cuando { color: var(--gris); font-size: 13px; }
.carrera .cifras { text-align: right; color: var(--gris); font-size: 13px; white-space: nowrap; }

/* En un móvil no caben las tres columnas: la carrera arriba, y debajo las
   cifras y el botón repartidos a lo ancho. */
@media (max-width: 560px) {
  .carrera { flex-wrap: wrap; }
  .carrera .principal { flex: 1 0 100%; }
  .carrera .cifras { text-align: left; }
  .carrera .boton { margin-left: auto; }
}

.migas { color: var(--gris); font-size: 13px; margin-bottom: 8px; }
.migas button { background: none; border: 0; color: var(--verde); cursor: pointer; font: inherit; padding: 0; }

.repetidor { display: grid; gap: 12px; }

/* Cada fila: el número que se ve en el mapa, los campos, y quitar.
   'end' y no 'start': lo que tiene que alinearse es la base de los controles,
   no la de las etiquetas, que miden distinto. */
.repetidor .item {
  display: grid;
  gap: 10px 12px;
  grid-template-columns: auto 1fr auto;
  align-items: end;
  padding: 12px;
  background: var(--capa);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.repetidor .campos { display: grid; gap: 10px 12px; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); align-items: end; }
.repetidor .campo { display: flex; flex-direction: column; min-width: 0; margin: 0; }
.repetidor .campo > span { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--gris); margin-bottom: 4px; }
.repetidor .item input, .repetidor .item textarea { background: var(--papel); }

/* El número de la izquierda es el mismo que lleva el marcador en el mapa: sin
   él, con cinco controles no hay forma de saber cuál es cuál. */
.repetidor .orden {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-bottom: 9px;
  border-radius: 999px;
  background: var(--verde);
  color: var(--sobre-verde);
  font-size: 12px;
  font-weight: 800;
}
.repetidor .item > button { margin-bottom: 1px; }

@media (max-width: 560px) {
  .repetidor .item { grid-template-columns: auto 1fr; }
  .repetidor .item > button { grid-column: 2; justify-self: start; }
}

/* Los apartados de información, que no son una fila de campos cortos como los
   controles y por eso no usan su rejilla. Metidos ahí dentro, el título y el
   texto se apretaban en la primera columna —la de 'auto', que la hacía tan
   ancha como el más corto de los dos— y el «Quitar» se estiraba a lo ancho de
   toda la tarjeta. Aquí lo que manda es el texto: ancho entero y sitio para
   escribir un párrafo, que es lo que alguien va a leer sin cobertura. */
.apartados { display: grid; gap: 12px; }
.apartados .apartado {
  display: grid;
  gap: 10px;
  padding: 12px;
  background: var(--capa);
  border: 1px solid var(--linea);
  border-radius: var(--radio);
}
.apartados .cabecera { display: flex; gap: 10px; align-items: center; }
.apartados .cabecera input { flex: 1; min-width: 0; font-weight: 700; background: var(--papel); }
.apartados .cabecera > button { flex: none; }
.apartados textarea { min-height: 104px; background: var(--papel); }
.apartados .cuenta { margin: -4px 0 0; text-align: right; font-size: 12px; color: var(--gris-claro); }

/* Los apartados que se ponen casi siempre, a un toque. Botones de verdad y no
   una lista para copiar: el trabajo que ahorran es el de acordarse. */
.sugerencias { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.sugerencias button {
  width: auto;
  padding: 7px 13px;
  border: 1px dashed var(--borde);
  border-radius: 999px;
  background: var(--papel);
  color: var(--verde-hondo);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.sugerencias button:hover { border-style: solid; background: var(--verde-claro); }
.sugerencias button::before { content: '+ '; }

.pie { color: var(--gris-claro); font-size: 12px; text-align: center; padding: 24px 0 0; }

@media (max-width: 640px) {
  main { padding: 16px 14px 60px; }
  .carrera { flex-wrap: wrap; }
  .carrera .cifras { margin-left: 0; width: 100%; text-align: left; }
}

/* ------------------------------------------------------------- respaldos */

/* Sin desenfoque no hay vidrio: lo que queda es una superficie a medias sobre
   un fondo con color, que es justo lo ilegible. Se vuelven sólidas. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  :root { --vidrio: #ffffff; --papel: #ffffff; --capa: #f2f7f5; --borde-vidrio: var(--linea); }
}

/* Y si alguien ha pedido menos transparencia en su sistema se le hace caso: no
   es una preferencia estética, suele ser que así lo lee mejor. */
@media (prefers-reduced-transparency: reduce) {
  :root { --vidrio: #ffffff; --papel: #ffffff; --capa: #f2f7f5; --borde-vidrio: var(--linea); }
  .barra, .tarjeta, .carrera { backdrop-filter: none; -webkit-backdrop-filter: none; }
  body::before { opacity: .45; }
}

/* --------------------------------------------------------- con el dedo --*/

/* Los botones pequeños se acertaban de sobra con un ratón y se fallaban con el
   pulgar: «Quitar» medía 34 px y las migas de arriba, veinte. Cuarenta y cuatro
   es lo que recomienda Apple, y es lo que mide la yema de un dedo. */
@media (pointer: coarse) {
  .boton.chico,
  .sugerencias button,
  .migas button {
    min-height: 44px;
  }
  .migas button { padding: 0 4px; }
}