/* Tema gótico: siempre oscuro (negro, vino y oro viejo). */
:root {
  --fondo: #0d090c;
  --superficie: #17101a;
  --superficie-2: #22161f;
  --borde: #3d2a2e;
  --texto: #ece3d6;
  --texto-2: #a8998c;
  --oro: #c9a24a;
  --oro-claro: #e3c77d;
  --oro-texto: #120c0e;
  --vino: #6e1423;
  --error: #e07a7a;
  --sombra: 0 10px 28px rgb(0 0 0 / 0.6);
  --radio: 6px;
  --gotica: "Grenze Gotisch", "UnifrakturMaguntia", Georgia, serif;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; color: var(--texto);
  background:
    radial-gradient(ellipse at 50% -10%, rgb(110 20 35 / 0.35), transparent 60%),
    var(--fondo);
  background-attachment: fixed;
  font: 17px/1.6 "Cormorant Garamond", Georgia, "Times New Roman", serif;
  padding-bottom: env(safe-area-inset-bottom);
}
h1, h2, h3, .marca, .pie { font-family: var(--gotica); font-weight: 500; letter-spacing: 0.01em; }
h1 { font-size: 2.3rem; line-height: 1.1; margin: 0.2rem 0 0.6rem; color: var(--oro-claro); }
h2 { font-size: 1.6rem; margin: 0 0 0.3rem; color: var(--oro-claro); }
h3 { font-size: 1.35rem; margin: 0 0 0.2rem; }
p { margin: 0.45rem 0; }

.arriba { max-width: 640px; margin: 0 auto; padding: 14px 16px 0; }
.marca { color: var(--oro); font-size: 1.15rem; letter-spacing: 0.04em; }
main { max-width: 640px; margin: 0 auto; padding: 8px 16px 40px; }

.sobre { color: var(--oro); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; margin: 14px 0 0; }
.intro, .sub { color: var(--texto-2); }
.opc { color: var(--texto-2); font-weight: 400; }
.letra-pequena { color: var(--texto-2); font-size: 0.82rem; }
.centrado { text-align: center; }

/* formulario */
.portada { padding: 18px 0 6px; }
.formulario { display: grid; gap: 16px; margin-top: 12px; }
.formulario label { display: grid; gap: 6px; font-weight: 600; }
.formulario input {
  font: inherit; font-weight: 400; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 12px 14px; min-height: 48px; width: 100%;
}
.formulario input:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.error { color: var(--error); margin: 0; }

.boton {
  font: inherit; font-weight: 600; cursor: pointer; border: 0; border-radius: 999px;
  background: var(--oro); color: var(--oro-texto); padding: 13px 22px; min-height: 48px;
}
.boton.secundario { background: transparent; color: var(--texto); border: 1px solid var(--borde); display: block; margin: 16px auto 0; }
.enlace { font: inherit; background: none; border: 0; color: var(--oro); text-decoration: underline; cursor: pointer; padding: 8px; }

