/* =============================================================
   AtrilUp — estilos (pensados primero para el móvil)

   Idea: la "tarjeta de lira", la partitura pequeña que el músico
   lleva sujeta al instrumento en la procesión. Morado nazareno,
   oro de bordado solo para lo que cambia, y pentagrama dibujado
   con CSS. Sin fuentes externas: funciona sin conexión.
   ============================================================= */

/* ---------- Colores y letras (cámbialos aquí) ---------- */

:root {
  --morado: #3b1f4a;        /* túnica de nazareno: cabecera y botones */
  --accion: #3b1f4a;        /* botones y borde de la tarjeta de lira */
  --morado-suave: #ece6f1;  /* fondos de lo seleccionado */
  --oro: #b8892b;           /* bordado: solo para "Actualizada" */
  --tinta: #1e1724;         /* texto principal */
  --tinta-suave: #675e70;   /* textos secundarios */
  --papel: #ffffff;         /* tarjetas */
  --fondo: #f1eef4;         /* fondo de la página */
  --linea: #ddd6e3;         /* bordes y pentagrama */
  --pendiente: #9e2a2b;     /* lacre: avisos pendientes */
  --resuelto: #3d6b4f;      /* avisos resueltos */

  --letra-titulos: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --letra-texto: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --letra-datos: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  --radio: 12px;
}

/* Modo oscuro automático, para las procesiones de noche */
@media (prefers-color-scheme: dark) {
  :root {
    --morado: #2a1636;
    --accion: #7a4d96;
    --morado-suave: #34243f;
    --oro: #d9ae4e;
    --tinta: #eee8f2;
    --tinta-suave: #a99fb2;
    --papel: #221a29;
    --fondo: #17121c;
    --linea: #3a2f43;
    --pendiente: #e07a6f;
    --resuelto: #7fbf95;
  }
}

* {
  box-sizing: border-box;
}

/* Sin zoom al tocar dos veces seguidas; desplazar y ampliar con dos dedos siguen (spec 002) */
html {
  touch-action: manipulation;
}

body {
  margin: 0;
  font-family: var(--letra-texto);
  font-size: 17px;
  line-height: 1.45;
  color: var(--tinta);
  background: var(--fondo);
}

/* Contorno visible al navegar con teclado */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--oro);
  outline-offset: 2px;
}

/* ---------- Cabecera ---------- */

.cabecera {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 16px;
  background: var(--morado);
  color: #ffffff;
}

.logo {
  margin: 0;
  font-family: var(--letra-titulos);
  font-size: 1.5rem;
  font-weight: 600;
}

.logo span {
  color: var(--oro);
}

.voz-actual {
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  color: #ffffff;
  font-size: 0.9rem;
  text-decoration: none;
}

/* ---------- Contenido ---------- */

main {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 16px 100px; /* hueco abajo para las pestañas */
}

h2,
h3 {
  font-family: var(--letra-titulos);
  font-weight: 600;
}

h2 {
  margin: 8px 0 4px;
  font-size: 1.6rem;
  line-height: 1.2;
}

h3 {
  margin: 28px 0 10px;
  font-size: 1.2rem;
}

