/* CuentaLista: sistema visual. Solo modo claro. Violeta (acción), lima (resalte), tinta (contraste). */
:root {
  --tinta: #0f0b24;
  --tinta-2: #1d1740;
  --violeta: #5b3df5;
  --violeta-oscuro: #4526d9;
  --violeta-suave: #efebff;
  --lima: #c6f432;
  --lima-oscuro: #a9d61a;

  --fondo: #f6f5fb;
  --superficie: #ffffff;
  --texto: #15122b;
  --suave: #5f5b73;
  --borde: #e4e1f0;
  --borde-fuerte: #cfcae3;

  --acento: var(--violeta);
  --acento-texto: #ffffff;
  --error: #c2293a;
  --error-fondo: #fdecee;
  --aviso-fondo: #fff5d9;
  --aviso-texto: #6b4e00;
  --bien: #12805c;
  --bien-fondo: #e3f6ee;

  --radio: 16px;
  --radio-sm: 12px;
  --sombra: 0 1px 2px rgb(15 11 36 / 6%), 0 8px 24px rgb(15 11 36 / 6%);
  --sombra-alta: 0 24px 60px rgb(15 11 36 / 35%);
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--fondo);
  color: var(--texto);
  font: 16px/1.55 "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .logo span, .cifras strong, .paso-num {
  font-family: "Segoe UI Variable Display", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  letter-spacing: -0.02em;
}

/* Pensado primero para el PC; en pantallas angostas todo queda en una columna. */
main, .barra-interior, .pie {
  max-width: 74rem;
  margin: 0 auto;
  padding: 0 28px;
}

main { padding-top: 20px; padding-bottom: 64px; width: 100%; flex: 1; }

/* Texto corrido a un ancho cómodo de leer, aunque la página sea ancha. */
main > h1, main > p, main > .lista, main > .aviso { max-width: 46rem; }

h1 { font-size: 1.9rem; line-height: 1.2; margin: 20px 0 12px; font-weight: 750; }
h2 { font-size: 1.2rem; line-height: 1.3; margin: 24px 0 10px; font-weight: 700; }
h3 { font-size: 1.05rem; margin: 12px 0 4px; font-weight: 700; }

a { color: var(--violeta); text-underline-offset: 3px; }
a:hover { color: var(--violeta-oscuro); }

::selection { background: var(--lima); color: var(--tinta); }

/* ---------------------------------------------------------- barra superior */
.barra {
  position: sticky; top: 0; z-index: 10;
  background: rgb(255 255 255 / 88%);
  backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--borde);
}
.con-portada .barra { background: var(--tinta); border-bottom-color: rgb(255 255 255 / 8%); }

.barra-interior { display: flex; align-items: center; gap: 12px; min-height: 64px; }

.logo { display: inline-flex; align-items: center; gap: 10px; color: var(--tinta); text-decoration: none; margin-right: auto; }
.logo img { display: block; border-radius: 9px; }
.logo span { font-size: 1.12rem; font-weight: 800; }
.logo b { color: var(--violeta); font-weight: 800; }
.con-portada .logo { color: #fff; }
.con-portada .logo b { color: var(--lima); }

.menu { display: flex; gap: 4px; }
.menu a {
  color: var(--suave); text-decoration: none; font-weight: 600;
  padding: 8px 12px; border-radius: 999px;
}
.menu a:hover { color: var(--tinta); background: var(--violeta-suave); }

/* ---------------------------------------------------------- portada */
.heroe {
  position: relative; overflow: hidden;
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgb(91 61 245 / 55%), transparent 60%),
    radial-gradient(40rem 24rem at 10% 110%, rgb(198 244 50 / 14%), transparent 60%),
    var(--tinta);
  color: #fff;
}
.heroe-interior {
  max-width: 74rem; margin: 0 auto; padding: 56px 28px 72px;
  display: grid; gap: 48px; align-items: center;
}
.heroe h1 { font-size: 2.4rem; line-height: 1.08; margin: 12px 0 18px; font-weight: 800; }
.resaltado { color: var(--lima); }
.heroe-bajada { color: rgb(255 255 255 / 78%); font-size: 1.08rem; max-width: 38rem; margin: 0; }
.heroe-acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 28px 0 12px; }
.heroe-nota { color: rgb(255 255 255 / 55%); font-size: 0.9rem; margin: 0; }

