/*
  Proyecto Anfora — base compartida.

  Hasta ahora cada pagina traia su propio <style> inline completo, asi que
  cualquier cambio de identidad habia que hacerlo ocho veces y siempre
  quedaba una pagina atras. Esto es el unico lugar donde vive el aspecto.

  La idea: marmol oscuro para contemplar, papel claro para actuar. El fondo
  es piedra; todo lo que pide una accion (formularios, modales) va sobre una
  tarjeta clara. Eso ademas evita tener que re-tematizar cada <input>.
*/

:root {
  --fondo:        #241811;
  --fondo-hondo:  #160f0a;
  --papel:        #f7efe3;   /* tarjetas claras sobre la piedra */
  --papel-borde:  #e0cfb6;

  --texto:        #f0e6d8;   /* sobre marmol */
  --texto-suave:  #c3ac92;
  --texto-papel:  #3a2414;   /* dentro de una tarjeta clara */
  --texto-papel-suave: #7a5b3d;

  --panel:        rgba(18, 12, 8, 0.72);
  --panel-borde:  rgba(201, 166, 102, 0.26);

  --oro:          #c9a666;
  --terracota:    #c97f4e;
  --terracota-osc:#a06038;
  --alerta:       #e0a072;

  --radio:        10px;
  --sombra:       0 4px 20px rgba(0, 0, 0, 0.45);
}

* { box-sizing: border-box; }

/*
  OJO con color-scheme. Estuvo en 'dark' y rompio todos los formularios: le
  dice al navegador que pinte los controles NATIVOS (input, select, textarea)
  en modo oscuro, y como esos controles viven dentro de tarjetas de papel
  claro, quedaban como cajas negras ilegibles. Se veia sobre todo en el
  telefono.

  El fondo oscuro del sitio ya lo pone body, no hace falta declararlo aca.
  Cada contenedor claro declara el suyo mas abajo.
*/
html { color-scheme: light; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "EB Garamond", Georgia, serif;
  font-size: 18px;
  line-height: 1.6;
  color: var(--texto);
  background-color: var(--fondo-hondo);
  background-image: url("/assets/marmol-1920.webp");
  background-size: cover;
  background-position: center;
  background-attachment: fixed;
  background-repeat: no-repeat;
  /* Con color-scheme en light, la barra de desplazamiento nativa saldria
     clara sobre una pagina de piedra. Se pide oscura a proposito. */
  scrollbar-color: #6b503b var(--fondo-hondo);
}

/* background-attachment:fixed cuesta caro en iOS y produce saltos al hacer
   scroll, ademas de servir una imagen mas grande de la necesaria. */
@media (max-width: 900px) {
  body {
    background-image: url("/assets/marmol-1024.webp");
    background-attachment: scroll;
  }
}

h1, h2, h3, .anf-marca, .anf-boton {
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  line-height: 1.25;
}

a { color: var(--oro); }
a:hover { color: var(--terracota); }

img { max-width: 100%; height: auto; }

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

/*
  La barra de las paginas con sesion: marca a la izquierda, cuenta a la
  derecha, una sola linea.

  Estuvo con la marca centrada y los enlaces debajo, y en un telefono eso
  ocupaba TRES lineas: el nombre, cinco enlaces, y "Salir" solo en la
  tercera. Antes de ver ninguna anfora ya se habia gastado un cuarto de la
  pantalla en navegacion. Los enlaces se fueron adentro del boton de cuenta.

  La marca centrada se queda solo en la portada, que es donde tiene sentido:
  ahi es el titulo de la pagina, no una barra de herramientas.
*/
.anf-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.7rem 1.1rem;
  background: var(--panel);
  border-bottom: 1px solid var(--panel-borde);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  /*
    El position y el z-index NO son decorativos: sin ellos, el menu de la
    cuenta se abria POR DEBAJO de las anforas del listado.

    El motivo es el backdrop-filter de dos lineas mas arriba. Un
    backdrop-filter crea un contexto de apilamiento, asi que el z-index:60 de
    .anf-cuenta__menu deja de medirse contra la pagina y pasa a medirse solo
    dentro de la barra. Y la barra, sin z-index propio, pierde contra
    cualquier elemento posicionado que venga despues en el documento: las
    tarjetas del listado llevan de 1 a 4 y se dibujaban encima del menu.

    En la pagina del anfora esto no pasaba porque su barra (.topbar, en
    styles_perfil.css) si trae z-index. El 100 queda muy por debajo de las
    hojas a pantalla completa (11000 y 13000), que tienen que tapar la barra.
  */
  position: relative;
  z-index: 100;
}

.anf-marca {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: "Cinzel", Georgia, serif;
  font-weight: 600;
  font-size: 1.05rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--texto);
  text-decoration: none;
}
.anf-marca:hover { color: var(--oro); }
.anf-marca__vaso {
  width: 1.7rem;
  height: 1.7rem;
  flex: none;
}

/* En pantallas angostas se queda el anfora y se acorta el nombre. */
@media (max-width: 380px) {
  .anf-marca { font-size: 0.95rem; letter-spacing: 0.1em; }
}

/* ------------------------------------------------------- menu de la cuenta */

.anf-cuenta { position: relative; flex: none; }

.anf-cuenta__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  padding: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  color: var(--texto);
  background: rgba(201, 166, 102, 0.16);
  border: 1px solid var(--panel-borde);
  border-radius: 50%;
  cursor: pointer;
}
.anf-cuenta__btn:hover { background: rgba(201, 166, 102, 0.3); color: var(--oro); }

/* La foto de perfil dentro del boton redondo, si la persona puso una. */
.anf-cuenta__btn { overflow: hidden; }
.anf-cuenta__avatar {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
  display: block;
}
.anf-cuenta__btn:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }

.anf-cuenta__menu {
  position: absolute;
  top: calc(100% + 0.55rem);
  right: 0;
  z-index: 60;
  min-width: 12rem;
  display: none;
  flex-direction: column;
  padding: 0.4rem;
  background: var(--papel);
  border: 1px solid var(--papel-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.anf-cuenta__menu.abierto { display: flex; }

/* Los <button> son las acciones propias de la pagina (editar, ordenar): se
   ven exactamente igual que los enlaces, porque para quien lo usa son lo
   mismo. La diferencia es solo que no llevan a otra direccion. */
.anf-cuenta__menu a,
.anf-cuenta__menu button {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.95rem;
  text-align: left;
  color: var(--texto-papel);
  text-decoration: none;
  background: transparent;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.anf-cuenta__menu a:hover,
.anf-cuenta__menu button:hover { background: #ece0cd; color: var(--texto-papel); }

/* Separa las acciones de este anfora de los enlaces generales. */
/* Los iconos del menu y el de "volver". Un tamaño fijo para que los textos
   queden alineados aunque el icono sea mas ancho o mas angosto. */
.anf-icono {
  width: 1.15rem;
  height: 1.15rem;
  flex: none;
  opacity: 0.75;
}

.anf-cuenta__raya {
  display: block;
  height: 1px;
  margin: 0.35rem 0.3rem;
  background: var(--papel-borde);
}

.anf-cuenta__quien {
  padding: 0.4rem 0.7rem 0.6rem;
  margin-bottom: 0.35rem;
  border-bottom: 1px solid var(--papel-borde);
}
.anf-cuenta__correo {
  margin: 0;
  font-size: 0.85rem;
  color: var(--texto-papel);
  overflow-wrap: anywhere;
}
/* Cuantos dias quedan, a la vista y sin tener que ir a buscarlo. Es un enlace
   a los planes: quien mira ese numero suele ser porque le preocupa. */
.anf-cuenta__plan { margin: 0.15rem 0 0; font-size: 0.78rem; }
.anf-cuenta__plan a { color: var(--texto-papel-suave); text-decoration: none; }
.anf-cuenta__plan a:hover { color: var(--terracota-osc); text-decoration: underline; }

.anf-cuenta__salir { border-top: 1px solid var(--papel-borde); margin-top: 0.25rem; padding-top: 0.55rem; }

/*
  "Volver a mis anforas". Estaba dentro del menu de la cuenta, junto a Salir y
  a la Papelera, que es donde se guardan las cosas que se hacen de vez en
  cuando. Volver atras se hace todo el rato y merece estar a la vista.
*/
.anf-volver {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.95rem;
  color: var(--texto-suave);
  text-decoration: none;
}
.anf-volver:hover { color: var(--oro); }

/*
  "Escuchar musica", en la cabecera del anfora.

  Va sobre la tarjeta de papel, asi que se escribe con la tinta de la tarjeta
  y no con los colores del marmol. Una pildora del alto de una linea de texto:
  es una opcion que esta ahi, no una llamada a hacer nada. Mientras suena, el
  icono se enciende en terracota y el texto pasa a decir que la detiene.

  font:inherit importa: sin el, un <button> sale con la letra del sistema y
  desentona con la tarjeta.
*/
.anf-musica {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  margin-top: 0.95rem;
  padding: 0.3rem 0.95rem 0.32rem;
  border: 1px solid rgba(122, 91, 61, 0.35);
  border-radius: 999px;
  background: transparent;
  font: inherit;
  font-size: 0.9rem;
  line-height: 1.3;
  color: var(--texto-papel-suave);
  cursor: pointer;
}
.anf-musica:hover,
.anf-musica:focus-visible {
  color: var(--terracota-osc);
  border-color: rgba(160, 96, 56, 0.6);
}
.anf-musica:disabled { opacity: 0.6; cursor: default; }
.anf-musica .anf-icono { width: 1.05rem; height: 1.05rem; }
.anf-musica--sonando { border-color: rgba(160, 96, 56, 0.6); }
.anf-musica--sonando .anf-icono { color: var(--terracota-osc); opacity: 1; }

/* ------------------------------------------------------- acompañamiento */

/*
  La pastilla "Conversar" es la misma que la de la musica (.anf-musica), al
  lado. Las dos son opciones que estan ahi, no llamadas a hacer nada.
*/
.anf-conversar { margin-left: 0.45rem; }
@media (max-width: 400px) { .anf-conversar { margin-left: 0; } }

/*
  El panel de la conversacion. Es una hoja de papel sobre el marmol, con la
  mecanica de la de ordenar (.anf-hoja-fondo): lo que pide una decision va
  sobre papel. color-scheme light aqui dentro por lo mismo que en todo el
  sitio: los controles nativos viven sobre una tarjeta clara.
*/
.acomp {
  width: min(94vw, 30rem);
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  padding: 1.1rem 1.25rem 1rem;
  background: var(--papel);
  color: var(--texto-papel);
  border: 1px solid var(--papel-borde);
  border-radius: 14px;
  box-shadow: var(--sombra);
  color-scheme: light;
}
.acomp__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.acomp__titulo {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.25rem;
  color: var(--texto-papel);
}
.acomp__cerrar {
  border: none;
  background: transparent;
  font-size: 1.7rem;
  line-height: 1;
  color: var(--texto-papel-suave);
  cursor: pointer;
  padding: 0 0.2rem;
}
.acomp__cerrar:hover { color: var(--texto-papel); }

/* La linea fija: que es, donde queda lo que se dice, y a quien llamar. */
.acomp__aviso {
  margin: 0.4rem 0 0.8rem;
  font-size: 0.78rem;
  line-height: 1.4;
  color: var(--texto-papel-suave);
}

.acomp__mensajes {
  flex: 1 1 auto;
  min-height: 8rem;
  max-height: 45vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.25rem 0.1rem;
}
/*
  Burbujas minimas: la persona a la derecha, el acompañamiento a la izquierda.
  Sin avatares, sin animacion de "escribiendo". pre-wrap respeta los saltos
  de parrafo que la persona haya escrito.
*/
.acomp__burbuja {
  max-width: 88%;
  padding: 0.55rem 0.8rem;
  border-radius: 12px;
  font-size: 0.98rem;
  line-height: 1.5;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}
.acomp__burbuja--persona {
  align-self: flex-end;
  background: #e8dcc8;
  color: var(--texto-papel);
  border-bottom-right-radius: 4px;
}
.acomp__burbuja--asistente {
  align-self: flex-start;
  background: #fffdf9;
  border: 1px solid var(--papel-borde);
  color: var(--texto-papel);
  border-bottom-left-radius: 4px;
}
.acomp__vacio {
  margin: 0.6rem 0;
  font-size: 0.95rem;
  color: var(--texto-papel-suave);
  text-align: center;
}

.acomp__estado {
  margin: 0.5rem 0 0.4rem;
  min-height: 1.3em;
  font-size: 0.85rem;
  color: var(--texto-papel-suave);
  text-align: center;
}

.acomp__entrada {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
}
.acomp__mic {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid #c9b79c;
  background: #fffdf9;
  color: var(--terracota-osc);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
}
.acomp__mic svg { width: 1.4rem; height: 1.4rem; }
.acomp__mic:hover { border-color: var(--terracota-osc); }
/* Escuchando: se llena de terracota y late despacio. */
.acomp__mic--escuchando {
  background: var(--terracota-osc);
  color: #fff5ea;
  border-color: var(--terracota-osc);
  animation: acomp-pulso 1.6s ease-in-out infinite;
}
@keyframes acomp-pulso {
  0%, 100% { box-shadow: 0 0 0 0 rgba(160, 96, 56, 0.35); }
  50%      { box-shadow: 0 0 0 9px rgba(160, 96, 56, 0); }
}
.acomp__texto {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: 1rem;
  line-height: 1.4;
  padding: 0.55rem 0.7rem;
  border: 1px solid #c9b79c;
  border-radius: 8px;
  background: #fffdf9;
  color: var(--texto-papel);
  resize: none;
}
.acomp__texto:focus {
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
  border-color: var(--terracota);
}
.acomp__texto::placeholder { color: #806b52; opacity: 1; }
.acomp__enviar {
  flex: none;
  width: auto;
  margin: 0;
  padding: 0.6rem 0.9rem;
  font-size: 0.85rem;
}

.acomp__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
  font-size: 0.8rem;
  color: var(--texto-papel-suave);
}
.acomp__voz { display: flex; align-items: center; gap: 0.35rem; cursor: pointer; }
.acomp__borrar {
  border: none;
  background: transparent;
  color: var(--texto-papel-suave);
  font: inherit;
  font-size: 0.8rem;
  text-decoration: underline;
  cursor: pointer;
  padding: 0;
}
.acomp__borrar:hover { color: #8a3517; }

/* Mientras responde, o sin cupo, la entrada se apaga sin desaparecer. */
.acomp--ocupado .acomp__mic,
.acomp--ocupado .acomp__enviar,
.acomp--sin-cupo .acomp__mic,
.acomp--sin-cupo .acomp__enviar,
.acomp--sin-cupo .acomp__texto {
  opacity: 0.55;
  pointer-events: none;
}

.anf-contenido {
  flex: 1;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 2rem 1.25rem 3rem;
}

.anf-centro {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1.25rem;
}

.anf-footer {
  padding: 1.25rem;
  text-align: center;
  font-size: 0.85rem;
  color: var(--texto-suave);
  background: var(--panel);
  border-top: 1px solid var(--panel-borde);
}
.anf-footer nav { display: flex; gap: 1.25rem; justify-content: center; flex-wrap: wrap; margin-bottom: 0.5rem; }
.anf-footer a { color: var(--texto-suave); text-decoration: none; }
.anf-footer a:hover { color: var(--oro); }
.anf-footer p { margin: 0; }

/* ---------------------------------------------------------------- paneles */

.anf-panel {
  background: var(--papel);
  color: var(--texto-papel);
  border: 1px solid var(--papel-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 2rem;
  width: 100%;
}
.anf-panel--angosto { max-width: 26rem; }
/*
  El :not(.anf-boton) evita un choque que ya mordio tres veces: una regla de
  contenedor como ".anf-panel a" vale mas que la clase ".anf-boton" sola, asi
  que le pisaba al boton el color de la letra y quedaba texto oscuro sobre
  fondo terracota. Solo se veia bien al pasar el raton, porque
  ".anf-boton:hover" si tiene peso suficiente. Si se agrega otra regla de
  enlaces dentro de un contenedor, excluir los botones igual que aca.
*/
.anf-panel a:not(.anf-boton) { color: var(--terracota-osc); }
.anf-panel h1, .anf-panel h2 { color: var(--texto-papel); }

.anf-titulo { margin: 0 0 1rem; font-size: 1.6rem; }

/* La pregunta que encabeza un formulario, debajo del titulo de la pagina.
   Mas chica que el titulo y sin competir con el: es lo que hay que contestar,
   no el nombre de donde estas. */
.anf-subtitulo {
  margin: 0 0 0.6rem;
  font-size: 1.15rem;
  color: var(--texto-papel);
}

.anf-nota {
  font-size: 0.9rem;
  color: var(--texto-papel-suave);
  margin: 0.25rem 0 1rem;
}

/*
  Sobre papel la nota puede ir bastante mas oscura, y tiene que ir: con el
  tono suave quedaba en el gris mas bajo de la pantalla y se leia solo si uno
  ya sabia que decia. Es texto chico, y el chico necesita mas contraste, no
  menos.

  Va scoped a los dos contenedores de papel que existen —el panel y el modal
  de editar— y no a la clase suelta. La misma clase se usa DIRECTAMENTE sobre
  el marmol en descargar.php y planes.php, y ahi un cafe oscuro desapareceria:
  esos dos casos se quedan con el tono claro de arriba.
*/
.anf-panel .anf-nota,
.modal-dialog .anf-nota { color: #5c4128; }

/* --------------------------------------------------------------- formularios */

.anf-form { display: flex; flex-direction: column; }

.anf-form label {
  font-family: "EB Garamond", Georgia, serif;
  font-size: 0.9rem;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
  color: var(--texto-papel);
}

.anf-form input[type="text"],
.anf-form input[type="email"],
.anf-form input[type="password"],
.anf-form input[type="date"],
.anf-form select,
.anf-form textarea {
  font-family: inherit;
  font-size: 1rem;
  padding: 0.65rem 0.75rem;
  border: 1px solid #c9b79c;
  border-radius: 6px;
  background: #fffdf9;
  color: var(--texto-papel);
  width: 100%;
}

/*
  El marcador de posicion. El gris que pone el navegador por su cuenta cae muy
  abajo sobre este fondo casi blanco, y en el campo de la relacion el marcador
  es lo que explica que se espera ahi ("mi padre, mi hermana"). Se fija un tono
  propio: mas claro que el texto escrito, para que no se confundan, pero
  legible.
*/
.anf-form input::placeholder,
.anf-form textarea::placeholder {
  color: #806b52;
  opacity: 1;   /* Firefox se lo baja a 0.54 por su cuenta. */
}

.anf-form input:focus,
.anf-form select:focus,
.anf-form textarea:focus {
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
  border-color: var(--terracota);
}

.anf-form__pie {
  margin: 1.25rem 0 0;
  font-size: 0.9rem;
  text-align: center;
  color: var(--texto-papel-suave);
}

.anf-boton {
  display: inline-block;
  margin-top: 1.4rem;
  padding: 0.8rem 1.6rem;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-decoration: none;
  text-align: center;
  color: #fff8ee;
  background: var(--terracota);
  border: none;
  border-radius: 6px;
  cursor: pointer;
  transition: background-color 0.2s ease;
}
.anf-boton:hover { background: var(--terracota-osc); color: #fff8ee; }

.anf-boton--suave {
  background: transparent;
  color: var(--texto-papel);
  border: 1px solid #c9b79c;
}
.anf-boton--suave:hover { background: #efe3d0; color: var(--texto-papel); }

/*
  Para los botones que van sobre el marmol y no dentro de una tarjeta.
  El terracota funciona sobre papel claro, pero sobre la piedra oscura es un
  tono medio contra un fondo medio: el texto crema encima se lee con esfuerzo,
  sobre todo en el boton chico de la cabecera. Aca se invierte —papel claro,
  tinta oscura— que ademas es la regla del sitio: lo que pide una accion va
  sobre claro.

  OJO: no cambiar .anf-boton a secas por esto. En trece paginas ese boton vive
  DENTRO de un .anf-panel, que ya es claro, y un boton claro sobre panel claro
  desaparece.
*/
/*
  Sin halo.

  Llevaba "0 2px 12px rgba(0,0,0,.35)" y ahi esta el problema: una sombra
  proyectada solo se lee como relieve cuando cae sobre algo MAS CLARO que
  ella. Sobre el marmol oscuro no hay nada que oscurecer, asi que esos 12px
  de negro difuso no levantaban el boton: manchaban la piedra alrededor, y
  con las vetas detras parecia un borron.

  Lo que separa un boton de papel del marmol es su propio contraste, que ya
  es maximo. Queda un filo de oro tenue —para que el borde no se pierda
  justo donde pasa una veta clara— y una sombra corta y pegada, que apoya el
  canto de abajo sin ensuciar nada.
*/
.anf-boton--claro {
  background: var(--papel);
  color: var(--texto-papel);
  border: 1px solid rgba(201, 166, 102, 0.45);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}
.anf-boton--claro:hover {
  background: #fffaf2;
  color: var(--texto-papel);
  border-color: rgba(201, 166, 102, 0.7);
}

/* ------------------------------------------------ ver/ocultar la contraseña

  El envoltorio y el boton los crea el script del pie (includes/layout.php),
  no el marcado de cada formulario: asi cualquier campo de contraseña que se
  agregue en el futuro lo trae puesto sin que haya que acordarse.
*/
.anf-clave {
  position: relative;
  display: block;
  width: 100%;
}

/*
  El relleno a la derecha deja sitio para el ojo. Va con los dos selectores
  porque .anf-form input[type="password"] es mas especifico que .anf-clave
  input, y sin el primero el texto pasaria por debajo del boton.
*/
.anf-form .anf-clave input,
.anf-clave input {
  padding-right: 2.9rem;
}

.anf-clave__ojo {
  position: absolute;
  top: 50%;
  right: 0.4rem;
  transform: translateY(-50%);
  width: 2.1rem;
  height: 2.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  color: var(--texto-papel-suave);
  cursor: pointer;
}
.anf-clave__ojo:hover {
  background: #efe3d0;
  color: var(--texto-papel);
}
.anf-clave__ojo:focus-visible {
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
}
.anf-clave__ojo svg {
  width: 1.25rem;
  height: 1.25rem;
  display: block;
}

/* ----------------------------------------------------------------- avisos */

.anf-error {
  background: #f6e2d6;
  border-left: 3px solid #b5502a;
  color: #6d2d16;
  padding: 0.7rem 0.9rem;
  border-radius: 4px;
  margin: 0 0 1rem;
  font-size: 0.95rem;
}

.anf-aviso {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  padding: 0.7rem 1.25rem;
  background: rgba(160, 96, 56, 0.9);
  color: #fff5ea;
  font-size: 0.95rem;
}
.anf-aviso a { color: #fff5ea; font-weight: 600; }
.anf-aviso--suave { background: rgba(60, 42, 28, 0.85); }

/* -------------------------------------------------- el anfora con portada */

/*
  La persona pintada en el barro.

  La foto no asoma por una ventana: se funde con el vaso. Dos cosas lo hacen,
  y las dos van en .anf-portada__ventana:

   - mix-blend-mode: luminosity. La foto aporta la luz y el dibujo del anfora
     pone el color, asi que la cara sale en tonos de barro, como las figuras
     pintadas de las anforas griegas. Una foto de telefono saturada y una
     escaneada en blanco y negro quedan iguales.
   - mask-image con un degradado radial que se desvanece del 55% al 100% del
     radio: no hay borde, ni marco, ni recorte duro. Antes habia un clip-path
     de elipse mas un "marco" con degradado, y ese marco ademas tenia de cafe
     el cuadro entero de la tarjeta, porque su ultimo color se extendia fuera
     de la elipse. Se veia como un rectangulo oscuro detras de cada anfora.

  isolation: isolate en .anf-portada es imprescindible: sin el, la mezcla se
  hace tambien contra el marmol de la pagina y la foto se ve fuera del vaso.

  La zona pintada es la elipse inscrita en un cuadrado del 48% del cuadro
  centrado en (50%, 57%). Las mismas cifras viven en anfora_portada()
  (layout.php) y en el JS del listado: se mueven juntas.

  El contenedor es cuadrado porque anfora.webp es cuadrada (900x900): asi los
  porcentajes caen donde uno cree, sin el desfase que introduciria el
  object-fit al dejar franjas vacias.
*/
.anf-portada {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 1 / 1;
  isolation: isolate;
}

.anf-portada__vaso {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  z-index: 1;
  pointer-events: none;
  filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.45));
}

.anf-portada__ventana {
  position: absolute;
  inset: 0;
  z-index: 2;
  mix-blend-mode: luminosity;
  -webkit-mask-image: radial-gradient(ellipse 24% 24% at 50% 57%, #000 55%, transparent 100%);
          mask-image: radial-gradient(ellipse 24% 24% at 50% 57%, #000 55%, transparent 100%);
}

/*
  En gris y con algo mas de contraste ANTES de mezclar: la mezcla por
  luminosidad solo lee la luz de la foto, y una foto plana o algo oscura
  saldria como una mancha. El brillo extra compensa que el barro es oscuro.
*/
.anf-portada__foto {
  position: absolute;
  max-width: none;   /* pisa el img{max-width:100%} general */
  filter: grayscale(1) contrast(1.25) brightness(1.08);
}

/* ---------------------------------------------------------------- rejilla */

/*
  Dos por fila en el telefono, siempre.

  Estaba en minmax(210px, 1fr): en una pantalla de 414px, descontado el
  relleno del contenido, no caben dos columnas de 210 y quedaba UNA anfora por
  fila, enorme, con una sola visible por pantallazo. Con dos columnas fijas se
  ve el album completo de un vistazo, que es de lo que se trata la pagina.
*/
.anf-rejilla {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
}

@media (min-width: 620px) {
  .anf-rejilla {
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap: 1.75rem 1.5rem;
  }
}

/* La caja existe para poder poner el boton de encuadre encima de la tarjeta:
   la tarjeta entera es un enlace, y un boton dentro de un enlace no se puede. */
.anf-tarjeta-caja { position: relative; }

.anf-tarjeta {
  display: block;
  text-decoration: none;
  color: var(--texto);
  text-align: center;
}
.anf-tarjeta:hover .anf-portada { transform: translateY(-3px); }
.anf-portada { transition: transform 0.2s ease; }

/*
  El boton de encuadrar era un disco negro sobre cada anfora, compitiendo con
  ella. Ahora es un icono tenue; en pantallas con puntero solo aparece al
  pasar por encima de la tarjeta, o al enfocarlo con el teclado. En tactil no
  hay hover, asi que se queda, pero callado.
*/
.anf-tarjeta__encuadre {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 4;
  width: 2.2rem;
  height: 2.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  color: rgba(240, 230, 216, 0.55);
  background: transparent;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.7));
}
.anf-tarjeta__encuadre:hover,
.anf-tarjeta__encuadre:focus-visible { color: var(--oro); }
.anf-tarjeta__encuadre svg { width: 1.1rem; height: 1.1rem; }
@media (hover: hover) {
  .anf-tarjeta__encuadre { opacity: 0; transition: opacity 0.15s ease; }
  .anf-tarjeta-caja:hover .anf-tarjeta__encuadre,
  .anf-tarjeta__encuadre:focus-visible { opacity: 1; }
}

/*
  Aca estaban los estilos de un dialogo propio para encuadrar la portada: un
  anfora pequeña dentro de una tarjeta, con la foto arrastrable. Se retiro
  entero. El encuadre se hace ahora en el recortador a pantalla completa, el
  mismo que edita las fotos del album, donde se ve la foto entera.
*/

/*
  El texto bajo el anfora se lee como un pie de foto, no como una lista: el
  nombre, la relacion y los datos van juntos, y solo hay aire antes de la
  linea de "compartida con". Los parrafos de datos iban con el margen por
  defecto y quedaban cinco renglones sueltos.
*/
.anf-tarjeta__nombre {
  font-family: "Cinzel", Georgia, serif;
  font-size: 1rem;
  margin: 0.6rem 0 0.05rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/*
  La relacion de quien creo el anfora con la persona recordada: "mi padre".
  Va como segunda linea, pegada al nombre, en la letra del cuerpo y no en la
  de inscripcion: es una aclaracion, no parte del nombre. Sin cursiva y sin
  comillas —una cursiva la convertiria en una cita, y no lo es.

  Si el campo esta vacio, la pagina no dibuja este parrafo: no se reserva
  espacio ni queda un hueco entre el nombre y las fechas.
*/
.anf-tarjeta__relacion {
  font-size: 0.9rem;
  color: var(--texto-suave);
  margin: 0 0 0.3rem;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

.anf-tarjeta__dato {
  font-size: 0.85rem;
  color: var(--texto-suave);
  margin: 0;
  line-height: 1.45;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
}

/*
  El alcance del anfora: con quien esta compartida, o de quien es.

  Va fuera del <a> de la tarjeta —dentro de .anf-tarjeta-caja— porque cuando
  el anfora es propia esta linea es un enlace a compartir, y un enlace dentro
  de otro no es marcado valido. Por eso necesita su propio text-align: no
  hereda el del enlace.

  Se dibuja solo cuando dice algo, asi que no reserva espacio: una anfora
  propia y sin compartir no lleva esta linea, y esa ausencia es la respuesta.
*/
.anf-tarjeta__alcance {
  margin: 0.45rem 0 0;
  font-size: 0.85rem;
  line-height: 1.35;
  text-align: center;
  color: var(--texto-suave);
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.7);
  /* Un nombre largo parte de linea antes que desbordar la tarjeta, que en el
     telefono son dos columnas. */
  overflow-wrap: anywhere;
}
.anf-tarjeta__alcance a {
  color: var(--texto-suave);
  text-decoration: none;
}
.anf-tarjeta__alcance a:hover {
  color: var(--oro);
  text-decoration: underline;
}

/* ------------------------------------------------------ el panel de socios

  Es la unica pantalla del sitio que existe para MIRAR NUMEROS, no para mirar
  fotos. Por eso rompe una regla de la casa —los datos van sobre papel, en
  tablas— y respeta la otra: nada de color decorativo. El unico color que se
  usa dice algo (el estado de una cuenta) y el resto es tinta sobre papel.
*/

.anf-admin > h1 { margin-bottom: 0.25rem; }

.anf-admin__bloque { margin-top: 1.75rem; padding: 1.5rem 1.6rem; }
.anf-admin__bloque h2 {
  margin: 0 0 1rem;
  font-size: 1.15rem;
  color: var(--texto-papel);
}

/*
  Las cifras de arriba. Se reparten solas: en un telefono caben dos por fila,
  en un monitor las cinco. minmax con el minimo en 8.5rem evita la fila de una
  sola columna, que es como se ve mal un panel.
*/
.anf-cifras {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.9rem;
  margin-top: 1.5rem;
}

.anf-cifra {
  padding: 1.1rem 1.2rem;
  background: var(--papel);
  color: var(--texto-papel);
  border: 1px solid var(--papel-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}
.anf-cifra__valor {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.9rem;
  line-height: 1.1;
  color: var(--texto-papel);
}
.anf-cifra__rotulo {
  margin: 0.3rem 0 0;
  font-size: 0.9rem;
  font-weight: 600;
}
.anf-cifra__pie {
  margin: 0.15rem 0 0;
  font-size: 0.78rem;
  line-height: 1.35;
  color: #5c4128;
}

/* Las tablas. Sin bordes verticales: las columnas se separan solas con el
   aire, y las rayas horizontales bastan para seguir una fila con el dedo. */
.anf-tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
  color: var(--texto-papel);
}
.anf-tabla th,
.anf-tabla td {
  padding: 0.55rem 0.7rem 0.55rem 0;
  text-align: left;
  vertical-align: top;
  border-bottom: 1px solid var(--papel-borde);
}
.anf-tabla thead th {
  font-size: 0.75rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #5c4128;
  border-bottom-width: 2px;
}
.anf-tabla tbody th { font-weight: 600; }
.anf-tabla tfoot th,
.anf-tabla tfoot td { font-weight: 600; border-bottom: none; }
.anf-tabla tbody tr:last-child th,
.anf-tabla tbody tr:last-child td { border-bottom: none; }

/* Los numeros a la derecha y en cifras de ancho fijo: asi las unidades quedan
   alineadas y una columna se compara de un vistazo, que es para lo que esta. */
.anf-tabla__num {
  text-align: right;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.anf-tabla__nota { font-size: 0.8rem; color: #5c4128; }
.anf-tabla__baja { opacity: 0.55; }

/* Una tabla ancha se desplaza DENTRO de su panel; la pagina nunca. */
.anf-tabla-ancha { overflow-x: auto; }

/*
  Las tablas de rotulo y cifra se acotan.

  A ancho completo, "En un álbum ... 112" deja medio panel en blanco entre el
  nombre y el numero, y el ojo pierde la fila a mitad de camino. Con 32rem el
  par queda junto y la nota de la derecha, cuando la hay, sigue cabiendo.
  Las tablas de verdad anchas —cuentas y anforas— no llevan esta clase.
*/
.anf-tabla--datos { max-width: 32rem; }

/*
  El estado de una cuenta. El color es el dato, no un adorno: de un vistazo se
  ve cuantas estan al dia y cuantas vencidas. Van sobre fondo tenue y no en
  texto de color a secas, para que se distingan tambien sin ver bien el matiz.
*/
.anf-estado {
  display: inline-block;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  white-space: nowrap;
}
.anf-estado--activa        { background: #dde7d2; color: #33501f; }
.anf-estado--solo-lectura  { background: #f0e3c4; color: #6b5210; }
.anf-estado--solo-descarga { background: #f2ddc8; color: #7a4413; }
.anf-estado--bloqueada     { background: #f2d6cd; color: #7a2413; }

.anf-marca-staff {
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5c4128;
}

/*
  Las invitaciones que esperan respuesta, arriba del listado.

  Van sobre PAPEL y no sobre el marmol, siguiendo la regla del sitio: lo que
  pide una decision va sobre una tarjeta clara. Y ademas es lo unico de esta
  pagina que hay que contestar.

  Deliberadamente sin foto: mientras no se acepte no se ve nada del album, y
  este aviso no puede ser la rendija por la que se cuele una portada.
*/
.anf-invitaciones {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 2rem;
}

.anf-invitacion {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  padding: 1.1rem 1.25rem;
  background: var(--papel);
  color: var(--texto-papel);
  border: 1px solid var(--papel-borde);
  border-left: 3px solid var(--terracota);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
}

.anf-invitacion__texto {
  flex: 1 1 14rem;
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
}

/*
  Los dos botones no compiten: aceptar es el de siempre y "Ahora no" es el
  suave. No decir que si tiene que costar lo mismo que decirlo —esto es un
  album de duelo, no una suscripcion— pero tampoco parecer la salida
  principal.
*/
.anf-invitacion__botones {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.anf-invitacion__botones .anf-boton {
  padding: 0.55rem 1.1rem;
  font-size: 0.8rem;
}

/*
  Los titulos que parten el listado en "Mis ánforas" y "Compartidas conmigo".
  Solo aparecen cuando hay de las dos clases; ver dashboard.php.
*/
.anf-grupo {
  margin: 0 0 1.1rem;
  font-size: 1.05rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--texto-suave);
}
/*
  El aire de arriba lo pone el hermano anterior y no la clase: asi el primer
  titulo queda pegado al parrafo de la cabecera y el segundo despega de la
  rejilla que lo precede, sin necesitar un modificador ni un style suelto.
  No lleva text-shadow propio porque ".anf-contenido > h2" ya se lo da.
*/
.anf-rejilla + .anf-grupo { margin-top: 2.75rem; }

/* Texto suelto sobre el marmol necesita ayuda para leerse. */
.anf-contenido > h1,
.anf-contenido > h2,
.anf-contenido > p { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.65); }

/* --------------------------------- acciones de una foto y editor de recorte */

/*
  Panel inferior en vez de una fila de iconos sobre cada tarjeta: la grilla
  es de 3 columnas y en un telefono no caben cinco iconos por foto.
*/
.anf-hoja-fondo {
  position: fixed;
  inset: 0;
  z-index: 11000;
  background: rgba(0, 0, 0, 0.66);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.anf-hoja,
.anf-editor {
  background: var(--papel);
  color: var(--texto-papel);
  width: 100%;
  max-width: 30rem;
  max-height: 92vh;
  overflow-y: auto;
  padding: 1.25rem;
  border-radius: 14px 14px 0 0;
  box-shadow: 0 -4px 30px rgba(0, 0, 0, 0.5);
}

@media (min-width: 640px) {
  .anf-hoja-fondo { align-items: center; }
  .anf-hoja, .anf-editor { border-radius: 14px; }
}

.anf-hoja__vista {
  width: 100%;
  max-height: 34vh;
  object-fit: contain;
  border-radius: 8px;
  background: #e6dccb;
}

.anf-hoja__etiqueta {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin: 0.9rem 0 0.3rem;
}

.anf-hoja__texto {
  width: 100%;
  min-height: 3.5rem;
  font-family: inherit;
  font-size: 1rem;
  padding: 0.6rem;
  border: 1px solid #c9b79c;
  border-radius: 6px;
  background: #fffdf9;
  color: var(--texto-papel);
  resize: vertical;
}

.anf-hoja__fila {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.7rem;
}

.anf-hoja__fila button,
.anf-hoja__cerrar {
  flex: 1;
  font-family: inherit;
  font-size: 0.92rem;
  padding: 0.7rem 0.5rem;
  border: 1px solid #c9b79c;
  border-radius: 6px;
  background: #fffdf9;
  color: var(--texto-papel);
  cursor: pointer;
}
.anf-hoja__fila button:hover { background: #efe3d0; }
.anf-hoja__fila button:disabled { opacity: 0.6; cursor: default; }

.anf-hoja__peligro { color: #8a3517; border-color: #d8b4a2; }

.anf-hoja__cerrar {
  width: 100%;
  margin-top: 1rem;
  background: var(--terracota);
  border-color: var(--terracota);
  color: #fff8ee;
}

/* ------------------------------------------------- recortar una foto -----

  El recortador, compartido entre editar una foto y encuadrar una portada.

  Aca hubo dos intentos anteriores. El primero arrastraba un rectangulo POR
  ENCIMA de la foto: se explica bien en un manual y funciona pesimo con el
  dedo, porque hay que acertar el borde de un marco que en un telefono mide
  poco. El segundo mostraba UNICAMENTE el trozo recortado, asi que no se veia
  que se estaba dejando fuera: se encuadraba a ciegas.

  Este hace lo que hace el sitio hermano: la ventana queda fija en el centro,
  la foto se mueve detras, y lo que queda afuera se sigue viendo atenuado.
*/

.rec-fondo {
  position: fixed;
  inset: 0;
  z-index: 13000;
  display: flex;
  background: rgba(10, 6, 3, 0.96);
}

.rec {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  color: var(--texto);
}

.rec__barra {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.8rem 1rem;
  flex: none;
}

.rec__titulo {
  margin: 0;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-align: center;
}

/* La escena: todo el espacio que queda. La foto se dibuja aca dentro, en
   pixeles, porque el calculo del recorte necesita medidas reales. */
.rec__escena {
  position: relative;
  flex: 1;
  min-height: 0;
  overflow: hidden;
  touch-action: none;   /* si no, el dedo desplaza la pagina */
  cursor: grab;
  user-select: none;
  -webkit-user-select: none;
}
.rec__escena:active { cursor: grabbing; }

.rec__foto {
  position: absolute;
  max-width: none;      /* pisa el img{max-width:100%} general */
  pointer-events: none;
}

/*
  El velo. Es una capa que cubre la escena entera, con un agujero del tamaño
  de la ventana hecho con una sombra enorme hacia afuera. Asi la foto se ve
  atenuada alrededor y nitida dentro, sin tener que dibujar cuatro
  rectangulos.
*/
.rec__marco {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.rec__hueco {
  box-shadow: 0 0 0 100vmax rgba(10, 6, 3, 0.72);
  outline: 1px solid rgba(240, 230, 216, 0.85);
  border-radius: 2px;
}

/* La ventana ovalada de la portada. La sombra del velo sigue al
   border-radius, asi que el agujero nitido queda en elipse: lo que se ve es
   exactamente lo que despues asoma por la abertura del anfora. */
.rec__hueco--ovalo { border-radius: 50%; }

.rec__mandos {
  flex: none;
  width: 100%;
  max-width: 40rem;
  margin: 0 auto;
  padding: 0.9rem 1rem 1.4rem;
}

.rec__fila {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.rec__btn {
  flex: 0 1 auto;
  min-height: 2.6rem;
  padding: 0.5rem 0.85rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--texto);
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(201, 166, 102, 0.28);
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}
.rec__btn:hover { background: rgba(255, 255, 255, 0.18); }

/* La proporcion elegida se ve. Sin esto hay que probar a ciegas cual esta. */
.rec__btn--activo {
  color: #2b1d12;
  background: var(--papel);
  border-color: var(--papel);
}

.rec__btn--principal {
  color: #fff8ee;
  background: var(--terracota);
  border-color: var(--terracota);
}
.rec__btn--principal:hover { background: var(--terracota-osc); }

.rec__zoom {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.9rem;
  font-size: 0.88rem;
  color: var(--texto-suave);
}
.rec__zoom input { flex: 1; accent-color: var(--terracota); }

.rec__ayuda {
  margin: 0.7rem 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--texto-suave);
}

/* ------------------------------- formularios heredados (sin Bootstrap CSS) */

/*
  perfil_new.php carga el JS de Bootstrap (para abrir el modal) pero NUNCA su
  CSS. Las clases del marcado — .form-control, .form-select, .form-label,
  .mb-3, .d-flex, .gap-2, .text-capitalize — no existian en ninguna hoja, asi
  que el modal de editar el anfora se veia asi en el telefono:

    - los <label> heredaban el color del texto sobre marmol (crema claro) y
      quedaban invisibles sobre la tarjeta de papel;
    - los <input> y <select> quedaban nativos y, con color-scheme en dark, el
      navegador los pintaba negros;
    - los tres selectores de fecha se apilaban en vez de ir en fila.

  Se define aca lo minimo, con el lenguaje del sitio, en vez de sumar el CSS
  completo de Bootstrap por diez reglas. Si alguna vez se carga Bootstrap de
  verdad, este bloque se puede borrar entero.
*/
.modal-dialog,
.anf-panel,
.anf-legal,
.anf-hoja,
.anf-editor {
  color-scheme: light;
}

/* La tarjeta es de papel: todo lo que va dentro se escribe en tinta oscura. */
.modal-dialog { color: var(--texto-papel); }

.modal-dialog .form-label,
.modal-dialog label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  margin: 0 0 0.35rem;
  color: var(--texto-papel-suave);
}

.modal-dialog .form-control,
.modal-dialog .form-select,
.modal-dialog input[type="text"],
.modal-dialog select,
.modal-dialog textarea {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.35;
  padding: 0.6rem 0.7rem;
  border: 1px solid var(--papel-borde);
  border-radius: 6px;
  background: #fffdf9;
  color: var(--texto-papel);
}

.modal-dialog textarea { min-height: 6.5rem; resize: vertical; }

/* El mismo marcador de posicion que en .anf-form: el campo de la relacion vive
   en los dos formularios y tiene que verse igual en ambos. */
.modal-dialog .form-control::placeholder,
.modal-dialog input::placeholder,
.modal-dialog textarea::placeholder {
  color: #806b52;
  opacity: 1;
}

.modal-dialog .form-control:focus,
.modal-dialog .form-select:focus,
.modal-dialog textarea:focus {
  outline: 2px solid var(--terracota);
  outline-offset: 1px;
  border-color: var(--terracota);
}

/* Utilidades de Bootstrap que el marcado usa y que no venian de ninguna parte. */
.modal-dialog .mb-3 { margin-bottom: 0; }
.modal-dialog .d-block { display: block; }
.modal-dialog .d-flex { display: flex; }
.modal-dialog .gap-2 { gap: 0.5rem; }
.modal-dialog .text-capitalize { text-transform: capitalize; }

/*
  Dia / mes / anio, en fila. Se reparten el ancho disponible en vez de llevar
  medidas fijas: el min-width en 0 es lo que les permite encogerse dentro de
  un flex, que por defecto no baja del ancho de su contenido.
*/
.modal-dialog .d-flex > .form-select {
  flex: 1 1 0;
  min-width: 0;
}

.modal-dialog .btn {
  font-size: 0.9rem;
  font-weight: 600;
  padding: 0.7rem 1.2rem;
  border: 1px solid transparent;
  border-radius: 6px;
  background: var(--terracota);
  color: #fff8ee;
  cursor: pointer;
}
.modal-dialog .btn-secondary {
  background: transparent;
  color: var(--texto-papel);
  border-color: var(--papel-borde);
}

.modal-footer {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

@media (max-width: 600px) {
  /* Botones a lo ancho: el pulgar no tiene que apuntar. */
  .modal-dialog .modal-footer .btn { flex: 1 1 auto; }
}

/* ------------------------------------------------------- paginas legales */

/*
  Texto largo para leer: tarjeta de papel claro sobre el marmol, ancho de
  lectura acotado y bastante aire entre parrafos. Son documentos que la gente
  abre cuando desconfia de algo, asi que tienen que verse legibles y no
  escondidos.
*/
.anf-legal {
  position: relative;   /* para el aspa de cerrar */
  max-width: 44rem;
  margin: 0 auto;
  background: var(--papel);
  color: var(--texto-papel);
  border: 1px solid var(--papel-borde);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 2.5rem 2rem 3rem;
}

@media (max-width: 640px) {
  .anf-legal { padding: 1.75rem 1.25rem 2.25rem; }
}

/*
  Cerrar una pagina legal.
  Son textos largos a los que se entra de paso, casi siempre desde el pie de
  otra pagina, y sin esto la unica salida visible era el boton de atras del
  navegador. El aspa arriba para quien la busca ahi por costumbre, y el boton
  al final para quien termino de leer y no quiere volver a subir.
*/
.anf-legal__aspa {
  position: absolute;
  top: 0.9rem;
  right: 0.9rem;
  width: 2.4rem;
  height: 2.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--texto-papel-suave);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 50%;
  text-decoration: none;
  cursor: pointer;
}
.anf-legal__aspa:hover {
  background: #ece0cd;
  border-color: var(--papel-borde);
  color: var(--texto-papel);
}

.anf-legal__pie {
  margin-top: 2.5rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--papel-borde);
  text-align: center;
}
.anf-legal__pie .anf-boton { margin-top: 0; }

/* El titulo no puede quedar debajo del aspa en pantallas angostas. */
@media (max-width: 480px) {
  .anf-legal > h1:first-of-type { padding-right: 2.4rem; }
}

.anf-legal h1 {
  font-size: clamp(1.5rem, 4.5vw, 2rem);
  margin: 0 0 0.4rem;
  color: var(--texto-papel);
}

.anf-legal h2 {
  font-size: 1.15rem;
  margin: 2.25rem 0 0.6rem;
  color: var(--texto-papel);
}

.anf-legal p,
.anf-legal li { line-height: 1.75; }
.anf-legal p { margin: 0 0 1rem; }
.anf-legal ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.anf-legal li { margin-bottom: 0.6rem; }

.anf-legal__fecha {
  font-size: 0.9rem;
  color: var(--texto-papel-suave);
  margin: 0 0 2rem;
}

.anf-legal a:not(.anf-boton) { color: var(--terracota-osc); }

/* El boton de opciones de cada tarjeta de la galeria. */
.card-menu-btn {
  background: rgba(20, 13, 8, 0.72);
  color: #f0e6d8;
  border: none;
  border-radius: 6px;
  width: 30px;
  height: 30px;
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
}
.card-menu-btn:hover { background: rgba(20, 13, 8, 0.92); }