@import url('https://fonts.googleapis.com/css2?family=Atkinson+Hyperlegible:ital,wght@0,400;0,700;1,400&family=Caprasimo&display=swap');

:root {
  --pino: #0F2A24;
  --pino-2: #163a31;
  --pino-3: #24503f;
  --vela: #F2B544;
  --vela-suave: #f7d58f;
  --farol: #C8342B;
  --papel: #FBF3E0;
  --salvia: #A9C2B4;
  --texto: #F6EEDC;
  --ok: #7fc79a;
  --sobre-acento: #2a1d05;
  --tinta-marco: #5b4e33;
  --radio-s: 10px;
  --radio-m: 16px;
  --display: 'Caprasimo', Georgia, serif;
  --cuerpo: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(ellipse 120% 60% at 50% -10%, var(--pino-3) 0%, transparent 60%),
    var(--pino);
  color: var(--texto);
  font-family: var(--cuerpo);
  font-size: 17px;
  line-height: 1.5;
}
a { color: var(--vela); }
h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-family: var(--display); font-weight: 400; color: var(--vela); }
h2 { font-size: 1.25rem; font-weight: 700; }
h3 { font-size: 1.05rem; font-weight: 700; }
p { margin: 0; }
.sub { color: var(--salvia); }
.peq { font-size: 0.88rem; }

.columna { width: 100%; max-width: 520px; margin: 0 auto; padding: 24px 16px 64px; }
.ancha { max-width: 860px; }

/* Botones */
button, .boton {
  font: inherit;
  font-weight: 700;
  border: 0;
  border-radius: 999px;
  padding: 12px 22px;
  cursor: pointer;
  background: var(--vela);
  color: var(--sobre-acento);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
}
button:disabled { opacity: 0.45; cursor: default; }
.secundario { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--pino-3); }
.peligro { background: transparent; color: #ff9b92; box-shadow: inset 0 0 0 1.5px #6b2a26; }
.rojo { background: var(--farol); color: #fff; }
.chico { padding: 6px 14px; min-height: 36px; font-size: 0.9rem; }
button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 3px solid var(--vela-suave);
  outline-offset: 2px;
}

/* Formularios */
label { display: block; font-weight: 700; margin: 14px 0 6px; }
input[type=text], input[type=password], input[type=number], input[type=search], select, textarea {
  width: 100%;
  font: inherit;
  color: var(--texto);
  background: var(--pino-2);
  border: 1.5px solid var(--pino-3);
  border-radius: var(--radio-s);
  padding: 12px 14px;
}
input::placeholder { color: #7f9a8d; }
select option { background: var(--pino); }

/* Superficies */
.panel { background: var(--pino-2); border-radius: var(--radio-m); padding: 18px; }
.fila { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.entre { justify-content: space-between; }
.pila > * + * { margin-top: 12px; }
.lista { list-style: none; padding: 0; margin: 0; }
.lista > li { padding: 14px 0; border-bottom: 1px solid var(--pino-3); }
.lista > li:last-child { border-bottom: 0; }
.vacio { color: var(--salvia); padding: 18px 0; }

.punto-vivo { display: inline-flex; align-items: center; gap: 8px; color: #fff; background: var(--farol); padding: 4px 12px; border-radius: 999px; font-weight: 700; font-size: 0.9rem; }
.punto-vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: latido 1.2s infinite; }
@keyframes latido { 50% { opacity: 0.3; } }

/* Aviso flotante */
#aviso {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(140%);
  background: var(--papel); color: #2b2416; padding: 12px 20px; border-radius: 999px;
  font-weight: 700; box-shadow: 0 8px 30px rgba(0,0,0,.35); transition: transform .25s ease;
  max-width: calc(100% - 32px); z-index: 50; text-align: center;
}
#aviso.ver { transform: translateX(-50%) translateY(0); }
#aviso.mal { background: #ffd9d5; color: #5e1410; }

/* Medidor de micrófono */
.medidor { height: 10px; background: var(--pino); border-radius: 999px; overflow: hidden; }
.medidor > i { display: block; height: 100%; width: 0%; background: linear-gradient(90deg, var(--ok), var(--vela) 70%, var(--farol)); transition: width .08s linear; }

/* Marco de foto en papel */
.marco {
  background: var(--papel);
  padding: 10px 10px 14px;
  border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.45), 0 2px 0 rgba(0,0,0,.2);
  transform: rotate(-1.4deg);
}
.marco .ventana { position: relative; aspect-ratio: 4 / 3; background: #e9dfc6; overflow: hidden; border-radius: 2px; }
.marco img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.2s ease; }
.marco img.ver { opacity: 1; }
.marco .pie { color: #5b4e33; font-size: 0.92rem; padding: 8px 4px 0; min-height: 1.5em; text-align: center; }

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

/* ---------- v2: piezas compartidas ---------- */
.fondo-foto { position: fixed; inset: 0; z-index: -1; background-size: cover; background-position: center; }
.fondo-foto::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, color-mix(in srgb, var(--pino) 72%, transparent), var(--pino) 85%); }

