/* ==========================================================================
   Acceso miembros — AMPA El Pinar
   --------------------------------------------------------------------------
   Sin frameworks y sin CDNs: esta página muestra datos personales y no debe
   cargar nada de terceros. Paleta y tipografía tomadas del sitio público
   (marca del colegio) para que se reconozca como el mismo proyecto.

   Se usa en móvil a menudo, así que los controles son grandes y la tabla se
   desplaza en horizontal en vez de romper el diseño.
   ========================================================================== */

:root {
  --rojo-900: #5a1610;
  --rojo-800: #7a1f16;
  --rojo-700: #94301f;
  --crema:    #fbf7f0;
  --papel:    #ffffff;
  --gris-900: #2b2622;
  --gris-700: #4a443f;
  --gris-500: #6f6862;
  --gris-300: #d8d1c8;
  --gris-100: #efe9e1;
  --ambar-600: #b06a15;
  --verde-700: #2f6b45;
  --sombra:   0 1px 2px rgba(43, 38, 34, .06), 0 4px 12px rgba(43, 38, 34, .05);
  --radio:    10px;
}

* { box-sizing: border-box; }

html, body { margin: 0; padding: 0; }

/* --------------------------------------------------------------------------
   EL ATRIBUTO `hidden` TIENE QUE OCULTAR DE VERDAD
   --------------------------------------------------------------------------
   Cualquier regla que fije un `display` explícito (`.acceso { display:flex }`,
   `.pestanas { display:flex }`) GANA al atributo `hidden` del HTML: el elemento
   se queda en pantalla aunque el JavaScript le ponga `hidden = true`. Éste era
   el motivo de que, tras entrar, el bloque de acceso siguiera ocupando una
   pantalla entera encima del panel y hubiera que bajar con el scroll — y de que
   un usuario de sólo consulta viera la pestaña «Usuarios», que le responde 403.

   `!important` es necesario: `[hidden]` y `.pestanas` tienen la MISMA
   especificidad, así que sin él decidiría el orden del fichero.
   -------------------------------------------------------------------------- */
[hidden] { display: none !important; }

body {
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--crema);
  color: var(--gris-900);
  font-size: 16px;
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
}

