/* Estudio de Creación — estilo inspirado en la referencia aprobada:
   crema cálido, primarios vivos, tipografía redondeada, píldoras. */
:root {
  --crema: #fff6ed; --tinta: #301f0f;
  --azul: #006aff; --rojo: #fd4401; --amarillo: #fdcb40;
  --morado: #a864fd; --rosa: #f780d4; --menta: #a7fd94;
}
* { box-sizing: border-box; margin: 0; }
body { background: var(--crema); color: var(--tinta); font-family: "Nunito", sans-serif; }
h1, h2, h3, button { font-family: "Fredoka", sans-serif; }

header { display: flex; align-items: center; gap: 16px; padding: 20px 32px; }
header h1 { font-size: 1.7rem; }
#contador { background: var(--amarillo); border-radius: 50px; padding: 6px 16px; font-weight: 800; }

main { padding: 0 32px 48px; max-width: 1400px; margin: 0 auto; }

/* --- login --- */
#login { position: fixed; inset: 0; background: var(--crema); z-index: 50;
  display: flex; align-items: center; justify-content: center; }
#login.oculto { display: none; }
#form-login { background: #fff; border-radius: 28px; padding: 40px; width: 340px;
  text-align: center; box-shadow: 0 12px 40px rgba(48,31,15,.12); }
#form-login p { margin: 8px 0 20px; }
#form-login input { width: 100%; padding: 13px 18px; border-radius: 50px; border: 2px solid #eadfd2;
  font: inherit; margin-bottom: 12px; }
#login-error { color: var(--rojo); font-weight: 700; margin-top: 10px; min-height: 1.2em; }

/* --- galería --- */
#galeria { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; }
.tarjeta { background: #fff; border-radius: 24px; padding: 22px; cursor: pointer;
  box-shadow: 0 6px 18px rgba(48,31,15,.07); transition: transform .15s; border: 3px solid transparent; }
.tarjeta:hover { transform: translateY(-4px); border-color: var(--amarillo); }
.tarjeta .emoji { font-size: 2.6rem; }
.tarjeta h2 { font-size: 1.15rem; margin: 8px 0 4px; }
.tarjeta .set { color: #9b8871; font-weight: 700; font-size: .85rem; text-transform: uppercase; }
.chip { display: inline-block; border-radius: 50px; padding: 4px 12px; font-weight: 800;
  font-size: .8rem; margin-top: 10px; }
.chip.idea { background: #f3e8ff; color: var(--morado); }
.chip.desarrollo { background: #e0edff; color: var(--azul); }
.chip.prototipo { background: #ffe9d6; color: var(--rojo); }
.chip.aprobado { background: #e2fbd7; color: #1e7a06; }

/* --- detalle --- */
.oculto { display: none !important; }
#volver { background: none; border: none; color: var(--azul); font-size: 1rem; cursor: pointer;
  margin-bottom: 14px; font-weight: 600; }
#detalle-grid { display: grid; grid-template-columns: 1fr 340px; gap: 24px; }
@media (max-width: 900px) { #detalle-grid { grid-template-columns: 1fr; } }

#visor-caja { background: #fff; border-radius: 28px; overflow: hidden;
  box-shadow: 0 10px 30px rgba(48,31,15,.08); }
#visor { width: 100%; height: 520px; }
#visor-controles { display: flex; align-items: center; justify-content: space-between; padding: 12px 20px; }
.pista { color: #9b8871; font-size: .85rem; }

#panel { background: #fff; border-radius: 28px; padding: 26px;
  box-shadow: 0 10px 30px rgba(48,31,15,.08); }
#panel h2 { font-size: 1.4rem; }
#p-set { color: #9b8871; font-weight: 800; text-transform: uppercase; font-size: .8rem; margin: 4px 0 6px; }
#panel h3 { margin: 18px 0 8px; font-size: 1rem; }

button { border: none; border-radius: 50px; padding: 11px 20px; font-size: .95rem;
  font-weight: 600; cursor: pointer; background: var(--azul); color: #fff; }
button:hover { filter: brightness(1.08); }
#btn-explosion { background: var(--rojo); }
#btn-simular { background: var(--morado); }
#btn-nota { background: var(--menta); color: var(--tinta); margin-top: 8px; }

#sim-caja { display: flex; gap: 8px; }
#sim-caja input { flex: 1; padding: 10px 16px; border-radius: 50px; border: 2px solid #eadfd2; font: inherit; }
#sim-aviso { min-height: 1.3em; font-weight: 700; font-size: .85rem; margin-top: 6px; }

.color-fila { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.color-fila select { border-radius: 50px; padding: 6px 12px; border: 2px solid #eadfd2; font: inherit; }

#p-ficha { font-size: .9rem; line-height: 1.7; }
#p-estados { display: flex; flex-wrap: wrap; gap: 8px; }
#p-estados button { font-size: .85rem; padding: 8px 14px; background: #f1e7da; color: var(--tinta); }
#p-estados button.activo { background: var(--tinta); color: var(--crema); }

#p-nota { width: 100%; border-radius: 18px; border: 2px solid #eadfd2; padding: 12px 16px;
  font: inherit; min-height: 70px; resize: vertical; }
.nota { background: var(--crema); border-radius: 14px; padding: 8px 14px; margin-top: 8px; font-size: .88rem; }
.nota b { color: #9b8871; font-size: .78rem; }