/* bloques de la lectura */
.cabecera { padding-top: 6px; }
.bloque {
  position: relative;
  background: linear-gradient(180deg, var(--superficie-2), var(--superficie));
  border: 1px solid var(--borde); border-radius: var(--radio);
  outline: 1px solid color-mix(in srgb, var(--oro) 25%, transparent); outline-offset: -6px;
  padding: 20px 18px; margin-top: 18px;
}
.bloque h2::before, .bloque h2::after { content: "✠"; font-family: Georgia, serif; font-size: 0.7em; color: var(--vino); vertical-align: middle; margin: 0 8px; }
.bloque h2::before { margin-left: 0; }
.simbolo { font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", serif; font-size: 0.8em; color: var(--oro); }
.tirada { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.hueco { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.posicion { color: var(--texto-2); font-size: 0.78rem; line-height: 1.25; margin: 0; min-height: 2.5em; }
.mensajes { display: grid; gap: 12px; margin-top: 14px; }
.mensaje { background: var(--superficie-2); border-radius: 12px; padding: 12px 14px; animation: aparecer 0.4s ease; }
.mensaje .posicion { min-height: 0; }
.mensaje strong { color: var(--texto); }
.fija { display: flex; gap: 16px; align-items: flex-start; margin-top: 12px; }
.fija > div { flex: 1; min-width: 0; }
.claves { color: var(--oro); font-size: 0.88rem; margin-top: 0; }
.como { margin-top: 8px; color: var(--texto-2); font-size: 0.88rem; }
.como summary { cursor: pointer; color: var(--oro); }
.sintesis { border-left: 3px solid var(--oro); padding: 4px 0 4px 14px; animation: aparecer 0.4s ease; }
.sintesis p { margin: 0.35rem 0; }
.fija + .fija { margin-top: 18px; }
.formulario.fila { grid-template-columns: 1fr auto; align-items: center; gap: 10px; }
@media (max-width: 420px) { .formulario.fila { grid-template-columns: 1fr; } }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.respuesta { margin-top: 16px; }
.veredicto { font-family: var(--gotica); font-size: 2.4rem; line-height: 1; margin: 0 0 4px; }
.v-si { color: var(--oro-claro); }
.v-no { color: #d0606f; }
.v-quizas { color: var(--texto-2); }
/* perfil ampliado */
.formulario select {
  font: inherit; color: var(--texto); background: var(--superficie);
  border: 1px solid var(--borde); border-radius: 12px; padding: 10px 12px; min-height: 48px; width: 100%;
}
.formulario select:focus { outline: 2px solid var(--oro); outline-offset: 1px; }
.mas { border: 1px solid var(--borde); border-radius: var(--radio); padding: 12px 14px; display: grid; gap: 14px; }
.mas[open] { padding-bottom: 16px; }
.mas summary { cursor: pointer; color: var(--oro-claro); font-weight: 600; }
.mas > label { display: grid; gap: 6px; font-weight: 600; margin-top: 12px; }

/* Madame Selene */
.voz { margin-top: 16px; display: grid; gap: 12px; }
.voz > p { margin: 0; font-size: 1.08rem; font-style: italic; }
.voz-cabecera { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.firma { font-family: var(--gotica); color: var(--oro); font-size: 1.15rem; margin: 0; font-style: normal !important; }
.voz-cabecera .enlace { padding: 4px 8px; }
.ritual .voz { margin-bottom: 14px; }
.opciones-animo { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.opciones-animo .boton { margin: 0; width: 100%; }
.pensando p { color: var(--texto-2); font-style: italic; animation: latido 1.2s ease-in-out infinite; }
@keyframes latido { 50% { opacity: 0.35; } }
.recien p[data-leer] { opacity: 0; animation: aparecer 0.6s ease forwards; animation-delay: calc(var(--i, 0) * 0.7s); }
.historial { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 8px; }
.historial li { display: grid; grid-template-columns: 6.5em 1fr; gap: 10px; border-bottom: 1px solid var(--borde); padding-bottom: 8px; }
.h-fecha { color: var(--texto-2); }
/* Carta invertida: la lámina entera (con su marco) gira 180°. */
.carta.invertida .lamina img { transform: rotate(180deg); }
.inv-etq {
  font-family: "Cormorant Garamond", Georgia, serif; font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  color: #e9a3ae; border: 1px solid currentColor; border-radius: 99px; padding: 0 7px; margin-left: 4px; vertical-align: middle; white-space: nowrap;
}
.mas > label.casilla { display: flex; gap: 10px; align-items: flex-start; font-weight: 600; }
.casilla input { width: 20px; height: 20px; margin-top: 3px; accent-color: var(--oro); flex: none; }
/* En todos los formularios, la casilla va en la misma línea que su texto. */
.formulario label.casilla { display: flex; gap: 10px; align-items: flex-start; }
.formulario .casilla input { width: 20px; height: 20px; min-height: 0; padding: 0; }

/* Escoge tu suerte */
.ancho-suerte { display: block; margin: 16px auto 0; }
.abanico {
  --wa: clamp(40px, 13vw, 62px);
  position: relative; height: calc(var(--wa) * 3.3); margin: 14px auto 4px; max-width: 100%;
}
/* Al girar sobre un punto por debajo, las cartas de los extremos bajan: se apoyan más arriba para no salirse. */
.carta-abanico {
  --w: var(--wa);
  position: absolute; left: calc(50% - var(--wa) / 2); bottom: calc(var(--wa) * 0.9);
  width: var(--wa); aspect-ratio: 5 / 9; padding: 0; border: 0; background: none; cursor: pointer;
  transform-origin: 50% 250%; transform: rotate(0deg);
  transition: transform 0.7s cubic-bezier(0.2, 0.8, 0.2, 1) calc(var(--k) * 20ms), opacity 0.35s;
}
.carta-abanico .dorso { transform: none; box-shadow: 0 4px 12px rgb(0 0 0 / 0.6); }
.abanico.abierto .carta-abanico { transform: rotate(var(--ang)); transition-delay: calc(var(--k) * 20ms), 0s; }
.abanico.abierto .carta-abanico:not(:disabled):hover,
.abanico.abierto .carta-abanico:not(:disabled):focus-visible { transform: rotate(var(--ang)) translateY(calc(var(--wa) * -0.3)); transition-delay: 0s; }
.carta-abanico:focus-visible { outline: none; }
.carta-abanico:focus-visible .dorso { outline: 2px solid var(--oro-claro); outline-offset: 2px; }
.abanico.abierto .carta-abanico.elegida { transform: rotate(var(--ang)) translateY(calc(var(--wa) * -1.3)); opacity: 0; pointer-events: none; transition-delay: 0s; }
.abanico.completo .carta-abanico:not(.elegida) { opacity: 0.35; cursor: default; }
.huecos-suerte { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 14px; }
.hueco-suerte { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; }
.hueco-carta { min-height: calc(84px * 9 / 5); display: grid; place-items: center; }
.hueco-carta .carta { animation: aparecer 0.4s ease; }
.hueco-vacio { width: 84px; aspect-ratio: 5 / 9; border: 1px dashed var(--borde); border-radius: 7px; }
.fila-suerte { display: flex; flex-wrap: wrap; gap: 10px 16px; justify-content: center; align-items: center; margin-top: 16px; }
.fila-suerte .boton.secundario { margin: 0; }
.voz.retraso .recien p[data-leer] { animation-delay: calc(0.8s + var(--i, 0) * 0.7s); }
@media (prefers-reduced-motion: reduce) { .carta-abanico { transition: none; } }
@media (prefers-reduced-motion: reduce) { .recien p[data-leer] { opacity: 1; animation: none; } .pensando p { animation: none; } }
@keyframes aparecer { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* cartas */
.carta {
  --w: 100px;
  position: relative; width: var(--w); max-width: 100%; aspect-ratio: 5 / 9; flex: none;
  padding: 0; border: 0; background: none; cursor: default; perspective: 800px; font: inherit; color: inherit;
}
.carta[data-accion] { cursor: pointer; }
.carta.tam-s { --w: 84px; }
.cara {
  position: absolute; inset: 0; border-radius: calc(var(--w) * 0.08); backface-visibility: hidden;
  transition: transform 0.45s ease; box-shadow: var(--sombra);
}
/* frente: la carta del mazo de Arcano (2:3, con su propio marco dorado) y, debajo, una placa con el nombre */
.frente {
  display: flex; flex-direction: column; overflow: hidden;
  background: linear-gradient(160deg, #2a1a1e, #0f0a0c);
  border: 1px solid var(--oro);
}
.lamina { position: relative; flex: none; aspect-ratio: 2 / 3; overflow: hidden; background: #0d090c; }
.lamina img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pie {
  flex: 1; font-size: calc(var(--w) * 0.12); color: var(--oro-claro); line-height: 1.05; text-align: center;
  padding: 0 calc(var(--w) * 0.05); display: grid; place-items: center;
  border-top: 1px solid color-mix(in srgb, var(--oro) 55%, #000);
}
/* dorso: el de la plantilla del mazo (herramientas/plantilla-carta/dorso.html), en 5:9 como la carta con su placa.
   Es simétrico al girarlo 180°: no delata si la carta va a salir invertida. */
.dorso {
  transform: rotateY(180deg);
  background: #0b0609 url("cartas/dorso.webp") center / 100% 100% no-repeat;
  border: 1px solid var(--oro);
}
.carta.oculta .frente { transform: rotateY(-180deg); }
.carta.oculta .dorso { transform: rotateY(0deg); }
.carta[data-accion]:focus-visible { outline: 2px solid var(--oro); outline-offset: 4px; border-radius: 10px; }
@media (prefers-reduced-motion: reduce) { .cara, .mensaje { transition: none; animation: none; } }
/* compatibilidad */
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.chip {
  font: inherit; font-size: 0.92rem; color: var(--texto); background: var(--superficie-2);
  border: 1px solid var(--borde); border-radius: 999px; padding: 6px 14px; min-height: 40px; cursor: pointer;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.chip.activo { border-color: var(--oro); color: var(--oro-claro); box-shadow: inset 0 0 0 1px var(--oro); }
.chip.nuevo { background: transparent; color: var(--oro); border-style: dashed; }
.chip:focus-visible { outline: 2px solid var(--oro); outline-offset: 2px; }
#compat .posicion { overflow-wrap: anywhere; }
.afinidad { text-align: center; margin-top: 16px; }
.afinidad .sobre { margin: 0 0 4px; }
.afinidad .veredicto { color: var(--oro-claro); font-size: 2rem; }
.lunas { color: var(--oro); letter-spacing: 0.35em; margin: 2px 0 0; font-size: 0.9rem; }
.lunas span { color: var(--borde); }
.apertura p { margin: 0; font-size: 1.08rem; font-style: italic; }
#compat .voz.retraso .recien p[data-leer] { animation-delay: calc(0.8s + var(--i, 0) * 0.45s); }
/* Tu cielo */
.constelacion { margin: 12px 0 0; text-align: center; }
.constelacion figcaption { color: var(--texto-2); font-size: 0.85rem; margin-top: 4px; }
.estrellas {
  width: 100%; max-width: 420px; height: auto; display: block; margin: 0 auto; border-radius: 12px;
  background: radial-gradient(ellipse at 50% 40%, #1d1430 0%, #0d0a12 75%);
  border: 1px solid var(--borde);
}
.estrellas .trazos line { stroke: var(--oro); stroke-width: 1; opacity: 0.45; stroke-linecap: round; }
.estrellas .astros circle { fill: #f6ecd0; filter: drop-shadow(0 0 3px rgb(246 236 208 / 0.8)); animation: titilar 3.2s ease-in-out infinite; animation-delay: var(--d, 0s); }
@keyframes titilar { 0%, 100% { opacity: 1; } 50% { opacity: 0.55; } }
.planetas { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 0; font-size: 0.92rem; }
.planetas li {
  display: grid; grid-template-columns: 1.3rem 4.4rem 1fr 1fr; grid-template-areas: "sim nom sig hoy" ". . arc arc";
  gap: 2px 8px; align-items: baseline; padding: 8px 0; border-bottom: 1px solid var(--borde);
}
.planetas .p-sim { grid-area: sim; color: var(--oro); font-family: "Segoe UI Symbol", "Noto Sans Symbols", "DejaVu Sans", serif; }
.planetas .p-nom { grid-area: nom; font-weight: 600; }
.planetas .p-sig { grid-area: sig; }
.planetas .p-hoy { grid-area: hoy; color: var(--texto-2); }
.planetas .p-arc { grid-area: arc; color: var(--oro); font-size: 0.82rem; }
.planetas .p-cab { color: var(--texto-2); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0; }
.planetas .p-cab span:nth-child(4) { display: none; }
.planetas .inv-etq { font-size: 0.7rem; }
@media (prefers-reduced-motion: reduce) { .estrellas .astros circle { animation: none; } }

/* Pantallas estrechas (móviles de 320 px, plegables cerrados): las tres cartas se encogen para caber.
   92px = márgenes de la página (2 × 16) + relleno del bloque (2 × 18) + borde + huecos entre cartas. */
.tirada, .huecos-suerte { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tirada .carta { --w: min(100px, calc((100vw - 92px) / 3)); }
.huecos-suerte { --ws: min(84px, calc((100vw - 92px) / 3)); }
.huecos-suerte .carta.tam-s { --w: var(--ws); }
.hueco-vacio { width: var(--ws, 84px); }
.hueco-carta { min-height: calc(var(--ws, 84px) * 19 / 11); }
@media (max-width: 340px) {
  .planetas { font-size: 0.84rem; }
  .planetas li { grid-template-columns: 1.1rem 3.7rem minmax(0, 1fr) minmax(0, 1fr); gap: 2px 6px; }
}
/* Si una etiqueta de posición ocupa tres líneas, las tres cartas siguen alineadas. */
@media (max-width: 380px) {
  .tirada .posicion, .huecos-suerte .posicion { min-height: 3.75em; display: flex; align-items: flex-end; justify-content: center; }
}

/* Letra muy grande (Android aplica el tamaño de letra del sistema, hasta el 200 %): la tabla de planetas
   pasa a una ficha por planeta. Se mide en em del propio contenedor, así que sólo salta con letra grande. */
.planetas { container-type: inline-size; container-name: planetas; }
@container planetas (max-width: 15em) {
  .planetas .p-cab { display: none; }
  .planetas li { grid-template-columns: 1.4em minmax(0, 1fr); grid-template-areas: "sim nom" ". sig" ". hoy" ". arc"; }
  .planetas .p-sig::before { content: "Al nacer: "; color: var(--texto-2); }
  .planetas .p-hoy:not(:empty)::before { content: "Hoy: "; color: var(--texto-2); }
  .planetas li > span { min-width: 0; overflow-wrap: anywhere; }
}
/* Una palabra larga en un título («Compatibilidad») no ensancha la página con la letra muy grande. */
h1, h2, h3 { overflow-wrap: break-word; hyphens: auto; }
/* Los títulos ya son grandes: con la letra del sistema muy grande crecen hasta el ancho de la pantalla, no más.
   Las etiquetas bajo las tres cartas, igual (si no, el nombre de la otra persona se parte letra a letra). */
h1 { font-size: min(2.3rem, 10.5vw); }
h2 { font-size: min(1.6rem, 7.2vw); }
.tirada .posicion, .huecos-suerte .posicion { font-size: min(0.78rem, 4.2vw); }

/* Fecha y hora con desplegables (ver campoFecha y campoHora en app.js) */
.formulario fieldset { border: 0; padding: 0; margin: 0; min-width: 0; display: grid; gap: 6px; }
.formulario legend { font-weight: 600; padding: 0; margin-bottom: 6px; }
.mas > fieldset { margin-top: 12px; }
.fecha-fila { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.5fr) minmax(0, 1fr); gap: 8px; }
.hora-fila { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto; gap: 8px; align-items: stretch; }
.campo-hora .letra-pequena { margin: 2px 0 0; }
.ampm { display: flex; border: 1px solid var(--borde); border-radius: 12px; overflow: hidden; min-height: 48px; background: var(--superficie); }
.formulario .ampm label { display: flex; position: relative; gap: 0; cursor: pointer; }
.formulario .ampm input { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0; margin: 0; padding: 0; opacity: 0; cursor: pointer; }
.ampm span { display: grid; place-items: center; padding: 0 12px; color: var(--texto-2); font-weight: 600; white-space: nowrap; }
.ampm label + label span { border-left: 1px solid var(--borde); }
.ampm input:checked + span { background: var(--oro); color: var(--oro-texto); }
.ampm input:focus-visible + span { outline: 2px solid var(--oro-claro); outline-offset: -3px; }
@media (max-width: 340px) {
  .hora-fila { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .ampm { grid-column: 1 / -1; }
  .ampm label { flex: 1; }
  .ampm span { flex: 1; }
}
@media (max-width: 340px) {
  .fecha-fila { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.45fr) minmax(0, 1.05fr); gap: 6px; }
  .fecha-fila select, .hora-fila select { padding-left: 9px; padding-right: 4px; }
}

/* Desplegables con flecha propia (la nativa ocupa medio desplegable en pantallas estrechas y cambia en cada móvil). */
.formulario select, .ajustes select {
  -webkit-appearance: none; appearance: none; padding-right: 32px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23e6ad4e' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 11px 8px;
}
.fecha-fila select, .hora-fila select { padding-right: 24px; background-position: right 8px center; }
@media (max-width: 340px) {
  .fecha-fila select, .hora-fila select { padding-left: 8px; padding-right: 18px; background-position: right 6px center; background-size: 9px 7px; }
}
/* Si el hueco es muy estrecho (compatibilidad en un plegable cerrado), el año baja a otra línea:
   arriba día y mes, abajo el año. Se mide el ancho del propio campo, no el de la pantalla. */
.campo-fecha { container-type: inline-size; }
@container (max-width: 14em) {
  .fecha-fila { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr); }
  .fecha-fila select:last-child { grid-column: 1 / -1; }
}

/* Aviso diario: la hora se apaga mientras el aviso está desactivado. */
.formulario fieldset:disabled { opacity: 0.5; }
/* Compatibilidad: lo que no cambia de un día a otro, plegado bajo «Para hoy» (abierto el primer día) */
.como.compat-fijo { font-size: inherit; color: inherit; margin-top: 14px; }
.compat-fijo > summary { font-size: 0.95rem; margin-bottom: 4px; }
.compat-fijo > article { margin-top: 12px; }

/* Tu espejo (Historial) */
.espejo p { margin: 0.45rem 0; }
.espejo-animos { list-style: none; padding: 0; margin: 12px 0 14px; display: grid; gap: 6px; }
.espejo-animos li { display: grid; grid-template-columns: 7.5em 1fr 1.6em; align-items: center; gap: 10px; font-size: 0.95rem; }
.espejo-barra { height: 8px; border-radius: 99px; background: linear-gradient(90deg, var(--oro) var(--p), color-mix(in srgb, var(--oro) 14%, transparent) var(--p)); }
.espejo-animos li span:last-child { color: var(--texto-2); text-align: right; }
/* Tiradas temáticas */
.tema .centrado .boton { margin-top: 18px; }