/* 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, .rd {
  --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: 11px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; }
.avance-letra i { font-style: normal; font-size: 9.5px; line-height: 1; opacity: .75; font-variant-numeric: tabular-nums; }
.avance-tenue { background: color-mix(in oklab, var(--destructive) 22%, 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, .avance-lleno i { color: var(--ink); }
/* Llevo · Promedio · Pendientes */
.tres-numeros { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; min-width: 250px; }
.tres-numeros > div { display: grid; gap: 1px; padding: 8px 10px; border-radius: 12px; background: var(--steel); text-align: left; }
.tres-numeros small { font-size: 10px; letter-spacing: .05em; text-transform: uppercase; color: var(--mist); }
.tres-numeros b { font-size: 19px; line-height: 1.1; color: var(--bright); font-variant-numeric: tabular-nums; }
.tres-numeros b span { font-size: 12px; font-weight: 600; color: var(--mist); }
.tres-numeros em { font-style: normal; font-size: 10.5px; color: var(--mist); }
.tres-numeros .ok { background: color-mix(in oklab, var(--achieve) 22%, var(--steel)); }
.tres-numeros .bajo { background: color-mix(in oklab, var(--accent) 22%, var(--steel)); }
.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 / -1; text-align: left; }
  .tabla-equipo td.num .avance-total { justify-items: start; }
  .tabla-equipo td:last-child { grid-column: 1 / -1; }
  .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; }
}