.chips { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { background: transparent; color: var(--texto); box-shadow: inset 0 0 0 1.5px var(--pino-3); min-height: 40px; padding: 8px 14px; font-weight: 700; }
.chip[aria-pressed=true] { background: var(--texto); color: var(--pino); box-shadow: none; }

.barra { height: 6px; background: var(--pino-3); border-radius: 999px; overflow: hidden; }
.barra > i { display: block; height: 100%; width: 0%; background: var(--vela); transition: width 1s linear; }

.caratula { width: 56px; height: 56px; border-radius: 8px; object-fit: cover; background: var(--pino-3); flex: none; }

/* Hoja que sube desde abajo (pedir canción, etc.) */
dialog.hoja { border: 0; padding: 0; margin: auto auto 0; width: 100%; max-width: 560px; max-height: 86vh; border-radius: 22px 22px 0 0; background: var(--pino-2); color: var(--texto); }
dialog.hoja::backdrop { background: rgba(0,0,0,.55); }
dialog.hoja .cabeza-hoja { position: sticky; top: 0; background: var(--pino-2); padding: 18px 18px 10px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
dialog.hoja .cuerpo-hoja { padding: 0 18px 24px; }

/* Reacciones que flotan */
.flotantes { position: fixed; inset: 0; pointer-events: none; overflow: hidden; z-index: 40; }
.flotantes span { position: absolute; bottom: -40px; font-size: 34px; animation: subir 3.2s ease-out forwards; }
@keyframes subir { 0% { transform: translateY(0) scale(.6); opacity: 0; } 15% { opacity: 1; transform: translateY(-12vh) scale(1); } 100% { transform: translateY(-85vh) translateX(var(--dx, 0)); opacity: 0; } }

/* Cuenta regresiva a pantalla completa */
.cuenta { position: fixed; inset: 0; z-index: 60; display: grid; place-items: center; text-align: center; background: color-mix(in srgb, var(--pino) 92%, black); padding: 16px; }
.cuenta .numero { font-family: var(--display); color: var(--vela); font-size: min(55vw, 340px); line-height: 1; text-shadow: 0 0 60px color-mix(in srgb, var(--vela) 60%, transparent); }
.cuenta .tit { font-size: clamp(1.6rem, 7vw, 3rem); font-family: var(--display); color: var(--texto); margin-top: 10px; }
.confeti { position: fixed; inset: 0; pointer-events: none; z-index: 61; overflow: hidden; }
.confeti i { position: absolute; top: -20px; width: 10px; height: 16px; border-radius: 2px; animation: caer 3.5s linear forwards; }
@keyframes caer { to { transform: translateY(110vh) rotate(720deg); } }

/* Crédito */
.credito { text-align: center; font-size: .8rem; color: var(--salvia); padding: 28px 16px 34px; letter-spacing: .02em; }
.credito strong { color: var(--vela); font-weight: 700; }