.ayuda {
  margin: 4px 0 16px;
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.centrado {
  text-align: center;
}

.fecha {
  color: var(--tinta-suave);
  font-family: var(--letra-datos);
  font-size: 0.78rem;
}

.volver {
  display: inline-block;
  padding: 6px 0;
  margin-bottom: 8px;
  color: var(--tinta-suave);
  font-weight: 600;
  text-decoration: none;
}

/* ---------- Elegir voz ---------- */

.titulo-voces {
  font-size: 2rem;
}

.voces {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.voz {
  min-height: 84px;
  padding: 16px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: var(--tinta);
  font-family: var(--letra-titulos);
  font-size: 1.2rem;
  font-weight: 600;
  cursor: pointer;
}

.voz.es-actual {
  border: 2px solid var(--accion);
  background: var(--morado-suave);
}

/* ---------- Lista de marchas ---------- */

.lista,
.comentarios {
  margin: 0;
  padding: 0;
  list-style: none;
}

.lista li + li {
  margin-top: 8px;
}

.tarjeta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 10px;
  min-height: 64px;
  padding: 14px 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
  color: inherit;
  text-decoration: none;
}

.tarjeta-titulo {
  flex: 1;
  font-family: var(--letra-titulos);
  font-size: 1.15rem;
  font-weight: 600;
}


.etiqueta {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--oro);
  color: #1e1724;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* ---------- Tarjeta de lira (detalle de una marcha) ---------- */

.lira {
  padding: 18px 18px 20px;
  border: 1px solid var(--linea);
  border-top: 4px solid var(--accion);
  border-radius: var(--radio);
  background: var(--papel);
}

.lira-cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

/* La voz va arriba a la izquierda, como en las partituras de verdad */
.lira-voz {
  font-family: var(--letra-titulos);
  font-size: 0.95rem;
  font-variant: small-caps;
  letter-spacing: 0.06em;
  color: var(--tinta-suave);
}

.lira-titulo {
  margin: 14px 0 12px;
  font-size: 1.9rem;
  text-align: center;
}

/* Cinco líneas de pentagrama dibujadas solo con CSS */
.pentagrama {
  height: 25px;
  margin: 0 0 18px;
  background: repeating-linear-gradient(to bottom, var(--linea) 0 1px, transparent 1px 6px);
}

.datos {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 6px 16px;
  margin: 0;
}

.datos dt {
  color: var(--tinta-suave);
  font-size: 0.9rem;
}

.datos dd {
  margin: 0;
  font-family: var(--letra-datos);
  font-size: 0.9rem;
}

.boton {
  display: block;
  width: 100%;
  min-height: 52px;
  margin-top: 18px;
  padding: 14px;
  border: none;
  border-radius: var(--radio);
  background: var(--accion);
  color: #ffffff;
  font: inherit;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.boton-secundario {
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid var(--tinta-suave);
  border-radius: 10px;
  background: transparent;
  color: var(--tinta);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}

/* ---------- Formulario ---------- */

.ficha {
  padding: 16px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--papel);
}

label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 600;
}

input,
select,
textarea {
  display: block;
  width: 100%;
  margin-top: 6px;
  padding: 12px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--tinta);
  font: inherit;
  font-size: 1rem;      /* 16 px: con menos, el iPhone amplía la pantalla al tocar el campo (spec 002) */
  font-weight: normal;
}

textarea {
  resize: vertical;
}

/* ---------- Buscador del repertorio (spec 001) ---------- */

/* Un texto largo sin espacios (lo buscado o un título) se corta en varias líneas
   en vez de salirse de la pantalla */
#resultados {
  overflow-wrap: anywhere;
}

/* La "×" de borrar, dibujada con los colores de la app (no el azul del navegador) */
#buscador::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 18px;
  height: 18px;
  background: var(--tinta-suave);
  -webkit-mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center / contain no-repeat;
  mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6 6l12 12M18 6L6 18' stroke='black' stroke-width='2.5' stroke-linecap='round'/></svg>") center / contain no-repeat;
  cursor: pointer;
}

/* Oculto a la vista, pero el lector de pantalla lo lee (aviso de resultados) */
.solo-lector {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.ficha .boton {
  margin-top: 4px;
}

/* ---------- Comentarios ---------- */

.comentario {
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--pendiente);
  border-radius: 10px;
  background: var(--papel);
}

.comentario.es-resuelto {
  border-left-color: var(--resuelto);
}

.comentario-cabecera,
.comentario-pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.comentario-texto {
  margin: 6px 0 8px;
  white-space: pre-wrap;      /* respeta los saltos de línea */
  overflow-wrap: anywhere;    /* corta palabras muy largas */
}

.estado {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--pendiente);
}

.es-resuelto .estado {
  color: var(--resuelto);
}

/* ---------- Avisos (director) ---------- */

.resumen {
  margin: 4px 0 8px;
  color: var(--tinta-suave);
  font-weight: 600;
}

.grupo h3 {
  margin-top: 20px;
}

.titulo-resueltos {
  margin-top: 36px;
  padding-top: 18px;
  border-top: 1px solid var(--linea);
}

/* ---------- Pestañas inferiores ---------- */

.pestanas {
  position: fixed;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  gap: 8px;
  padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linea);
  background: var(--papel);
}

.pestanas a {
  flex: 1;
  padding: 12px;
  border-radius: var(--radio);
  color: var(--tinta-suave);
  font-weight: 600;
  text-align: center;
  text-decoration: none;
}

.pestanas a.activa {
  background: var(--morado-suave);
  color: var(--tinta);
}

.contador {
  display: inline-block;
  min-width: 22px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--pendiente);
  color: var(--papel);
  font-size: 0.8rem;
  text-align: center;
}