/* Ficha en capas (divulgación progresiva): resumen, letra elegida, historial plegado. */
.ficha-resumen { display: grid; gap: .9rem; }
.ficha-resumen-cabeza { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.ficha-resumen-cabeza h2 { margin: 0 0 2px; }
.ficha-resumen-cabeza p { margin: 0; }
.ficha-letras { min-width: 0; }
button.avance-letra { border: 0; cursor: pointer; min-height: 48px; box-shadow: none; background: var(--steel); color: var(--mist); font: inherit; }
button.avance-letra.avance-tenue { background: color-mix(in oklab, var(--destructive) 22%, var(--steel)); }
button.avance-letra.avance-medio { background: color-mix(in oklab, var(--accent) 38%, var(--steel)); }
button.avance-letra.avance-lleno { background: var(--accent); }
button.avance-letra.elegida { box-shadow: inset 0 0 0 2px var(--bright); }
.ficha-resumen-nota { margin: 0; font-size: 12px; color: var(--mist); }
.ficha-evaluar { min-height: 52px; border-radius: 99px; background: var(--bright); color: var(--ink); font-weight: 700; }
.ficha-letra-cabeza { display: flex; flex-wrap: wrap; align-items: baseline; gap: .35rem .8rem; margin-bottom: .8rem; }
#vista .ficha-letra-cabeza h3 { margin: 0; font-size: 18px; color: var(--bright); }
.ficha-letra-cabeza h3 b { color: var(--accent); }
button.ficha-enlace, a.ficha-enlace { margin-left: auto; padding: 0; min-height: 0; background: none; box-shadow: none; border: 0; font-size: 12px; font-weight: 600; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.ficha-historial { margin-top: .8rem; }
.ficha-historial > summary { cursor: pointer; font-size: 12px; font-weight: 600; color: var(--accent); padding: .3rem 0; }
.ficha-historial[open] > summary { margin-bottom: .5rem; }
.ficha-pie { display: flex; align-items: center; gap: 1rem; }
.ficha-siguiente { display: inline-flex; align-items: center; min-height: 48px; padding: 0 1.2rem; border-radius: 99px; background: var(--bright); color: var(--ink); font-weight: 700; font-size: 15px; }

/* Rendición de cuentas (app/rendicion.js) */
.rd { display: grid; gap: 1rem; }
.rd-cabeza { display: flex; align-items: end; justify-content: space-between; gap: .75rem; flex-wrap: wrap; }
.rd-cabeza small { font-size: 12px; opacity: .7; }
#vista .rd-cabeza h2 { margin: 0; font-size: 1.35rem; }
#vista .rd select, #vista .rd input, #vista .rd textarea { width: 100%; padding: .65rem .8rem; border-radius: 14px; border: 1px solid color-mix(in oklab, var(--f-tinta) 18%, transparent); background: #fff; color: var(--navy); font: inherit; font-size: 16px; }
#vista .rd-cabeza select { width: auto; }
.rd-tira { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.rd-tira > div { padding: .7rem .8rem; border-radius: 18px; background: var(--f-arena); color: var(--f-tinta); min-width: 0; }
.rd-tira > div.fuerte { background: var(--f-mostaza); }
.rd-tira > div.ok { background: var(--f-salvia); }
.rd-tira > div.bajo { background: var(--f-rosa); }
.rd-tira + .rd-tira { margin-top: -.5rem; }
.rd-dias { font-size: 11px; opacity: .65; }
.rd-tabla td.bien { color: var(--achieve); font-weight: 700; }
.rd-tabla td.mal { color: var(--destructive); font-weight: 700; }
.rd-tabla td small { font-weight: 600; opacity: .8; }
.rd-tira small { display: block; font-size: 11.5px; opacity: .75; }
.rd-tira b { font-size: 1.05rem; overflow-wrap: anywhere; }
@media (max-width: 560px) { .rd-tira { grid-template-columns: repeat(2, 1fr); } }
.rd-nota { font-size: 13px; opacity: .75; margin: 0; }
.rd-bloque { padding: 1rem; border-radius: var(--f-radio); background: color-mix(in oklab, var(--f-arena) 45%, transparent); display: grid; gap: .8rem; }
#vista .rd-bloque h3, .rd-bloque summary { margin: 0; font-size: 1rem; font-weight: 700; }
.rd-bloque h4 { margin: .4rem 0 0; font-size: .9rem; }
.rd-bloque.plegable summary { cursor: pointer; }
.rd-bloque.plegable:not([open]) { display: block; }
.rd-bloque.plegable > summary { display: flex; align-items: center; gap: .5rem; list-style: none; }
.rd-bloque.plegable > summary::-webkit-details-marker { display: none; }
.rd-bloque.plegable > summary::before { content: "▸"; transition: transform .15s ease; }
.rd-bloque.plegable[open] > summary::before { transform: rotate(90deg); }
.rd-bloque.plegable[open] summary { margin-bottom: .8rem; }
.rd-rejilla { display: grid; grid-template-columns: repeat(2, 1fr); gap: .7rem; }
@media (max-width: 560px) { .rd-rejilla { grid-template-columns: 1fr; } }
.rd-campo { display: grid; gap: .3rem; font-size: 13px; }
.rd-campo.ancho { grid-column: 1 / -1; }
.rd-objetivo { padding: .8rem 1rem; border-radius: 18px; background: var(--f-salvia); color: var(--f-tinta); display: grid; gap: .4rem; }
.rd-objetivo small { font-size: 12px; opacity: .75; }
.rd-objetivo p { margin: 0; font-weight: 600; }
.rd-sino { display: inline-flex; gap: .4rem; }
#vista .rd-sino button { min-width: 64px; padding: .5rem 1rem; border-radius: 99px; background: #fff; color: var(--navy); border: 1px solid color-mix(in oklab, var(--f-tinta) 18%, transparent); font-weight: 600; }
#vista .rd-sino button.activo { background: var(--f-dentro); color: var(--f-dentro-texto); }
.rd-vendedor { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: .5rem; align-items: end; font-size: 12px; }
.rd-vendedor label { display: grid; gap: .25rem; }
@media (max-width: 560px) { .rd-vendedor { grid-template-columns: 1fr 1fr; } .rd-vendedor > select { grid-column: 1 / -1; } }
.rd-respaldos { display: grid; grid-template-columns: repeat(2, 1fr); gap: .5rem; }
.rd-respaldos > div { display: flex; align-items: center; justify-content: space-between; gap: .5rem; font-size: 13px; }
#vista .rd-enviar, #vista .rd-editar { padding: .9rem 1.2rem; border-radius: 99px; background: var(--f-dentro); color: var(--f-dentro-texto); font-weight: 700; border: 0; }
#vista .rd-editar { justify-self: start; padding: .6rem 1rem; font-size: 13px; }
.rd-enviar:disabled { opacity: .6; }
#vista .rd-volver { justify-self: start; background: none; border: 0; color: inherit; font-weight: 600; padding: 0;; box-shadow: none; min-height: 0; }
.rd-aviso { margin: 0; padding: .7rem 1rem; border-radius: 14px; background: var(--f-arena); color: var(--f-tinta); }
/* En el resumen los bloques se pegan a su contenido: si no, un aviso corto se estira a lo alto. */
.rd-resumen .tb-dos > * { align-self: start; }
.rd-aviso.error { background: var(--f-rosa); }
.rd-aviso.ok { background: var(--f-salvia); }
.rd-fila { display: grid; grid-template-columns: 1.3fr 1fr 1fr .8fr; gap: .5rem; padding: .5rem 0; font-size: 13px; border-top: 1px solid color-mix(in oklab, var(--f-tinta) 10%, transparent); }
.rd-fila.cabeza { font-size: 11.5px; opacity: .7; border-top: 0; }
.rd-fila .bien { color: var(--achieve); font-weight: 700; }
.rd-fila .mal { font-weight: 700; }
.rd-fila-det summary { list-style: none; cursor: pointer; }
.rd-fila-det summary::-webkit-details-marker { display: none; }
.rd-detalle { display: grid; grid-template-columns: max-content 1fr; gap: .3rem .8rem; font-size: 13px; margin: .3rem 0 .8rem; }
.rd-detalle dt { opacity: .7; }
.rd-detalle dd { margin: 0; }
.rd-tabla-caja { overflow-x: auto; }
.rd-tabla { width: 100%; border-collapse: collapse; font-size: 13px; }
.rd-tabla th { text-align: left; font-size: 11.5px; font-weight: 600; opacity: .7; padding: .4rem; }
.rd-tabla td { padding: .5rem .4rem; border-top: 1px solid color-mix(in oklab, var(--f-tinta) 10%, transparent); white-space: nowrap; }
#vista .rd-suc { display: grid; text-align: left; background: none; border: 0; color: inherit; padding: 0;; box-shadow: none; min-height: 0; }
.rd-suc small { font-size: 11px; opacity: .65; }
#vista .rd-meta { max-width: 130px; }
.rd-barra { display: block; width: 80px; height: 6px; border-radius: 99px; background: var(--f-arena); margin-bottom: .25rem; overflow: hidden; }
.rd-barra i { display: block; height: 100%; background: var(--f-dentro); }

/* Entrega 4 · análisis por reglas (cockpit y detalle) y resumen de Dirección */
.rd-analisis { border-left: 5px solid var(--tb-gris); }
.rd-analisis.s-VERDE { border-left-color: var(--tb-verde); }
.rd-analisis.s-AMARILLO { border-left-color: var(--tb-amarillo); }
.rd-analisis.s-ROJO { border-left-color: var(--tb-rojo); }
.rd-analisis-resumen { margin: 0; font-size: 14px; line-height: 1.5; }
.rd-alertas { list-style: none; display: grid; gap: .5rem; margin: 0; padding: 0; }
.rd-alerta { display: flex; align-items: baseline; gap: .5rem; font-size: 13.5px; }
.rd-alerta.n-ROJO { color: var(--tb-rojo); }
.rd-alerta.n-AMARILLO { color: var(--tb-amarillo); }
.rd-alerta > span { color: var(--tb-texto); }
.rd-recos { margin: 0; padding-left: 1.1rem; display: grid; gap: .35rem; font-size: 13.5px; }
.rd-titulo-chico { margin: 0; font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; opacity: .7; }
.rd-lista { list-style: none; margin: 0; padding: 0; display: grid; gap: .35rem; }
.rd-lista li { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: 13.5px; padding-top: .35rem; border-top: 1px solid color-mix(in oklab, var(--f-tinta) 10%, transparent); }
.rd-lista li:first-child { padding-top: 0; border-top: 0; }
.rd-lista span { text-align: right; opacity: .85; font-variant-numeric: tabular-nums; }
.rd-roja { display: grid; gap: .4rem; }
.rd-roja > b { font-size: 13.5px; }
.rd-area { display: flex; align-items: baseline; justify-content: space-between; gap: .6rem; font-size: 13.5px; }
.rd-area span { text-align: right; opacity: .8; }
.rd-copiar { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; line-height: 1.5; white-space: pre; resize: vertical; }

/* Expediente emocional (app/bienestar.js); reutiliza las piezas rd-* */
.bn { --bn-rojo: color-mix(in oklab, var(--destructive) 70%, #fff); --bn-amarillo: color-mix(in oklab, var(--amber) 85%, #fff); --bn-verde: color-mix(in oklab, var(--achieve) 70%, #fff); }
.bn-barra { position: relative; height: 26px; border-radius: 99px; background: var(--f-arena); overflow: hidden; }
.bn-barra i { position: absolute; inset: 0 auto 0 0; background: var(--f-salvia); transition: width .3s ease; }
.bn-barra span { position: relative; z-index: 1; display: block; padding: 0 .9rem; line-height: 26px; font-size: 12px; font-weight: 600; color: var(--f-tinta); }
.bn-seccion { margin: 0; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; opacity: .7; }
#vista .bn-pregunta { margin: 0; font-size: 1.6rem; line-height: 1.2; }
.bn-opciones { display: grid; gap: .55rem; }
#vista .bn-opcion { display: flex; align-items: center; justify-content: flex-start; gap: .9rem; width: 100%; min-height: 60px; padding: .7rem 1.1rem; border-radius: 22px; border: 0; box-shadow: none; text-align: left; background: var(--f-arena); color: var(--f-tinta); font-size: 15px; font-weight: 600; }
#vista .bn-opcion.t0 { background: var(--f-mostaza); }
#vista .bn-opcion.t1 { background: var(--f-salvia); }
#vista .bn-opcion b { flex: 0 0 2rem; display: grid; place-items: center; height: 2rem; font-size: 1.3rem; }
#vista .bn-opcion b.punto::before { content: ""; width: 1.1rem; height: 1.1rem; border-radius: 99px; box-shadow: inset 0 0 0 2px currentColor; }
#vista .bn-opcion.activo b.punto::before { box-shadow: inset 0 0 0 5px currentColor; }
#vista .bn-opcion span { flex: 1; text-align: left; }
.bn-dos { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; }
#vista .bn-secundario { width: 100%; padding: .9rem 1.2rem; border-radius: 99px; background: #fff; color: var(--navy); font-weight: 700; border: 1px solid color-mix(in oklab, var(--f-tinta) 18%, transparent); box-shadow: none; }
#vista .bn-opcion.activo { background: var(--f-dentro); color: var(--f-dentro-texto); }
#vista .bn textarea#bn-texto { min-height: 120px; }
.bn-historial { display: flex; align-items: end; gap: .5rem; height: 120px; }
.bn-historial > div { flex: 1; display: grid; grid-template-rows: auto 1fr auto; align-items: end; justify-items: center; height: 100%; font-size: 11px; }
.bn-historial i { width: 70%; border-radius: 8px 8px 3px 3px; background: var(--f-salvia); }
.bn-historial i.rojo, .bn-punto.rojo { background: var(--bn-rojo); }
.bn-historial i.amarillo, .bn-punto.amarillo { background: var(--bn-amarillo); }
.bn-historial i.verde, .bn-punto.verde { background: var(--bn-verde); }
.bn-punto { display: inline-block; width: 9px; height: 9px; margin-right: .35rem; border-radius: 99px; background: var(--f-arena); }
.bn-pestanas { display: flex; gap: .4rem; flex-wrap: wrap; }
#vista .bn-pestanas button { padding: .5rem 1rem; border-radius: 99px; border: 1px solid color-mix(in oklab, var(--f-tinta) 18%, transparent); background: #fff; color: var(--navy); font-weight: 600; box-shadow: none; min-height: 0; }
#vista .bn-pestanas button.activo { background: var(--f-dentro); color: var(--f-dentro-texto); }
.bn-tarjetas { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: .7rem; }
.bn-tarjeta { padding: 1rem; border-radius: 22px; background: var(--f-arena); color: var(--f-tinta); display: grid; gap: .4rem; border-top: 6px solid transparent; }
.bn-tarjeta.rojo { border-top-color: var(--bn-rojo); }
.bn-tarjeta.amarillo { border-top-color: var(--bn-amarillo); }
.bn-tarjeta.verde { border-top-color: var(--bn-verde); }
#vista .bn-tarjeta h3 { margin: 0; font-size: 1.05rem; }
.bn-tarjeta dl { display: grid; grid-template-columns: 1fr auto; gap: .2rem .6rem; margin: 0; font-size: 13px; }
.bn-tarjeta dd { margin: 0; font-weight: 700; }
.bn-alerta-n { margin: 0; font-size: 12.5px; font-weight: 700; }
.bn-alerta { display: grid; gap: .6rem; padding: 1rem; border-radius: 22px; background: var(--f-arena); color: var(--f-tinta); border-left: 6px solid var(--bn-amarillo); }
.bn-alerta.rojo { border-left-color: var(--bn-rojo); }
.bn-alerta b { display: block; }
.bn-alerta small { font-size: 12px; opacity: .75; }
.bn-nivel { font-weight: 700; text-transform: capitalize; }
.bn-fila { display: flex; gap: .5rem; align-items: center; flex-wrap: wrap; }
.bn-nota { margin: 0; padding: .6rem .8rem; border-radius: 14px; background: #fff; color: var(--navy); font-size: 13.5px; }
.bn-nota small { display: block; font-size: 11px; opacity: .65; }

/* Tableros de rendición (app/tableroRendicion.js): cockpit, ejecutivo y pista. */
.rd { --tb-verde: #1f9d63; --tb-amarillo: #c98a12; --tb-rojo: #d2452f; --tb-azul: #3671c6; --tb-gris: #8a949e; --tb-marca: #e10600;
  --tb-texto: var(--f-tinta); --tb-texto2: color-mix(in oklab, var(--f-tinta) 60%, transparent); --tb-reja: color-mix(in oklab, var(--f-tinta) 12%, transparent); }
body[data-tema='oscuro'] .rd { --tb-verde: #4cc98a; --tb-amarillo: #f1b544; --tb-rojo: #f07a63; --tb-azul: #7aa7ff; }
.rd-pestanas { display: flex; gap: .4rem; flex-wrap: wrap; }
#vista .rd-pestanas button { padding: .55rem 1.05rem; border-radius: 99px; border: 1px solid color-mix(in oklab, var(--f-tinta) 18%, transparent); background: #fff; color: var(--navy); font-weight: 700; box-shadow: none; min-height: 0; }
#vista .rd-pestanas button.activo { background: var(--f-dentro); color: var(--f-dentro-texto); border-color: transparent; }
#vista .rd-pestanas.chica button { padding: .35rem .85rem; font-size: 13px; }
body[data-tema='oscuro'] #vista .rd-pestanas button { background: #0f1c27; color: var(--bright); border-color: #35506a; }
body[data-tema='oscuro'] #vista .rd-pestanas button.activo { background: var(--f-dentro); color: var(--f-dentro-texto); }
.tb-chip { display: inline-flex; align-items: center; gap: .35rem; padding: .15rem .55rem; border-radius: 99px; font-size: 12.5px; font-weight: 700; white-space: nowrap;
  background: color-mix(in oklab, var(--tb-gris) 16%, transparent); color: var(--tb-texto); }
.tb-chip::before { content: ""; width: 7px; height: 7px; border-radius: 99px; background: var(--tb-gris); }
.tb-chip.s-VERDE { background: color-mix(in oklab, var(--tb-verde) 16%, transparent); } .tb-chip.s-VERDE::before { background: var(--tb-verde); }
.tb-chip.s-AMARILLO { background: color-mix(in oklab, var(--tb-amarillo) 18%, transparent); } .tb-chip.s-AMARILLO::before { background: var(--tb-amarillo); }
.tb-chip.s-ROJO { background: color-mix(in oklab, var(--tb-rojo) 16%, transparent); } .tb-chip.s-ROJO::before { background: var(--tb-rojo); }
.tb-captura { display: flex; align-items: center; justify-content: space-between; gap: .8rem; flex-wrap: wrap; padding: .9rem 1rem; border-radius: 18px;
  background: color-mix(in oklab, var(--f-arena) 60%, transparent); border-left: 5px solid var(--tb-gris); }
.tb-captura.s-VERDE { border-left-color: var(--tb-verde); } .tb-captura.s-AMARILLO { border-left-color: var(--tb-amarillo); } .tb-captura.s-ROJO { border-left-color: var(--tb-rojo); }
.tb-captura small { display: block; font-size: 12px; opacity: .75; }
.tb-tablero { display: grid; gap: .8rem; padding: 1rem; border-radius: var(--f-radio); background: #0f1318; }
.tb-tablero .rd-tira > div { background: #171d25; color: #eef1f3; } .tb-tablero .rd-tira small { color: #9aa4b1; }
.tb-tablero .rd-tira > div.ok { background: #173627; } .tb-tablero .rd-tira > div.bajo { background: #3d1c17; } .tb-tablero .rd-tira > div.fuerte { background: #3a2e12; }
.tb-tablero .rd-nota { color: #9aa4b1; }
.tb-medidores { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
@media (max-width: 560px) { .tb-medidores { grid-template-columns: 1fr; } }
svg.tb-medidor { display: block; width: 100%; height: auto; max-width: 230px; margin: 0 auto; }
.tb-num { font-variant-numeric: tabular-nums; }
.tb-centro { text-align: center; margin: 0; }
.tb-dos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 720px) { .tb-dos { grid-template-columns: 1fr; } }
.tb-grande { margin: .15rem 0; font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tb-grande.t-verde { color: var(--tb-verde); } .tb-grande.t-amarillo { color: var(--tb-amarillo); } .tb-grande.t-rojo { color: var(--tb-rojo); }
.tb-telemetria, .tb-cuentas { display: grid; grid-template-columns: 1fr auto; gap: .45rem .8rem; margin: .3rem 0 0; font-size: 13.5px; align-items: center; }
.tb-telemetria dd, .tb-cuentas dd { margin: 0; text-align: right; }
.tb-cuentas dd { font-size: 1.3rem; font-weight: 800; font-variant-numeric: tabular-nums; }
svg.tb-barras { display: block; width: 100%; height: auto; }
.tb-lineas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .6rem; }
.tb-lineas small { display: block; font-size: 11.5px; opacity: .75; }
@media (max-width: 560px) { .tb-lineas { grid-template-columns: 1fr; } }
.tb-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem; }
@media (max-width: 900px) { .tb-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .tb-resumen { grid-template-columns: 1fr; } }
.tb-resumen .rd-bloque { align-content: start; gap: .3rem; }
.tb-resumen .rd-bloque:first-child { background: #0f1318; color: #eef1f3; }
.tb-pista { overflow-x: auto; }
.tb-pista svg { display: block; width: 100%; min-width: 640px; height: auto; }
.tb-auto { transition: transform 1.2s cubic-bezier(.2, .8, .2, 1); }
.tb-carril.clic { cursor: pointer; }
.tb-carril.clic:focus-visible rect:first-child { stroke: #f1c16a; stroke-width: 2; }
.tb-telem td { vertical-align: middle; }
.tb-tend { white-space: nowrap; }
.tb-tend svg { vertical-align: middle; }
.tb-color { display: inline-block; width: 4px; height: 28px; border-radius: 2px; flex: 0 0 4px; }
#vista .rd-suc { display: flex; align-items: center; gap: .5rem; }
#vista .rd-suc > span:last-child { display: grid; }
.tb-metas { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: .6rem; }
@media (prefers-reduced-motion: reduce) { .tb-auto { transition: none; } }

/* Que ningún selector con nombres largos ensanche la pantalla en celular. */
.rd { grid-template-columns: minmax(0, 1fr); }
.rd > *, .rd-rejilla > *, .rd-vendedor > *, .rd-respaldos > *, .rd-bloque > *, .bn-dos > * { min-width: 0; }
#vista .rd select { max-width: 100%; text-overflow: ellipsis; }
@media (max-width: 560px) { .rd-respaldos { grid-template-columns: 1fr; } }

/* Modo oscuro de Rendición y Expediente: tarjetas oscuras con texto claro (antes quedaba
   texto claro sobre tarjetas claras). */
body[data-tema='oscuro'] .rd {
  --f-arena: #1d3142;
  --f-mostaza: #5b4418;
  --f-salvia: #213a31;
  --f-rosa: #4d2620;
  --f-tinta: #eef1f3;
  --f-pildora: #eef1f3;
  --f-pildora-texto: #12202e;
  --f-dentro: #f1c16a;
  --f-dentro-texto: #12202e;
  --bn-rojo: #e58a77; --bn-amarillo: #e0ac55; --bn-verde: #6fc39a;
  color: var(--bright);
}
body[data-tema='oscuro'] #vista .rd select, body[data-tema='oscuro'] #vista .rd input, body[data-tema='oscuro'] #vista .rd textarea,
body[data-tema='oscuro'] #vista .rd-sino button, body[data-tema='oscuro'] #vista .bn-pestanas button,
body[data-tema='oscuro'] #vista .bn-secundario, body[data-tema='oscuro'] .bn-nota {
  background: #0f1c27; color: var(--bright); border-color: #35506a;
}
body[data-tema='oscuro'] #vista .rd-sino button.activo, body[data-tema='oscuro'] #vista .bn-pestanas button.activo { background: var(--f-dentro); color: var(--f-dentro-texto); }
body[data-tema='oscuro'] .rd small, body[data-tema='oscuro'] .rd .rd-nota, body[data-tema='oscuro'] .rd th { color: var(--fog); opacity: 1; }
body[data-tema='oscuro'] .rd-bloque { background: #172a39; }
body[data-tema='oscuro'] a.ficha-siguiente { color: var(--ink); }
body[data-tema='oscuro'] .rd-fila, body[data-tema='oscuro'] .rd-tabla td, body[data-tema='oscuro'] .rd-lista li { border-color: #2a4256; }

/* Pit stop: compromisos, peticiones y observaciones de Dirección (rendicion.js, entrega 3). */
.tb-tarea { display: grid; gap: .45rem; padding: .8rem 1rem; margin-top: .6rem; border-radius: 18px; background: var(--f-arena); color: var(--f-tinta); min-width: 0; }
.tb-tarea.vencida { box-shadow: inset 4px 0 0 var(--tb-rojo); }
.tb-tarea p { margin: 0; font-weight: 600; overflow-wrap: anywhere; }
.tb-tarea small, .tb-revision small { opacity: .75; font-size: 12.5px; }
.tb-tarea-cabeza { display: flex; flex-wrap: wrap; gap: .35rem; align-items: center; }
.tb-tarea .rd-sino { flex-wrap: wrap; }
#vista .rd-quitar { margin-left: auto; min-height: 0; padding: .1rem .55rem; border-radius: 99px; background: transparent; color: var(--f-tinta); border: 1px solid color-mix(in oklab, var(--f-tinta) 25%, transparent); box-shadow: none; }
.tb-revisiones { display: grid; gap: .5rem; margin-top: .8rem; }
.tb-revisiones h4 { margin: 0; }
.tb-revision { padding: .7rem 1rem; border-radius: 18px; background: var(--f-salvia); color: var(--f-tinta); }
.tb-revision p { margin: .25rem 0 0; overflow-wrap: anywhere; }
.tb-revisar { display: grid; gap: .5rem; }
.tb-estrellas { color: #d99a1b; letter-spacing: .05em; }