/* Los colores del dashboard: marino DPA y el naranja de la llama. */
:root {
  --marino: #0b109f;
  --marino-oscuro: #080c78;
  --naranja: #f7941d;
  --fondo: #f4f6fb;
  --tarjeta: #ffffff;
  --texto: #0f172a;
  --suave: #64748b;
  --borde: #e2e8f0;
  --error: #dc2626;
  color-scheme: light;
}
* { box-sizing: border-box; }
/* Sin esto, las cajas con display propio (grid/flex) ignoran el atributo hidden. */
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fondo);
  color: var(--texto);
  font: 15px/1.5 Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
.hoja { max-width: 680px; margin: 0 auto; padding: 24px 16px 40px; }
.cabecera { text-align: center; margin-bottom: 20px; }
.logo { height: 52px; width: auto; max-width: 100%; }
h1 { font-size: 1.5rem; margin: 14px 0 6px; letter-spacing: -0.01em; text-wrap: balance; }
.cabecera p { color: var(--suave); margin: 0 auto; max-width: 56ch; }

form, .listo {
  background: var(--tarjeta);
  border: 1px solid var(--borde);
  border-radius: 16px;
  padding: 20px;
  box-shadow: 0 12px 40px -20px rgba(15, 23, 42, 0.25);
  display: grid;
  gap: 20px;
}
.campo { display: grid; gap: 8px; min-width: 0; }
label, .etq { font-weight: 600; font-size: 0.95rem; }
label b, .etq b { color: var(--error); font-weight: 600; }
.ayuda { margin: -4px 0 0; color: var(--suave); font-size: 0.85rem; }
input, select, textarea {
  width: 100%;
  font: inherit;
  color: inherit;
  background: #fff;
  border: 1px solid #cbd5e1;
  border-radius: 10px;
  padding: 10px 12px;
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus { outline: 2px solid color-mix(in srgb, var(--marino) 30%, transparent); border-color: var(--marino); }
.invalido { border-color: var(--error) !important; }

.opciones { display: grid; gap: 8px; }
.opciones.dos { grid-template-columns: 1fr 1fr; }
.opcion {
  display: flex; gap: 10px; align-items: flex-start;
  border: 1px solid var(--borde); border-radius: 10px; padding: 10px 12px;
  font-weight: 500; cursor: pointer;
}
.opcion input { width: auto; margin-top: 3px; accent-color: var(--marino); }
.opcion:has(input:checked) { border-color: var(--marino); background: #eef0fb; }
.opcion small { display: block; color: var(--suave); font-weight: 400; }

.botones { display: flex; flex-wrap: wrap; gap: 8px; }
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-weight: 600; border-radius: 10px; padding: 10px 16px; cursor: pointer;
  border: 1px solid transparent;
}
.boton.primario { background: var(--marino); color: #fff; width: 100%; padding: 13px 16px; font-size: 1rem; }
.boton.primario:hover { background: var(--marino-oscuro); }
.boton.primario:disabled { opacity: 0.6; cursor: wait; }
.boton.secundario { background: #fff; color: var(--marino); border-color: #c2c8ee; }
.boton.secundario:hover { background: #eef0fb; }
.boton.chico { padding: 4px 10px; font-size: 0.85rem; background: #fff; border-color: var(--borde); }

.grabando { display: flex; align-items: center; gap: 8px; color: var(--error); font-weight: 600; }
.punto { width: 10px; height: 10px; border-radius: 50%; background: var(--error); animation: latido 1s infinite; }
@keyframes latido { 50% { opacity: 0.3; } }

.lista { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.lista li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; min-width: 0;
  border: 1px solid var(--borde); border-radius: 10px; padding: 8px 10px;
}
.lista .icono { font-size: 1.2rem; }
.lista .nombre { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lista .peso { color: var(--suave); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.lista button { border: 0; background: none; color: var(--suave); font-size: 1.1rem; cursor: pointer; }
/* El reproductor de la nota de voz va en su propio renglón para no comerse el nombre. */
.lista audio { order: 5; width: 100%; height: 36px; }

.error { margin: 0; color: var(--error); font-weight: 600; }
.progreso { position: relative; height: 26px; border-radius: 999px; background: #eef0fb; overflow: hidden; }
.progreso #barra { height: 100%; width: 0; background: var(--naranja); transition: width 0.2s; }
.progreso span { position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.85rem; font-weight: 600; font-variant-numeric: tabular-nums; }

.listo { text-align: center; justify-items: center; }
.palomita { width: 56px; height: 56px; border-radius: 50%; background: #16a34a; color: #fff; font-size: 30px; display: grid; place-items: center; }
.listo h2 { margin: 0; }
.listo p { margin: 0; color: var(--suave); }

.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.pie { text-align: center; color: #94a3b8; font-size: 0.8rem; margin-top: 18px; }

@media (max-width: 420px) {
  .opciones.dos { grid-template-columns: 1fr 1fr; }
  form, .listo { padding: 16px; }
  h1 { font-size: 1.3rem; }
}