.etiqueta {
  display: inline-block; margin: 0;
  font-size: 0.78rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--lima);
}
.etiqueta.oscura { color: var(--violeta); }

.heroe-demo { display: flex; justify-content: center; }
.demo-tarjeta {
  width: 100%; max-width: 26rem;
  background: #fff; color: var(--texto);
  border-radius: 22px; padding: 20px;
  box-shadow: var(--sombra-alta);
  transform: rotate(-1.5deg);
}
.demo-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-weight: 700; }
.demo-estado { font-size: 0.78rem; background: var(--lima); color: var(--tinta); padding: 4px 10px; border-radius: 999px; }
.demo-lista { list-style: none; padding: 0; margin: 16px 0; display: grid; gap: 8px; }
.demo-lista li {
  display: flex; gap: 10px; align-items: center;
  padding: 10px 12px; border-radius: 12px; background: var(--fondo); font-size: 0.93rem;
}
.demo-lista li::before {
  content: "✓"; flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.8rem; font-weight: 800;
  background: var(--bien); color: #fff;
}
.demo-lista li.alerta { background: var(--aviso-fondo); color: var(--aviso-texto); }
.demo-lista li.alerta::before { content: "!"; background: #d99a00; }
.demo-pie { display: flex; align-items: center; gap: 12px; font-size: 0.85rem; color: var(--suave); font-weight: 600; }
.demo-barra { flex: 1; height: 8px; border-radius: 999px; background: var(--borde); overflow: hidden; }
.demo-barra span { display: block; width: 94%; height: 100%; background: linear-gradient(90deg, var(--violeta), var(--lima)); }

.cifras { background: var(--tinta-2); color: #fff; }
.cifras-interior {
  max-width: 74rem; margin: 0 auto; padding: 28px;
  display: grid; gap: 20px;
}
.cifras-interior div { display: flex; gap: 14px; align-items: center; }
.cifras strong { font-size: 2.4rem; line-height: 1; color: var(--lima); font-weight: 800; min-width: 2.2ch; }
.cifras span { color: rgb(255 255 255 / 75%); font-size: 0.95rem; }

.seccion { margin-top: 56px; }
.titulo-seccion { font-size: 1.8rem; margin: 8px 0 24px; max-width: 36rem; font-weight: 800; }

.pasos-portada { list-style: none; padding: 0; margin: 0; display: grid; gap: 16px; }
.pasos-portada li {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 24px; box-shadow: var(--sombra);
}
.pasos-portada p { color: var(--suave); margin: 0; }
.paso-num {
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px;
  background: var(--violeta-suave); color: var(--violeta); font-weight: 800; font-size: 1.1rem;
}

.privacidad {
  display: grid; gap: 24px; align-items: center;
  background: var(--superficie); border: 1px solid var(--borde); border-radius: 24px;
  padding: 32px; box-shadow: var(--sombra);
}
.privacidad .titulo-seccion { margin-bottom: 12px; }
.privacidad p { color: var(--suave); margin: 0; }
.lista-check { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; font-weight: 600; }
.lista-check li::before {
  content: "✓"; flex: none; width: 24px; height: 24px; border-radius: 8px;
  display: grid; place-items: center; font-weight: 800; font-size: 0.85rem;
  background: var(--lima); color: var(--tinta);
}

.llamado {
  margin-top: 56px; padding: 40px 32px; border-radius: 24px; text-align: center;
  background: radial-gradient(30rem 14rem at 50% 0%, rgb(91 61 245 / 60%), transparent 70%), var(--tinta);
  color: #fff;
}
.llamado h2 { font-size: 1.7rem; margin: 0 0 20px; font-weight: 800; }

@media (min-width: 900px) {
  .heroe-interior { grid-template-columns: 1.15fr 1fr; padding: 80px 28px 96px; }
  .heroe h1 { font-size: 3.4rem; }
  .cifras-interior { grid-template-columns: repeat(3, 1fr); }
  .pasos-portada { grid-template-columns: repeat(3, 1fr); }
  .privacidad { grid-template-columns: 1.2fr 1fr; padding: 40px 48px; }
}

/* ---------------------------------------------------------- piezas generales */
.lista { padding-left: 1.2rem; }
.lista li { margin-bottom: 8px; }

.nota { color: var(--suave); }

.aviso {
  background: var(--aviso-fondo);
  color: var(--aviso-texto);
  padding: 12px 14px;
  border-radius: var(--radio-sm);
  font-size: 0.95rem;
  border: 1px solid rgb(217 154 0 / 25%);
}

.error { color: var(--error); font-weight: 600; }

.formulario { display: flex; flex-direction: column; gap: 12px; margin-top: 16px; max-width: 32rem; }
.formulario.ancho { max-width: 46rem; }
.formulario.completo { max-width: none; }

/* Pantallas de entrar: una tarjeta centrada. */
.panel {
  max-width: 30rem;
  margin: 56px auto;
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: 24px;
  padding: 16px 32px 32px;
  box-shadow: var(--sombra);
}
.panel .formulario { max-width: none; }
.panel .boton { width: 100%; }

/* ---------------------------------------------------------- formularios */
label { font-weight: 600; }

input[type="email"], input[type="text"], input[type="date"], input[type="tel"],
input[type="number"], input[type="file"], textarea, select {
  font: inherit;
  width: 100%;
  min-height: 48px;
  padding: 11px 14px;
  border: 1.5px solid var(--borde-fuerte);
  border-radius: var(--radio-sm);
  background: var(--superficie);
  color: var(--texto);
  transition: border-color 0.15s, box-shadow 0.15s;
}
input:hover, textarea:hover, select:hover { border-color: #b3acd6; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--violeta);
  box-shadow: 0 0 0 4px rgb(91 61 245 / 15%);
}
input[type="file"] { padding: 9px; background: var(--fondo); border-style: dashed; cursor: pointer; }
input[type="file"]::file-selector-button {
  font: inherit; font-weight: 700; border: 0; border-radius: 999px;
  padding: 8px 16px; margin-right: 12px; background: var(--violeta-suave); color: var(--violeta); cursor: pointer;
}
textarea { resize: vertical; line-height: 1.5; }
[aria-invalid="true"] { border-color: var(--error); border-width: 2px; }

input:focus-visible, .boton:focus-visible, a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--violeta);
  outline-offset: 2px;
}