.oculto {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* --------------------------------------------------------------------------
   Acceso
   -------------------------------------------------------------------------- */

.acceso {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
}

.acceso__caja {
  width: 100%; max-width: 380px;
  background: var(--papel);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 28px 24px;
  box-shadow: var(--sombra);
}

.acceso__titulo {
  margin: 0 0 4px;
  font-size: 1.4rem; font-weight: 700;
  color: var(--rojo-800);
}

.acceso__sub {
  margin: 0 0 22px;
  font-size: .9rem; color: var(--gris-500);
}

.acceso__aviso {
  margin: 14px 0 0;
  padding: 10px 12px;
  border-radius: 8px;
  background: #fdecea;
  border: 1px solid #f0bdb6;
  color: var(--rojo-900);
  font-size: .9rem;
}

/* --------------------------------------------------------------------------
   Campos y botones
   -------------------------------------------------------------------------- */

.campo { margin-bottom: 16px; }

.campo__etiqueta {
  display: block;
  margin-bottom: 6px;
  font-size: .85rem; font-weight: 600;
  color: var(--gris-700);
}

.campo__control {
  width: 100%;
  min-height: 44px;                 /* cómodo en móvil */
  padding: 10px 12px;
  font: inherit; font-size: .95rem;
  color: var(--gris-900);
  background: var(--papel);
  border: 1px solid var(--gris-300);
  border-radius: 8px;
}

.campo__control:focus-visible {
  outline: 3px solid var(--rojo-700);
  outline-offset: 1px;
  border-color: var(--rojo-700);
}

.campo__control--compacto {
  min-height: 38px;
  padding: 6px 8px;
  font-size: .875rem;
}

.campo__control--notas { min-width: 190px; }

.campo__ayuda {
  margin: 6px 0 0;
  font-size: .8rem; color: var(--gris-500);
}

.boton {
  font: inherit; font-size: .95rem; font-weight: 600;
  min-height: 44px;
  padding: 10px 16px;
  border-radius: 8px;
  border: 1px solid transparent;
  cursor: pointer;
}

.boton:focus-visible {
  outline: 3px solid var(--rojo-700);
  outline-offset: 2px;
}

.boton--primario {
  background: var(--rojo-800);
  color: #fff;
}
.boton--primario:hover { background: var(--rojo-900); }
.boton--primario:disabled { opacity: .6; cursor: progress; }

.boton--suave {
  background: var(--papel);
  color: var(--gris-900);
  border-color: var(--gris-300);
}
.boton--suave:hover { background: var(--gris-100); }

.boton--bloque { width: 100%; }

/* --------------------------------------------------------------------------
   Cabecera
   -------------------------------------------------------------------------- */

.cabecera {
  background: var(--papel);
  border-bottom: 1px solid var(--gris-300);
  padding: 18px 24px;
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between;
}

.cabecera__titulo {
  margin: 0;
  font-size: 1.15rem; font-weight: 700;
  color: var(--rojo-800);
}

.cabecera__sub {
  margin: 2px 0 0;
  font-size: .85rem; color: var(--gris-500);
}

.cabecera__acciones {
  display: flex; flex-wrap: wrap; gap: 8px;
}

/* --------------------------------------------------------------------------
   Contenido
   -------------------------------------------------------------------------- */

.contenido {
  max-width: 1180px;
  margin: 0 auto;
  padding: 24px;
}

/* Resumen: la cifra de socios es lo primero que mira la junta */

.resumen {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
  margin-bottom: 22px;
}

.tarjeta {
  background: var(--papel);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  padding: 16px;
  box-shadow: var(--sombra);
}

.tarjeta__cifra {
  margin: 0;
  font-size: 2rem; font-weight: 700;
  line-height: 1.1;
  color: var(--rojo-800);
}

.tarjeta__titulo {
  margin: 4px 0 0;
  font-size: .85rem; font-weight: 600;
  color: var(--gris-500);
  text-transform: uppercase;
  letter-spacing: .03em;
}

.tarjeta__pie {
  margin: 8px 0 0;
  font-size: .8rem;
  color: var(--ambar-600);
  font-weight: 600;
}

.tarjeta__pie--completo { color: var(--verde-700); }

.tarjeta--destacada {
  border-color: var(--rojo-700);
  border-width: 2px;
}

/* Filtros */

.filtros {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.filtros .campo__etiqueta { margin-bottom: 4px; }

.mensaje {
  margin: 0 0 14px;
  padding: 10px 14px;
  border-radius: 8px;
  background: #eaf5ee;
  border: 1px solid #bcdcc8;
  color: var(--verde-700);
  font-size: .9rem;
}

.mensaje--error {
  background: #fdecea;
  border-color: #f0bdb6;
  color: var(--rojo-900);
}

/* --------------------------------------------------------------------------
   Tabla
   -------------------------------------------------------------------------- */

.tabla-envoltorio {
  background: var(--papel);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  overflow-x: auto;                 /* en móvil se desplaza, no se rompe */
  box-shadow: var(--sombra);
}

.tabla {
  width: 100%;
  border-collapse: collapse;
  font-size: .9rem;
}

.tabla th, .tabla td {
  padding: 12px 14px;
  text-align: left;
  vertical-align: middle;
  border-bottom: 1px solid var(--gris-100);
}

.tabla thead th {
  background: var(--crema);
  font-size: .78rem; font-weight: 700;
  color: var(--gris-700);
  text-transform: uppercase;
  letter-spacing: .03em;
  white-space: nowrap;
  position: sticky; top: 0;
}

.tabla__orden { cursor: pointer; }
.tabla__orden:focus-visible { outline: 3px solid var(--rojo-700); }

.tabla tbody tr:hover { background: #fdfbf7; }
.tabla tbody tr:last-child td { border-bottom: 0; }

.tabla__fecha { white-space: nowrap; color: var(--gris-500); font-size: .84rem; }

/* Posición en la lista. Estrecha, discreta y alineada a la derecha para que los
   dígitos queden en columna con los números de distinta longitud (9 / 10 / 100).
   `tabular-nums` evita que el ancho baile al ordenar. */
.tabla__num {
  width: 1%;
  white-space: nowrap;
  text-align: right;
  color: var(--gris-500);
  font-size: .84rem;
  font-variant-numeric: tabular-nums;
}
.tabla thead th.tabla__num { text-align: right; }

.tabla a { color: var(--rojo-800); }
.tabla a:focus-visible { outline: 3px solid var(--rojo-700); outline-offset: 1px; }

.pildora {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .76rem; font-weight: 700;
  white-space: nowrap;
}

.pildora--socio { background: #e3f0e8; color: var(--verde-700); }
.pildora--info  { background: #f3ede3; color: var(--gris-700); }

.vacio {
  margin: 0;
  padding: 34px 20px;
  text-align: center;
  color: var(--gris-500);
  font-size: .92rem;
}

.pie {
  margin: 14px 0 0;
  font-size: .82rem;
  color: var(--gris-500);
}

/* --------------------------------------------------------------------------
   Pestañas del panel
   -------------------------------------------------------------------------- */

.pestanas {
  display: flex;
  gap: 6px;
  margin: 0 0 18px;
  border-bottom: 2px solid var(--gris-300);
}

.pestanas__boton {
  appearance: none;
  background: none;
  border: 0;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 700;
  font-size: .92rem;
  color: var(--gris-500);
  cursor: pointer;
  border-radius: var(--radio) var(--radio) 0 0;
}

.pestanas__boton:hover { background: var(--gris-100); color: var(--gris-900); }

.pestanas__boton:focus-visible {
  outline: 3px solid var(--rojo-700);
  outline-offset: -3px;
}

.pestanas__boton--activa {
  color: var(--rojo-800);
  border-bottom-color: var(--rojo-700);
}

/* --------------------------------------------------------------------------
   Gestión de usuarios
   -------------------------------------------------------------------------- */

.bloque {
  background: var(--papel);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  box-shadow: var(--sombra);
  padding: 20px;
  margin-bottom: 20px;
}

.bloque__titulo {
  margin: 0 0 6px;
  font-size: 1.05rem;
  color: var(--gris-900);
}

.bloque__ayuda {
  margin: 0 0 16px;
  font-size: .86rem;
  color: var(--gris-500);
  max-width: 62ch;
}

.formulario-usuario {
  display: grid;
  grid-template-columns: repeat(3, minmax(160px, 1fr)) auto;
  gap: 12px;
  align-items: end;
}

.boton--pequeno {
  padding: 5px 10px;
  font-size: .8rem;
}

/* Rojo para lo irreversible (eliminar), y sólo ahí: si todo fuera rojo, dejaría
   de avisar de nada. */
.boton--peligro { color: var(--rojo-800); border-color: var(--gris-300); }
.boton--peligro:hover:not(:disabled) { background: #fbecea; }

.boton:disabled {
  opacity: .45;
  cursor: not-allowed;
}

.acciones-fila {
  display: flex;
  gap: 6px;
  white-space: nowrap;
}

.pildora--baja { background: var(--gris-100); color: var(--gris-500); }

/* Una cuenta desactivada se atenúa pero SIGUE visible: si desapareciera, no
   habría forma de volver a activarla desde el panel. */
.fila--inactiva td:not(:last-child) { opacity: .6; }
.fila--inactiva td:first-child { text-decoration: line-through; }

.aviso--error { color: var(--rojo-800); }

/* --------------------------------------------------------------------------
   Móvil
   -------------------------------------------------------------------------- */

@media (max-width: 720px) {
  .contenido { padding: 16px; }
  .cabecera { padding: 14px 16px; }
  .filtros { grid-template-columns: 1fr; }
  .resumen { grid-template-columns: repeat(2, 1fr); }
  .cabecera__acciones { width: 100%; }
  .cabecera__acciones .boton { flex: 1 1 auto; }
  .formulario-usuario { grid-template-columns: 1fr; }
  .pestanas__boton { padding: 9px 12px; font-size: .86rem; }
}

/* Respeto por quien pide menos movimiento */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* --------------------------------------------------------------------------
   Píldoras de estado (tabla de solo lectura)
   -------------------------------------------------------------------------- */

.pildora--estado-nuevo      { background: #f7ecdb; color: var(--ambar-600); }
.pildora--estado-confirmado { background: #e7eef6; color: #315a7d; }
.pildora--estado-socio      { background: #e3f0e8; color: var(--verde-700); }
.pildora--estado-baja       { background: var(--gris-100); color: var(--gris-500); }

.tabla__estado {
  /* La píldora y su subtítulo, uno debajo del otro sin descuadrar la tabla.
     La celda no crece a lo ancho (el subtítulo es corto) y la fila crece sólo lo
     que ocupa esa línea: se ajusta a mano el interlineado para que la fila pase de
     38 a ~42 px en vez de a ~50. Es la alternativa a añadir una columna nueva, que
     era lo que descuadraba la tabla. */
  white-space: nowrap;
}

.tabla__origen {
  /* Medido: con 3px/.68rem la fila subía a 46 px (de 41). Con estos valores se
     queda en 44 px: +3 px por fila, que es lo mínimo manteniendo el texto legible
     (~10 px). La explicación larga va en el `title`, así que el subtítulo sólo
     tiene que ser reconocible de un vistazo, no leerse cómodo. */
  display: block;
  margin-top: 2px;
  font-size: .64rem;
  line-height: .95;
  letter-spacing: .01em;
  color: var(--gris-500);
}

/* De dónde salió el estado. Dos colores con significado:
     verde  = lo hizo la persona pulsando el enlace (prueba real)
     ámbar  = lo puso la junta a mano (no hay prueba de que confirmara)
   Y gris para lo que aún no ha pasado nada. */
.tabla__origen--enlace    { color: var(--verde-700); }
.tabla__origen--enviado   { color: var(--gris-500); }
.tabla__origen--sin-aviso { color: var(--ambar-600); }
.tabla__origen--junta     { color: var(--ambar-600); }

.tabla__notas {
  max-width: 220px;
  white-space: normal;
  color: var(--gris-700);
  font-size: .85rem;
}

/* --------------------------------------------------------------------------
   Modal de edición
   -------------------------------------------------------------------------- */

.modal {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal[hidden] { display: none; }

.modal__fondo {
  position: absolute;
  inset: 0;
  background: rgba(43, 38, 34, .45);
}

.modal__caja {
  position: relative;
  width: 100%;
  max-width: 460px;
  background: var(--papel);
  border: 1px solid var(--gris-300);
  border-radius: var(--radio);
  box-shadow: 0 8px 30px rgba(43, 38, 34, .18);
  padding: 20px;
}

.modal__cabecera {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}

.modal__titulo {
  margin: 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gris-900);
}

.modal__cerrar {
  background: none;
  border: 0;
  font-size: 1.5rem;
  line-height: 1;
  padding: 0 6px;
  cursor: pointer;
  color: var(--gris-500);
}

.modal__cerrar:hover { color: var(--gris-900); }

.modal__nombre {
  margin: 0 0 16px;
  color: var(--gris-700);
  font-size: .9rem;
}

.modal__acciones {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  margin-top: 8px;
}

.modal__acciones .boton--peligro { margin-right: auto; }


/* ==========================================================================
   COMPACTADO PARA QUE TODO SEA LEGIBLE EN PANTALLA
   --------------------------------------------------------------------------
   Alex: «hay tanto espacio que no cabe la información en pantalla, podemos
   ajustarlo para que sea todo legible?». Su pantalla es 1707x853: mucho ancho y
   poco alto, así que el problema no es la falta de sitio sino el aire de más.

   Se recorta sin volverlo apretado: cabecera, tarjetas de resumen, filtros y
   filas de la tabla. Nada baja de ~38 px de alto, que es lo que se puede pulsar
   con el ratón sin fallar.
   ========================================================================== */

/* Cabecera: fuera el relleno de más */
.cabecera { padding: 12px 24px; gap: 10px; }
.cabecera .boton, .cabecera__titulo { line-height: 1.25; }

.contenido { padding: 18px 24px; }

/* Tarjetas de resumen: la cifra y el título más juntos */
.resumen { gap: 12px; margin-bottom: 16px; }
.tarjeta { padding: 13px 15px; }
.tarjeta__cifra { font-size: 1.7rem; }
.tarjeta__titulo { margin-top: 2px; font-size: .8rem; }
.tarjeta__pie { margin-top: 5px; font-size: .78rem; }

/* Filtros: se quedan en una sola fila, que ya son tres campos cortos */
.filtros { gap: 10px; margin-bottom: 14px; }
.filtros .campo__etiqueta { margin-bottom: 2px; }
.campo__control { padding: 8px 10px; font-size: .92rem; }

/* La tabla: el recorte que más se nota */
.tabla { font-size: .86rem; }
.tabla th, .tabla td { padding: 7px 10px; }
.tabla thead th { font-size: .74rem; }
.tabla__notas { max-width: 200px; font-size: .8rem; line-height: 1.35; }

/* La fecha en una línea: partirla en dos SUBÍA la fila (57 px) y el ancho no era
   el problema. Se deja corta (día/mes + hora); la completa va en el `title`. */
.tabla__fecha { white-space: nowrap; }

.pildora { padding: 2px 8px; font-size: .74rem; }

/* En pantallas bajas, un apretón extra: priorizar ver filas sobre ver aire. */
@media (max-height: 900px) {
  .contenido { padding: 14px 20px; }
  .resumen { margin-bottom: 12px; }
  .tabla th, .tabla td { padding: 6px 9px; }
  .filtros { margin-bottom: 12px; }
}

/* En pantallas muy bajas, la cifra del resumen no necesita ser enorme. */
@media (max-height: 780px) {
  .tarjeta__cifra { font-size: 1.5rem; }
}


/* --------------------------------------------------------------------------
   Recorte de las NOTAS: una nota larga estiraba la fila hasta 82 px y, al ir la
   lista de más nuevo a más antiguo, las notas nuevas salían arriba y empujaban
   toda la tabla. A dos líneas se sigue leyendo y la fila no se dispara; el texto
   completo está en el `title` de la celda.
   -------------------------------------------------------------------------- */
/* El recorte va en un elemento INTERNO, no en el <td>: poner
   `display: -webkit-box` en una celda de tabla la saca del modelo de tabla y
   DESCUADRA la fila entera (se midió: las filas pasaban de 57 a 70 px). */
.tabla__notas { max-width: 190px; line-height: 1.3; }
.tabla__notas-recorte {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Altura mínima, no forzada: si hay que crecer por contenido, crece. */
.tabla tbody tr { height: 38px; }


/* --------------------------------------------------------------------------
   UNA LÍNEA POR CELDA: la causa de que la tabla no cupiera.

   Medido: el contenido de una fila ocupa 22 px (la píldora de estado), pero la
   fila medía 57 px. La razón no era el relleno, que ya estaba en 6 px: era que
   **un nombre o un correo largo pasaba a dos líneas**, y con `border-collapse`
   eso estira la fila ENTERA. Con nombres reales («María del Pilar Zapata
   Rubio») casi todas las filas crecían.

   Se corta con puntos suspensivos y el valor completo queda en el `title` (al
   pasar el ratón). Así la fila baja a ~34 px y caben muchas más.
   -------------------------------------------------------------------------- */
.tabla__nombre, .tabla__correo, .tabla__fecha {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.tabla__nombre { max-width: 230px; }
.tabla__correo { max-width: 240px; }
.tabla__fecha  { max-width: 120px; }

/* La píldora tampoco debe crecer de alto. */
.pildora { line-height: 1.35; }


/* --------------------------------------------------------------------------
   LA CAUSA DE VERDAD de que la tabla no cupiera.

   Medido celda por celda: el contenido era de 22 px, el relleno ya estaba en
   6 px, pero la fila medía 57 px. El culpable era el botón **Editar** de la
   columna Acciones: `.boton` tiene `min-height: 44px`, y 44 + relleno = 57 px de
   fila. Es decir, TODAS las filas de la tabla estaban dimensionadas por el
   botón de editar.

   Un panel de consulta no necesita botones de 44 px en cada fila (esa medida es
   para dedos en pantallas táctiles, no para el ratón en la tabla de gestión):
   basta con que se puedan pulsar con comodidad. 30 px, con el `min-height` de
   `.boton` anulado sólo aquí.
   -------------------------------------------------------------------------- */
.tabla .boton--pequeno {
  min-height: 30px;
  padding: 3px 10px;
  font-size: .78rem;
}

/* Consecuencia: la fila baja a ~44 px. */


/* --------------------------------------------------------------------------
   El bloque de ARRIBA se comía un tercio de la pantalla (tarjetas 120 px +
   filtros 66 + márgenes), antes de llegar a la tabla. Se recorta sin dejarlo
   apretado: la cifra sigue destacando y los campos siguen siendo cómodos.
   -------------------------------------------------------------------------- */
.tarjeta { padding: 10px 14px; }
.tarjeta__cifra { font-size: 1.5rem; }
.tarjeta__titulo { margin-top: 0; font-size: .76rem; }
.tarjeta__pie { margin-top: 3px; font-size: .74rem; }
.resumen { gap: 10px; margin-bottom: 12px; }

.filtros { margin-bottom: 10px; }
.campo__control { padding: 7px 9px; }

/* Un poco menos de relleno en las filas: el contenido son 22 px reales. */
.tabla th, .tabla td { padding: 5px 9px; }

@media (max-height: 900px) {
  .contenido { padding: 12px 18px; }
  .tarjeta { padding: 9px 12px; }
}


/* ==========================================================================
   SECCIONES NUEVAS: PROPUESTAS Y CALENDARIO
   ========================================================================== */

/* Píldoras de estado y viabilidad de una propuesta. El color sigue el mismo
   criterio que en el resto: verde = avanzado, ámbar = en curso, gris = parado.
   Así se lee de un vistazo en qué punto está cada cosa, sin leer el texto. */
.pildora--prop-recibida   { background: #fdf0dc; color: #8a5a12; }
.pildora--prop-revisada   { background: #e7eef6; color: #315a7d; }
.pildora--prop-publicada  { background: #e3f0e8; color: var(--verde-700); }
.pildora--prop-archivada  { background: var(--gris-100); color: var(--gris-500); }

.pildora--viab-estudio    { background: var(--gris-100); color: var(--gris-700); }
.pildora--viab-viable     { background: #e7eef6; color: #315a7d; }
.pildora--viab-en_marcha  { background: #fdf0dc; color: #8a5a12; }
.pildora--viab-hecha      { background: #e3f0e8; color: var(--verde-700); }
.pildora--viab-descartada { background: var(--gris-100); color: var(--gris-500); }

.pildora--tipo    { background: #f3ede3; color: var(--gris-700); }
.pildora--visible { background: #e3f0e8; color: var(--verde-700); }
.pildora--borrador { background: #fdf0dc; color: #8a5a12; }

/* Los modales nuevos son más anchos: llevan textos largos y varias columnas. */
.modal__caja--ancha { max-width: 780px; }

.modal__dos-columnas { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal__tres-columnas { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 12px; }

/* Texto que escribió la familia: se muestra tal cual, en un recuadro para que no
   se confunda con los campos del formulario. */
.modal__texto {
  margin: 0;
  padding: 10px 12px;
  background: var(--crema);
  border: 1px solid var(--gris-300);
  border-radius: 8px;
  white-space: pre-wrap;
  font-size: .9rem;
  max-height: 150px;
  overflow-y: auto;
}

.modal__meta { margin: 0 0 12px; font-size: .82rem; color: var(--gris-500); }

.campo__ayuda { margin: 4px 0 0; font-size: .78rem; color: var(--gris-500); line-height: 1.4; }

.campo__contador { display: block; margin: 4px 0 0; font-size: .74rem; color: var(--gris-500); text-align: right; }
.campo__contador--cerca { color: var(--ambar-600); font-weight: 600; }

/* Casilla de «visible en la web»: cómoda de pulsar, con su etiqueta al lado. */
.interruptor {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: .92rem; font-weight: 600; cursor: pointer;
}
.interruptor input { width: 18px; height: 18px; accent-color: var(--rojo-800); cursor: pointer; }

.acciones-calendario { margin-top: 4px; }

@media (max-width: 720px) {
  .modal__dos-columnas, .modal__tres-columnas { grid-template-columns: 1fr; }
}