/* ---------- Músicos y autorizados (spec 003) ---------- */

/* La voz del músico en la cabecera no se puede pulsar: sin borde de botón */
span.voz-actual {
  border-color: transparent;
}

/* "Soy autorizado" / "Salir del modo autorizado": discreto, pero fácil de tocar */
.enlace-discreto {
  display: inline-block;
  min-height: 44px;
  margin-top: 16px;
  padding: 12px;
  border: none;
  background: none;
  color: var(--tinta-suave);
  font: inherit;
  font-size: 0.85rem;
  text-decoration: underline;
  cursor: pointer;
}

/* "Código incorrecto" */
.error {
  margin: 8px 0 0;
  color: var(--pendiente);
  font-weight: 600;
}

/* "Aviso enviado" */
.confirmacion {
  margin: 10px 0 0;
  color: var(--resuelto);
  font-weight: 600;
  text-align: center;
}

.error:empty,
.confirmacion:empty {
  display: none;
}

/* Detalle del autorizado: una ficha de lira por voz, en una columna */
.voces-marcha {
  display: grid;
  gap: 12px;
}

.voces-marcha .datos,
.voces-marcha .ayuda {
  margin: 12px 0 0;
}

/* ---------- Cuentas (spec 004) ---------- */

/* .pestanas usa display: flex, que taparía el atributo hidden */
.pestanas[hidden] {
  display: none;
}

/* Cabecera: la voz (o "Autorizado") y el botón "Salir" */
#voz-actual {
  display: flex;
  align-items: center;
  gap: 4px;
}

.salir {
  min-height: 44px;
  padding: 10px 14px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 999px;
  background: none;
  color: #ffffff;
  font: inherit;
  font-size: 0.9rem;
  cursor: pointer;
}

/* Mientras se espera al servidor */
button:disabled,
select:disabled {
  opacity: 0.6;
  cursor: wait;
}

/* Pantalla "Cuentas" */
.cuentas {
  display: grid;
  gap: 12px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.cuenta .ayuda {
  margin-bottom: 8px;
  overflow-wrap: anywhere;   /* correos largos sin scroll horizontal */
}

.acciones {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

/* En las cuentas solo resalta en rojo la pendiente; el resto, en gris */
.cuenta .estado {
  color: var(--tinta-suave);
}

.cuenta .estado-pendiente {
  color: var(--pendiente);
}

/* Con tres pestañas, "Cuentas 2" no cabe en una línea a 375 px con el relleno normal */
.pestanas a {
  padding: 12px 4px;
  white-space: nowrap;
}

/* ---------- Notificaciones (spec 005) ---------- */

.notificaciones {
  margin-bottom: 20px;
}

.notificaciones h3 {
  margin-top: 0;
}

.notificaciones p {
  margin: 0;
}

/* ---------- Voces de Dropbox (spec 006) ---------- */

/* Voces de una cuenta en "Cuentas" */
.voces-cuenta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

.etiqueta-voz {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  border-radius: 999px;
  background: var(--morado-suave);
  font-size: 0.85rem;
  overflow-wrap: anywhere;
}

/* Voz que ya no existe en Dropbox (RF-10) */
.etiqueta-voz.no-existe {
  padding-right: 10px;
  background: none;
  border: 1px dashed var(--pendiente);
  color: var(--pendiente);
}

.quitar-voz {
  min-height: 32px;
  padding: 4px 10px;
  border: none;
  border-radius: 999px;
  background: var(--papel);
  color: var(--tinta);
  font: inherit;
  font-size: 0.8rem;
  cursor: pointer;
}

/* ---------- Descargas (spec 007) ---------- */

.descargas {
  margin-bottom: 16px;
}

.descargas h3 {
  margin-top: 0;
}

.descargas .acciones {
  margin-top: 0;
}

/* "Descargar", debajo de "Abrir partitura" en cada ficha */
.boton-descargar {
  display: block;
  width: 100%;
  margin-top: 8px;
}

/* ---------- Lupa flotante (spec 001, RF-13) ---------- */

/* Abajo a la derecha, por encima de la barra de pestañas */
.boton-lupa {
  position: fixed;
  right: 16px;
  bottom: calc(88px + env(safe-area-inset-bottom));
  z-index: 20;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  border: none;
  border-radius: 50%;
  background: var(--accion);
  color: #ffffff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  cursor: pointer;
}

.boton-lupa[hidden] {
  display: none;
}