fieldset {
  border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 12px 20px 20px; margin: 0; background: var(--superficie); box-shadow: var(--sombra);
}
fieldset.interno { border: 0; padding: 0; margin-top: 12px; background: transparent; box-shadow: none; }
legend { font-weight: 800; padding: 0 8px; font-size: 1.02rem; }

.campo { display: flex; flex-direction: column; gap: 6px; margin-top: 14px; }
.ayuda { color: var(--suave); font-size: 0.9rem; margin: 0; }

.casilla {
  display: flex; gap: 12px; align-items: flex-start; font-weight: 400;
  padding: 14px; border: 1.5px solid var(--borde); border-radius: var(--radio-sm); background: var(--superficie);
  transition: border-color 0.15s, background 0.15s;
}
.casilla:has(input:checked) { border-color: var(--violeta); background: var(--violeta-suave); }
.casilla input { width: 22px; height: 22px; margin: 0; flex: none; accent-color: var(--violeta); }
.casilla-simple { display: inline-flex; gap: 8px; align-items: center; font-weight: 700; }
.casilla-simple input { width: 20px; height: 20px; accent-color: var(--violeta); }

/* ---------------------------------------------------------- botones */
.boton {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; min-height: 50px; padding: 12px 24px;
  border: 0; border-radius: 999px;
  background: var(--violeta); color: #fff;
  font: inherit; font-weight: 700; text-decoration: none; cursor: pointer;
  box-shadow: 0 6px 16px rgb(91 61 245 / 28%);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.boton:hover { background: var(--violeta-oscuro); color: #fff; transform: translateY(-1px); }
.boton:active { transform: translateY(0); }

.boton.lima { background: var(--lima); color: var(--tinta); box-shadow: 0 8px 24px rgb(198 244 50 / 25%); }
.boton.lima:hover { background: var(--lima-oscuro); color: var(--tinta); }
.boton.fantasma { background: transparent; color: #fff; border: 1.5px solid rgb(255 255 255 / 30%); box-shadow: none; }
.boton.fantasma:hover { background: rgb(255 255 255 / 8%); }
.boton.secundario { background: transparent; color: var(--violeta); border: 1.5px solid var(--violeta); box-shadow: none; }
.boton.secundario:hover { background: var(--violeta-suave); color: var(--violeta-oscuro); }
.boton.deshabilitado { background: var(--borde); color: var(--suave); box-shadow: none; cursor: not-allowed; transform: none; }
.boton.peligro { background: var(--error); color: #fff; box-shadow: none; }
.boton.peligro:hover { background: #a31f2f; }
.boton.pequeno { width: auto; min-width: 0; min-height: 40px; padding: 8px 18px; font-size: 0.95rem; box-shadow: none; }
.con-portada .barra .boton.pequeno { background: var(--lima); color: var(--tinta); }

.enlace {
  background: none; border: 0; color: var(--violeta);
  font: inherit; font-weight: 600; min-height: 40px; padding: 0 8px; border-radius: 999px; cursor: pointer;
}
.enlace:hover { background: var(--violeta-suave); }
.enlace:disabled { color: var(--suave); cursor: default; background: none; }

.acciones { display: flex; flex-wrap: wrap; gap: 12px; margin: 16px 0; }

/* ---------------------------------------------------------- tarjetas y tablero */
.tarjeta {
  background: var(--superficie);
  border: 1px solid var(--borde);
  border-radius: var(--radio);
  padding: 8px 22px 22px;
  margin-top: 16px;
  box-shadow: var(--sombra);
}
.tarjeta.peligro { border-color: rgb(194 41 58 / 40%); margin-top: 32px; }

.grilla { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(min(21rem, 100%), 1fr)); }
.grilla > .tarjeta { margin-top: 0; }

.datos { display: grid; grid-template-columns: max-content 1fr; gap: 8px 18px; margin: 0; }
.datos dt { color: var(--suave); }
.datos dd { margin: 0; font-weight: 600; }

.lista-cuentas { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lista-cuentas li {
  display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 12px 14px; border-radius: var(--radio-sm); background: var(--fondo);
}
.lista-cuentas a { font-weight: 600; text-decoration: none; }
.lista-cuentas .nota {
  font-size: 0.8rem; font-weight: 700; padding: 3px 10px; border-radius: 999px;
  background: var(--violeta-suave); color: var(--violeta);
}

.trabajo {
  background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio);
  padding: 8px 20px; margin: 16px 0; box-shadow: var(--sombra);
}

.girando {
  display: inline-block; width: 1em; height: 1em; margin-right: 6px; vertical-align: -2px;
  border: 3px solid var(--violeta-suave); border-top-color: var(--violeta);
  border-radius: 50%; animation: girar 0.9s linear infinite;
}
@keyframes girar { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .girando { animation: none; }
  .boton, .boton:hover { transition: none; transform: none; }
}

/* ---------------------------------------------------------- registro del contrato */
.marca { font-size: 0.9rem; margin: 2px 0 0; font-weight: 600; }
.marca.bien { color: var(--bien); }
.marca.revisar { color: var(--aviso-texto); background: var(--aviso-fondo); padding: 6px 10px; border-radius: 8px; }
.marca.vacia { color: var(--suave); }
.bien-fondo { background: var(--bien-fondo); color: var(--bien); }

.revision { display: grid; gap: 24px; align-items: start; margin-top: 16px; }
.revision-datos { max-width: none; }
.visor { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; box-shadow: var(--sombra); }
.visor-barra { display: flex; justify-content: space-between; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--borde); background: var(--fondo); }
.visor img { display: block; width: 100%; height: auto; background: #fff; }

.pegar {
  display: flex; flex-direction: column; gap: 8px; padding: 14px; margin: 8px 0 12px;
  border: 1.5px dashed var(--violeta); border-radius: var(--radio-sm); background: var(--violeta-suave);
}
.obligacion { padding: 14px 0; border-top: 1px solid var(--borde); display: flex; flex-direction: column; gap: 6px; }
.obligacion-cabeza { display: flex; justify-content: space-between; align-items: center; gap: 8px; }

.pasos-registro { list-style: none; padding: 0; margin: 20px 0; max-width: 46rem; display: flex; flex-direction: column; gap: 10px; }
.pasos-registro a {
  display: grid; grid-template-columns: auto 1fr auto; gap: 14px; align-items: center;
  padding: 16px 18px; border: 1px solid var(--borde); border-radius: var(--radio);
  background: var(--superficie); color: var(--texto); text-decoration: none; font-weight: 600;
  box-shadow: var(--sombra); transition: border-color 0.15s, transform 0.15s;
}
.pasos-registro a:hover { border-color: var(--violeta); transform: translateY(-1px); }
.estado-paso {
  width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  background: var(--violeta-suave); color: var(--violeta); font-weight: 800;
}
.hecho .estado-paso { background: var(--lima); color: var(--tinta); }

.dos-columnas { display: grid; gap: 16px; }

@media (min-width: 1000px) {
  .revision { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
  .revision.sin-documento { grid-template-columns: minmax(0, 46rem); }
  /* El documento queda a la vista mientras se baja por el formulario. */
  .revision-documento { position: sticky; top: 80px; max-height: calc(100vh - 96px); overflow: auto; }
  .dos-columnas { grid-template-columns: 1fr 1fr; }
}

/* ---------------------------------------------------------- cuenta mensual */
.cuenta { display: grid; gap: 24px; align-items: start; margin-top: 16px; }
.cuenta-principal { display: flex; flex-direction: column; gap: 20px; min-width: 0; }
.tres-columnas, .cuatro-columnas { display: grid; gap: 0 16px; }
.texto-obligacion { color: var(--suave); margin-top: 0; }
.obligacion-tarjeta { margin-top: 12px; }
.evidencias { list-style: none; padding: 0; margin: 12px 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); }
.evidencias img { width: 100%; height: 7rem; object-fit: cover; border-radius: 10px; border: 1px solid var(--borde); display: block; }
.subir-evidencia { display: grid; gap: 8px; margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--borde); }

.validacion { margin: 6px 0; padding: 9px 12px; border-radius: 10px; font-size: 0.93rem; }
.validacion.bien { color: var(--bien); background: var(--bien-fondo); }
.validacion.mal { color: var(--error); background: var(--error-fondo); font-weight: 600; }
.validacion.aviso-v { color: var(--aviso-texto); background: var(--aviso-fondo); }

details summary { cursor: pointer; color: var(--suave); margin-top: 8px; font-weight: 600; }

/* La segunda planilla (cuenta final) solo se despliega al marcar su casilla. */
.segunda:not(:has(input[name="segunda"]:checked)) > :not(legend) { display: none; }

@media (min-width: 700px) {
  .tres-columnas { grid-template-columns: repeat(3, 1fr); }
  .cuatro-columnas { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .cuatro-columnas { grid-template-columns: repeat(4, 1fr); }
  .cuenta { grid-template-columns: minmax(0, 1fr) 21rem; }
  .cuenta-lateral { position: sticky; top: 80px; }
}

/* ---------------------------------------------------------- vista previa y descargas */
.cuenta-lateral { display: flex; flex-direction: column; gap: 16px; }
.cuenta-lateral .boton { width: 100%; }
.documento-previo { margin-top: 24px; }
.paginas { display: grid; gap: 20px; grid-template-columns: repeat(auto-fill, minmax(min(26rem, 100%), 1fr)); }
.paginas img {
  width: 100%; height: auto; border: 1px solid var(--borde); border-radius: 10px; background: #fff;
  box-shadow: var(--sombra); user-select: none; -webkit-user-drag: none;
}
.descargas { list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr)); }
.descargas .acciones { margin: 8px 0 4px; }

/* Propuesta de "Mejorar redacción con IA" dentro de la tarjeta de la obligación. */
.propuesta { background: var(--violeta-suave); border: 1px solid rgb(91 61 245 / 20%); border-radius: var(--radio-sm); padding: 6px 16px 16px; }
.propuesta ol { margin: 0 0 12px; padding-left: 1.4rem; }
.propuesta .acciones { display: flex; gap: 12px; flex-wrap: wrap; }

/* ---------------------------------------------------------- pie */
footer { margin-top: 24px; background: var(--superficie); border-top: 1px solid var(--borde); }
.pie { padding-top: 24px; padding-bottom: 32px; color: var(--suave); font-size: 0.88rem; }
.pie p { margin: 6px 0; }
.pie strong { color: var(--texto); font-weight: 600; }
.pie-marca { display: flex; align-items: center; gap: 8px; font-weight: 800; color: var(--texto); font-size: 0.95rem; }
.pie-marca img { border-radius: 6px; }

/* ---------------------------------------------------------- tamaños */
@media (min-width: 600px) {
  .boton { width: auto; min-width: 11rem; }
  h1 { font-size: 2.1rem; }
}

@media (max-width: 599px) {
  main, .barra-interior, .pie { padding-left: 16px; padding-right: 16px; }
  .heroe-interior, .cifras-interior { padding-left: 16px; padding-right: 16px; }
  .heroe h1 { font-size: 2rem; }
  .menu a { padding: 8px; }
  .panel { margin: 20px auto; padding: 8px 18px 24px; }
  .privacidad, .llamado { padding: 24px 20px; }
  .demo-tarjeta { transform: none; }
}

/* Tablero: todas las actas del contrato; la sugerida resaltada. */
.lista-actas { list-style: none; padding: 0; margin: 12px 0 0; display: flex; flex-direction: column; gap: 8px; }
.lista-actas li {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; border-radius: var(--radio-sm); background: var(--fondo); border: 1px solid transparent;
}
.lista-actas li.sugerida { border-color: var(--violeta); background: var(--violeta-suave); }
.lista-actas .acta-datos { flex: 1 1 16rem; }
.lista-actas .nota { font-size: 0.8rem; font-weight: 700; }
.lista-actas form { margin: 0; }
.lista-actas .boton { width: auto; min-width: 7rem; min-height: 40px; padding: 6px 14px; }
.etiqueta-sugerida {
  display: inline-block; margin-left: 6px; font-size: 0.75rem; font-weight: 700; padding: 2px 8px;
  border-radius: 999px; background: var(--lima); color: var(--tinta);
}

/* Constancia de borrado y confirmaciones positivas. */
.aviso-bien { background: var(--bien-fondo); color: var(--texto); border-left: 4px solid var(--bien);
  padding: 8px 16px; border-radius: var(--radio-sm); margin: 16px 0; max-width: 46rem; }

/* Consentimiento compacto: cada casilla con su detalle plegable. */
.consentimiento { gap: 6px; }
.consentimiento .casilla { margin-top: 10px; }
.detalle { margin: 0 0 4px 36px; font-size: 0.9rem; color: var(--suave); }
.detalle summary { cursor: pointer; color: var(--acento); font-weight: 600; }
.detalle p { margin: 6px 0 0; }

/* Caja de comentarios. */
.comentario-caja textarea { width: 100%; }
.estrellas { display: flex; gap: 6px; flex-wrap: wrap; border: 0; padding: 0; margin: 0; }
.estrellas label { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 999px;
  background: var(--fondo); border: 1px solid var(--borde); cursor: pointer; }