/* Formulario de evaluación, estilo "tarjetas de color": fondo tibio, tarjetas grandes
   mostaza / salvia / arena, radio amplio único, tipografía de display enorme y píldoras
   oscuras. Los colores salen de los tokens de Hollman (amber, achieve, navy). */
.form-caja {
  --f-radio: 28px;
  --f-mostaza: color-mix(in oklab, var(--amber) 78%, #fff);
  --f-salvia: color-mix(in oklab, var(--achieve) 28%, #c9d1cc);
  --f-arena: color-mix(in oklab, var(--amber) 16%, #ecebe6);
  --f-rosa: color-mix(in oklab, var(--destructive) 26%, #f3dcd9);
  --f-tinta: var(--navy);
  --f-pildora: var(--bright);
  --f-pildora-texto: var(--ink);
  --f-dentro: var(--navy);
  --f-dentro-texto: white;
  gap: 1.1rem;
}

/* Barra superior: píldoras como "Today / Calendar". */
.form-barra-sup { gap: .5rem; margin-bottom: -.2rem; }
.form-atras, .form-cancelar {
  min-height: 44px; padding: 0 1.15rem; border-radius: 99px; font-size: 14px; font-weight: 600;
  background: transparent; color: var(--bright); box-shadow: inset 0 0 0 1.5px var(--line);
}
.form-atras { background: var(--f-pildora); color: var(--f-pildora-texto); box-shadow: none; }

.form-paso { font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--mist); margin-bottom: -.6rem; }
.form-progreso { height: 6px; background: var(--steel); }
.form-progreso i { border-radius: 99px; background: var(--f-pildora); transition: width .4s cubic-bezier(.22, 1, .36, 1); }

/* Quién se evalúa: tarjeta arena con avatar. */
.form-quien { display: flex; align-items: center; gap: .75rem; padding: .8rem 1rem; border-radius: var(--f-radio); background: var(--f-arena); color: var(--f-tinta); }
.form-quien > span:last-child { display: grid; min-width: 0; }
.form-quien b { font-size: 15px; }
.form-quien small { font-size: 12.5px; color: var(--f-tinta); opacity: .7; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.form-inicial { background: var(--f-dentro); color: var(--f-dentro-texto); }

.form-cuerpo { display: grid; gap: 1rem; animation: f-entra .32s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes f-entra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Títulos de display, como la fecha grande. */
#vista .form-pregunta { font-size: 2rem; line-height: 1.08; letter-spacing: -.025em; font-weight: 600; margin: 0; }
.form-contexto { font-size: 13px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* Tarjetas de opción: color que rota, nombre grande, píldora oscura a la derecha. */
.form-opciones { gap: .7rem; }
.form-opcion {
  min-height: 96px; padding: 1.1rem 1.2rem; border-radius: var(--f-radio);
  background: var(--f-arena); color: var(--f-tinta); box-shadow: none;
  transition: transform .12s ease, filter .15s ease;
}
.form-opcion.t0 { background: var(--f-mostaza); }
.form-opcion.t1 { background: var(--f-salvia); }
.form-opcion.t2 { background: var(--f-arena); }
.form-opcion:active, .form-letra:active, .form-chip:active { transform: scale(.98); }
.form-opcion-texto b { font-size: 20px; line-height: 1.15; font-weight: 600; letter-spacing: -.01em; }
.form-opcion-texto small { color: inherit; opacity: .72; font-size: 13px; }
.form-opcion .form-inicial { width: 44px; height: 44px; }
.form-marca, .form-flecha {
  flex-shrink: 0; padding: .35rem .8rem; border-radius: 99px; font-size: 12px; font-weight: 700;
  background: color-mix(in oklab, var(--f-dentro) 88%, transparent); color: var(--f-dentro-texto);
}
.form-marca.ok { background: var(--achieve); color: var(--f-dentro-texto); }
.form-flecha { font-size: 18px; padding: .2rem .75rem; }

/* Letras H-O-L-L-M-A-N: tarjetas con letra gigante. */
.form-letras { grid-template-columns: repeat(2, 1fr); gap: .7rem; }
.form-letra {
  min-height: 118px; padding: 1rem; border-radius: var(--f-radio); align-content: space-between; justify-items: start;
  background: var(--f-arena); color: var(--f-tinta); box-shadow: none; transition: transform .12s ease;
}
.form-letra:nth-child(3n+1) { background: var(--f-mostaza); }
.form-letra:nth-child(3n+2) { background: var(--f-salvia); }
.form-letra b { font-size: 3rem; line-height: .9; color: var(--f-tinta); letter-spacing: -.03em; }
.form-letra span { font-size: 13px; text-align: left; color: var(--f-tinta); opacity: .8; }
.form-letra small { top: 12px; right: 12px; padding: .2rem .55rem; border-radius: 99px; background: var(--f-dentro); color: var(--f-dentro-texto); }
.form-letra.sugerida { box-shadow: inset 0 0 0 3px var(--f-dentro); }
.form-letra em { font-style: normal; font-size: 12px; font-weight: 700; color: var(--f-tinta); }
.form-letra.hecha, .form-letra:disabled { opacity: .55; }
.form-opcion.hecha { background: var(--steel); color: var(--bright); opacity: .8; }
.form-opcion:disabled { opacity: .55; }
.form-siguiente { display: grid; gap: .25rem; width: 100%; padding: 1rem 1.1rem; border-radius: var(--f-radio); background: var(--f-arena); color: var(--f-tinta); text-align: left; }
.form-siguiente small { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; opacity: .7; }
.form-siguiente b { font-size: 17px; line-height: 1.25; }
.form-listo .form-secundario { width: 100%; }
button.form-secundario { background: transparent; color: var(--bright); box-shadow: inset 0 0 0 1.5px var(--line); min-height: 52px; font-size: 16px; font-weight: 600; }

/* Sí / No: dos tarjetas enormes. */
.form-sino { grid-template-columns: 1fr; gap: .7rem; }
.form-si, .form-no {
  min-height: 116px; border-radius: var(--f-radio); display: flex; align-items: center; justify-content: space-between;
  padding: 0 1.4rem; font-size: 2.2rem; font-weight: 600; letter-spacing: -.02em; color: var(--f-tinta);
  box-shadow: none; transition: transform .12s ease, filter .15s ease;
}
.form-si { background: var(--f-salvia); }
.form-no { background: var(--f-rosa); }
.form-si span, .form-no span {
  order: 2; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 99px;
  font-size: 1.6rem; background: var(--f-dentro); color: var(--f-dentro-texto);
}
.form-si:active, .form-no:active { transform: scale(.97); }
.form-si.elegida, .form-no.elegida { box-shadow: inset 0 0 0 3px var(--f-dentro); }

.form-texto { min-height: 140px; border-radius: var(--f-radio); padding: 1rem 1.15rem; background: var(--f-arena); color: var(--f-tinta); border: 0; }
.form-texto:focus { outline: 3px solid var(--f-pildora); outline-offset: 0; }

/* Botón principal: píldora oscura. */
.form-principal { min-height: 60px; border-radius: 99px; background: var(--f-pildora); color: var(--f-pildora-texto); font-size: 17px; box-shadow: none; transition: transform .12s ease; }
.form-principal:active { transform: scale(.98); }
.form-secundario { border-radius: 99px; }

/* Resumen: tarjeta mostaza (aprobado salvia) con número gigante. */
.form-resumen { padding: 1.3rem; border-radius: var(--f-radio); background: var(--f-mostaza); color: var(--f-tinta); box-shadow: none; gap: .6rem; }
.form-resumen.aprobado { background: var(--f-salvia); box-shadow: none; }
.form-resumen.reforzar { box-shadow: none; }
.form-resumen-nota { justify-content: space-between; align-items: center; }
.form-resumen-nota b { font-size: 3.6rem; line-height: .9; letter-spacing: -.04em; color: var(--f-tinta); }
.form-resumen-nota span { padding: .35rem .8rem; border-radius: 99px; background: var(--f-dentro); color: var(--f-dentro-texto) !important; font-size: 13px; }
.form-resumen .form-contexto, .form-resumen p, .form-resumen ul, .form-resumen h3 { color: var(--f-tinta); }
.form-resumen h3 { opacity: .7; }
.form-resumen .form-contexto { text-transform: none; letter-spacing: 0; font-size: 15px; font-weight: 600; }
.form-resumen ul { list-style: none; padding: 0; }
.form-resumen li { position: relative; padding-left: 1.4rem; }
.form-resumen li::before { content: "✓"; position: absolute; left: 0; font-weight: 700; }
.form-resumen h3.reforzar + ul li::before { content: "✗"; }

.form-listo { gap: 1rem; padding-top: 2.5rem; }
.form-listo-icono { width: 112px; height: 112px; font-size: 54px; background: var(--f-pildora); animation: f-pop .5s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes f-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Inicio del gerente: píldora oscura grande y nombres como píldoras. */
.form-llamado .form-principal { min-height: 64px; border-radius: 99px; background: var(--bright); color: var(--ink); display: flex; align-items: center; justify-content: center; gap: .6rem; font-size: 18px; }
.form-llamado .form-principal::after { content: "→"; font-size: 1.2em; }
.form-chip { border-radius: 99px; }

@media (prefers-reduced-motion: reduce) { .form-cuerpo, .form-listo-icono { animation: none; } .form-progreso i { transition: none; } }

/* Editor de exámenes (admin): campos grandes y tarjetas, mismo radio del formulario. */
.ed-caja { display: grid; gap: .9rem; border-radius: 28px; }
.ed-campo { display: grid; gap: .35rem; }
.ed-campo > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mist); }
.ed-campo input, .ed-campo textarea, .ed-campo select, .ed-opcion-texto {
  width: 100%; min-height: 48px; padding: .7rem .9rem; border-radius: 14px; font-size: 16px;
  background: var(--ink); color: var(--bright); border: 1px solid var(--line);
}
.ed-campo textarea { min-height: 96px; line-height: 1.4; }
.ed-campo input:focus, .ed-campo textarea:focus, .ed-campo select:focus, .ed-opcion-texto:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
.ed-opcion { display: flex; align-items: center; gap: .6rem; margin-top: .4rem; }
.ed-correcta { display: flex; align-items: center; gap: .3rem; flex-shrink: 0; font-size: 12px; color: var(--mist); }
.ed-correcta input { width: 22px; height: 22px; min-height: 0; padding: 0; border: 0; background: none; box-shadow: none; accent-color: var(--achieve); }
.ed-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .6rem; }
.ed-pregunta { display: grid; gap: .5rem; padding: .9rem 1rem; border-radius: 20px; background: color-mix(in oklab, var(--amber) 12%, var(--panel)); }
.ed-pregunta-texto b { display: block; color: var(--bright); font-size: 15px; line-height: 1.3; }
.ed-pregunta-texto ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .15rem; font-size: 14px; color: var(--fog); }
.ed-pregunta-texto li.ok { color: var(--achieve); font-weight: 600; }

/* Panel de admin simplificado. */
.panel-sub { display: block; font-size: 12px; font-weight: 400; color: var(--mist); margin-top: 2px; }
.panel-plegable > summary { cursor: pointer; list-style: none; }
.panel-plegable > summary::-webkit-details-marker { display: none; }
.panel-plegable > summary::after { content: "Mostrar"; float: right; font-size: 12px; color: var(--accent); }
.panel-plegable[open] > summary::after { content: "Ocultar"; }
.panel-plegable > summary .panel-cabecera { display: inline-flex; margin: 0; }

/* Equipo: avance por letra con su % debajo, en 7 celdas iguales. */
.tira-avance { display: grid; grid-template-columns: repeat(7, minmax(30px, 1fr)); gap: 4px; min-width: 240px; }
.avance-letra { display: grid; justify-items: center; gap: 2px; padding: 5px 0 4px; border-radius: 10px; background: var(--steel); color: var(--mist); }
.avance-letra b { font-size: 13px; line-height: 1; color: var(--bright); }
.avance-letra small { font-size: 10px; line-height: 1; font-variant-numeric: tabular-nums; }
.avance-tenue { background: color-mix(in oklab, var(--accent) 16%, var(--steel)); }
.avance-medio { background: color-mix(in oklab, var(--accent) 38%, var(--steel)); }
.avance-lleno { background: var(--accent); }
.avance-lleno b, .avance-lleno small { color: var(--ink); }
.avance-total { display: grid; justify-items: end; gap: 2px; }
.avance-total small { font-size: 10px; letter-spacing: .04em; text-transform: uppercase; color: var(--mist); }
.avance-total b { font-size: 18px; color: var(--bright); font-variant-numeric: tabular-nums; }
.fila-nombre { display: block; }

@media (max-width: 767px) {
  .tabla-equipo tr { grid-template-columns: 1fr auto; gap: 12px; padding: 16px; }
  .tabla-equipo td:nth-child(1) { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
  .tabla-equipo td:nth-child(1) .fila-estado-hoy { margin: 0; flex-shrink: 0; }
  .tabla-equipo td:nth-child(4) { grid-column: 1 / -1; }
  .tabla-equipo .tira-avance { min-width: 0; }
  .tabla-equipo td.num::after { content: none; }
  .tabla-equipo td.num { grid-column: 1; text-align: left; }
  .tabla-equipo td.num .avance-total { justify-items: start; }
  .tabla-equipo td:last-child { grid-column: 2; grid-row: 3; align-self: center; }
  .tabla-equipo td:last-child a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 18px; }
  body[data-vista='equipo'] .contenido-vista section:first-child > .no-imprimir { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  body[data-vista='equipo'] .contenido-vista section:first-child > .no-imprimir > * { width: 100%; min-height: 48px; display: flex; align-items: center; justify-content: center; }
}