@font-face {
  font-family: 'Poppins';
  font-weight: 400;
  font-display: swap;
  src: url('../assets/fuentes/poppins-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Poppins';
  font-weight: 500;
  font-display: swap;
  src: url('../assets/fuentes/poppins-500.woff2') format('woff2');
}
:root {
  --violeta: #662D7D;
  --magenta: #E9287F;
  --turquesa: #5DCCC6;
  --aletea-violeta-profundo: #4D1F61;
  --aletea-amarillo: #F2B544;
  --aletea-azul: #3976B9;
  --aletea-fondo: #FCFAFD;
  --aletea-superficie-violeta: #F8F3FA;
  --aletea-superficie-turquesa: #F5FBFA;
  --aletea-superficie-magenta: #FFF8FB;
  --magenta-texto: #C11E6B;
  --turquesa-texto: #0F6E56;
  --texto: #2C2C2A;
  --texto-suave: #5F5E5A;
  --linea: #EFEBF1;
  --fondo: #FFFFFF;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  font-family: 'Poppins', system-ui, sans-serif;
  color: var(--texto);
  background: var(--fondo);
}

.ficha {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  min-height: 44px;
  border: 1px solid var(--linea);
  border-radius: 22px;
  background: var(--fondo);
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  cursor: pointer;
}
.ficha.seleccionada:not(.quitable) {
  border-color: var(--violeta);
  background: #F3E9F7;
  color: var(--violeta);
}
.ficha.seleccionada.sin-asignar::before { background: var(--fondo); }
.ficha.atenuada { opacity: 0.45; }
.pastilla {
  font-size: 11px;
  padding: 2px 8px;
  border-radius: 10px;
  background: #F3E9F7;
  color: var(--violeta);
}
.boton {
  min-height: 44px;
  padding: 10px 18px;
  border: 1px solid var(--violeta);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--violeta);
  font: inherit;
  cursor: pointer;
  transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease;
}
.app-cms button:not(:disabled) { transition: transform 150ms ease, box-shadow 150ms ease, background-color 150ms ease, border-color 150ms ease, color 150ms ease; }
.app-cms button:not(:disabled):hover, .boton:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 7px 16px rgba(61, 29, 72, .12); }
.app-cms button:not(:disabled):active, .boton:not(:disabled):active { transform: translateY(1px) scale(.985); box-shadow: 0 2px 5px rgba(61, 29, 72, .1); }
.boton:disabled { transform: none; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
  .app-cms button, .boton { transition: none; }
  .app-cms button:not(:disabled):hover, .boton:not(:disabled):hover, .app-cms button:not(:disabled):active, .boton:not(:disabled):active { transform: none; }
}
.boton-con-icono { display: inline-flex; align-items: center; justify-content: center; gap: 7px; }
.boton-con-icono svg { width: 18px; height: 18px; flex: 0 0 auto; }
.boton:disabled { opacity: 0.4; cursor: default; }
.boton-peligro { border-color: #A51E1A; color: #A51E1A; }
button, input, select, textarea { font: inherit; }

.encabezado-lista {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  padding: 16px 16px 12px;
  border-bottom: 1px solid var(--linea);
}
.campo { display: flex; flex-direction: column; gap: 4px; }
.campo-rotulo { font-size: 12px; color: var(--texto-suave); }
.campo input {
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  background: var(--fondo);
  border: 1px solid var(--linea);
  border-radius: 10px;
}
.campo input[type=text] { min-width: 140px; }
.fecha-larga { margin: 0 0 10px; font-size: 15px; color: var(--violeta); }

.barra { display: flex; gap: 8px; padding: 12px 16px; }
.grupo { padding: 8px 16px 24px; }
.grupo-encabezado h2 { font-size: 18px; font-weight: 500; margin: 0 0 4px; }
.pendientes { margin: 0 0 12px; font-size: 13px; color: var(--texto-suave); }
.columna { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.ficha-detalle { font-size: 12px; color: var(--magenta-texto); }

/* Los voluntarios se dibujan una sola vez, debajo de los dos grupos. */
.voluntarios { padding: 8px 16px 24px; border-top: 1px solid var(--linea); }
.voluntarios h2 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.columna-voluntarios { flex-direction: row; flex-wrap: wrap; align-items: center; }

/* Queda pegada al borde inferior mientras se elige el voluntario. */
.barra-seleccion {
  position: sticky;
  bottom: 0;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: var(--fondo);
  border-top: 1px solid var(--linea);
  box-shadow: 0 -2px 8px rgba(44, 44, 42, 0.08);
}
.barra-seleccion-texto { font-size: 15px; color: var(--violeta); }

.navegacion { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.navegacion .activa { background: var(--violeta); color: var(--fondo); }
.navegacion-escritorio .navegacion-mas { position: relative; }
.navegacion-escritorio .boton-navegacion {
  display: inline-flex; align-items: center; min-height: 42px; padding: 10px 14px;
  border: 1px solid var(--violeta); border-radius: 12px; color: var(--violeta);
  background: var(--fondo); font: inherit; font-weight: 600; cursor: pointer; list-style: none;
}
.navegacion-escritorio .boton-navegacion::-webkit-details-marker { display: none; }
.navegacion-escritorio .navegacion-mas > .menu-navegacion {
  position: absolute; z-index: 30; top: calc(100% + 8px); left: 0; display: grid; gap: 6px;
  min-width: 205px; padding: 8px; border: 1px solid var(--linea); border-radius: 14px;
  background: var(--fondo); box-shadow: 0 10px 32px rgba(44, 44, 42, .16);
}
.navegacion-escritorio .navegacion-mas:not([open]) > .menu-navegacion { display: none; }
.navegacion-escritorio .menu-navegacion .boton { width: 100%; text-align: left; }
.inicio { padding: 20px 16px 32px; max-width: 900px; margin: 0 auto; }
.inicio-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.inicio-encabezado .boton { flex: 0 0 auto; margin: 0; }
.inicio h2 { margin-bottom: 4px; }
.inicio-resumen { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 18px 0; }
.inicio-dato { padding: 14px; border-radius: 12px; background: #F3EAF7; color: var(--violeta); font-weight: 600; }
.inicio-dato.con-alerta { background: #FDE7F1; color: var(--magenta-texto); }
.inicio-buscar { width: 100%; min-height: 48px; padding: 10px 14px; border: 1px solid var(--linea); border-radius: 12px; font: inherit; }
.inicio-resultados { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.inicio-resultado { font-size: 14px; }
.inicio-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; }
.inicio-leyenda { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 8px 0 18px; color: var(--texto-suave); font-size: 13px; }
.inicio-leyenda strong { color: var(--texto); margin-right: 2px; }
.leyenda-grupo, .leyenda-voluntario, .leyenda-alerta { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 14px; font-weight: 500; }
.leyenda-grupo.grupo-1 { background: #E6F7F4; color: var(--turquesa-texto); }
.leyenda-grupo.grupo-2 { background: #FBEAF0; color: var(--magenta-texto); }
.leyenda-voluntario { background: #F3EAF7; color: var(--violeta); }
.leyenda-alerta { background: #FFF5DE; color: #805800; }
.inicio-vacio { width: 100%; padding: 12px; text-align: left; }
.inicio-vacio p { margin-top: 0; }
.inicio-proximos { padding: 16px; border-left: 4px solid var(--turquesa); border-radius: 4px 12px 12px 4px; background: #F1FAF8; }
.inicio-proximos h3 { margin: 0 0 8px; color: var(--turquesa-texto); }
.inicio-fecha { margin: 8px 0; font-size: 14px; }
.inicio-trabajo, .inicio-estado { margin-top: 16px; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; }
.inicio-trabajo h3 { margin: 0 0 10px; color: var(--violeta); }
.inicio-tarea { display: block; width: 100%; margin-top: 8px; text-align: left; border-color: #E9D8F0; }
.inicio-pendientes-resumen { margin: 0 0 8px; color: var(--texto-suave); font-size: 14px; }
.inicio-tarea-prioritaria { border-left: 3px solid var(--magenta); }
.inicio-estado { display: grid; gap: 4px; background: #FAFAFC; font-size: 14px; }
.inicio-estado strong { color: var(--turquesa-texto); }
.inicio-sincronizacion { color: var(--texto-suave); font-size: 13px; }
.inicio-tendencia { color: var(--violeta); font-weight: 500; }
.inicio-semanal { margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--linea); }
.inicio-semanal h3, .inicio-semanal p { margin: 0 0 5px; }
.inicio-semanal h3 { color: var(--violeta); font-size: 14px; }
.seccion { padding: 16px; }
.seccion h2 { font-size: 18px; font-weight: 500; }
.formulario { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; align-items: center; }
.formulario input[type=text], .formulario select {
  min-height: 44px; padding: 8px 12px; font: inherit;
  border: 1px solid var(--linea); border-radius: 10px;
}
.fila-persona {
  display: flex; gap: 12px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.fila-nombre { flex: 1; }

/* Esconde el control sin sacarlo del arbol de accesibilidad. */
.oculto-visualmente {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}
.boton-foto {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  cursor: pointer;
}
.boton-foto:focus-within { outline: 2px solid var(--violeta); outline-offset: 2px; }

.opciones-imagen { display: flex; flex-wrap: wrap; gap: 16px; padding: 16px; }
.opcion { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; }
.info-imagen { padding: 0 16px 8px; font-size: 13px; color: var(--texto-suave); }
.aviso-recorte {
  margin: 0 16px 12px; padding: 12px; border-radius: 10px;
  background: #FAEEDA; color: #633806; font-size: 14px; line-height: 1.5;
}
.aviso {
  margin: 0 16px 12px; padding: 12px; border-radius: 10px;
  background: #F1EAF5; color: var(--violeta);
  font-size: 14px; line-height: 1.5;
}
.acciones-imagen { display: flex; gap: 8px; padding: 0 16px 16px; flex-wrap: wrap; }
.lienzo-vista-previa {
  display: block; width: calc(100% - 32px); height: auto; margin: 0 16px 24px;
  border: 1px solid var(--linea); border-radius: 12px;
}

/* Ingreso institucional: la marca encuadra el acceso sin desperdiciar el
   escritorio ni convertir el formulario en una franja de pantalla completa. */
.ingreso {
  width: min(100%, 560px); margin: 0 auto; padding: clamp(28px, 5vw, 64px) 20px 28px;
  display: grid; gap: 20px;
}
.ingreso-aletea::before {
  content: ''; position: fixed; z-index: -1; inset: 0;
  background:
    radial-gradient(circle at 12% 12%, rgba(93, 204, 198, .18), transparent 26rem),
    radial-gradient(circle at 88% 18%, rgba(233, 40, 127, .12), transparent 24rem),
    var(--aletea-fondo);
}
.ingreso-marca { display: grid; justify-items: center; gap: 8px; text-align: center; }
.ingreso-marca img { width: min(236px, 70vw); height: auto; }
.ingreso-marca p { margin: 0; color: var(--texto-suave); font-size: 15px; font-weight: 500; }
.ingreso-tarjeta {
  padding: clamp(24px, 5vw, 40px); border: 1px solid rgba(102, 45, 125, .14);
  border-radius: 24px; background: rgba(255, 255, 255, .94); box-shadow: 0 18px 50px rgba(77, 31, 97, .10);
}
.ingreso-eyebrow { margin: 0 0 8px; color: var(--turquesa-texto); font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; }
.titulo-ingreso { margin: 0 0 8px; font-size: clamp(26px, 5vw, 34px); line-height: 1.14; font-weight: 500; color: var(--violeta); }
.ayuda-ingreso { margin: 0 0 24px; font-size: 15px; line-height: 1.6; color: var(--texto-suave); }
.formulario-ingreso, .formulario-token { display: flex; flex-direction: column; gap: 14px; }
.formulario-ingreso .campo input, .formulario-token .campo input { width: 100%; }
.ingreso .campo-rotulo { color: var(--violeta); font-weight: 500; }
.ingreso .boton-principal { justify-content: center; min-height: 52px; margin-top: 4px; }
.opcion input[type=checkbox] { width: 20px; height: 20px; }
.boton-principal { background: var(--violeta); color: var(--fondo); font-size: 16px; }
.error-ingreso { margin: 14px 0 0; font-size: 14px; line-height: 1.5; color: var(--magenta-texto); }
.error-ingreso:empty { display: none; }
.ingreso-token { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--linea); }
.ingreso-token summary {
  display: flex; align-items: center; min-height: 44px;
  font-size: 15px; color: var(--violeta); cursor: pointer;
}
.ayuda-token { margin: 4px 0 14px; font-size: 13px; line-height: 1.5; color: var(--texto-suave); }

/* Pantalla de ajustes. */
.ajustes { padding: 16px 16px 48px; }
.ajustes h2 { font-size: 20px; font-weight: 500; margin: 0 0 4px; }
.ajustes h3 { font-size: 16px; font-weight: 500; margin: 0 0 10px; }
.ayuda-ajustes { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--texto-suave); }
.error-ajustes { margin: 0 0 14px; font-size: 14px; line-height: 1.5; color: var(--magenta-texto); }
.error-ajustes:empty { display: none; }
.campo select {
  min-height: 44px; padding: 8px 12px; font: inherit; font-size: 15px;
  color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px;
}
.fila-acceso {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 10px 0; border-bottom: 1px solid var(--linea);
}
.fila-acceso .fila-nombre { flex: 1 1 auto; min-width: 100px; }
.fila-usuario { font-size: 13px; color: var(--texto-suave); }
.fila-acceso select {
  min-height: 44px; padding: 8px 12px; font: inherit; font-size: 14px;
  color: var(--texto); background: var(--fondo);
  border: 1px solid var(--linea); border-radius: 10px;
}
.formulario-agregar, .formulario-rotar { display: flex; flex-direction: column; gap: 12px; }
.permisos-acceso, .permisos-editar { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px; border: 1px solid var(--linea); border-radius: 10px; }
.permisos-acceso legend { color: var(--texto-suave); font-size: 13px; }
.permisos-acceso label, .permisos-editar label { font-size: 14px; }
.permisos-editar { flex-basis: 100%; }
.permisos-editar summary { width: 100%; cursor: pointer; color: var(--violeta); }
.aviso-admin {
  margin: 0; padding: 10px 12px; border-radius: 10px;
  background: #F1EAF5; color: var(--violeta); font-size: 13px; line-height: 1.5;
}
.aviso-rotar { margin: 0 0 12px; }

/* Recuadro de la contraseña recien generada. Se ve una sola vez. */
.contrasena-generada {
  margin: 0 0 20px; padding: 14px; border-radius: 12px;
  background: #FAEEDA; border: 1px solid #E4C892; color: #633806;
}
.contrasena-generada h3 { margin: 0 0 6px; color: #633806; }
.aviso-una-vez { margin: 0 0 12px; font-size: 14px; line-height: 1.5; font-weight: 500; }
.aviso-propagacion { margin: 12px 0; font-size: 13px; line-height: 1.5; }
.contrasena-entrada {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 8px;
}
.contrasena-persona { font-size: 13px; flex: 1 1 100%; }
.contrasena-valor {
  flex: 1 1 auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 17px; letter-spacing: 0.5px; word-break: break-all;
  padding: 10px 12px; border-radius: 8px; background: var(--fondo); color: var(--texto);
}
.sin-ingresar { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--linea); }
.sin-ingresar .ayuda-token { margin: 8px 0 0; }

/* Con ajustes y cierre de sesion la navegacion pasa de tres botones a cinco y
   en 375 px se salia de la pantalla. Envuelve en vez de esconder: en un
   telefono nadie descubre un boton que quedo fuera de un scroll horizontal. */
.navegacion { flex-wrap: wrap; }
.navegacion .boton { font-size: 14px; padding: 10px 14px; }

/* Agenda: el mes es un mapa de trabajo, no una tabla de planilla. Las marcas
   coloreadas hacen visible qué pasa ese día y la lista de abajo da el detalle. */
.agenda { padding: 16px; }
.agenda h2 { margin: 0 0 4px; color: var(--violeta); }
.agenda-controles { display: flex; align-items: center; gap: 10px; margin: 18px 0 12px; }
.agenda-mes { min-width: 190px; text-align: center; text-transform: capitalize; }
.agenda-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.agenda-dia-semana { padding: 7px 2px; text-align: center; font-size: 12px; font-weight: 500; color: var(--texto-suave); }
.agenda-dia { min-height: 78px; padding: 6px; border: 1px solid var(--linea); border-radius: 10px; background: #fff; }
.agenda-dia.vacio { border-color: transparent; background: transparent; }
.agenda-numero { display: block; margin-bottom: 4px; font-size: 12px; color: var(--texto-suave); }
.agenda-marca { display: block; overflow: hidden; padding: 3px 5px; border-radius: 6px; font-size: 10px; white-space: nowrap; text-overflow: ellipsis; }
.agenda-marca.cumpleanos { color: var(--turquesa-texto); background: #DFF4F1; }
.agenda-marca.evento { color: var(--magenta-texto); background: #FDE7F1; }
.agenda-marca.efemeride { color: var(--violeta); background: #F1E7F7; }
.agenda-marca.institucional { color: #805800; background: #FFF5DE; }
.agenda-proximos, .agenda-formulario, .agenda-recordatorios { margin-top: 20px; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; }
.agenda-recordatorios { border-left: 4px solid var(--magenta); background: #FFF6FA; }
.agenda-recordatorios h3 { margin: 0 0 8px; color: var(--magenta-texto); }
.agenda-recordatorios p { margin: 7px 0; font-size: 14px; }
.agenda-proximos h3, .agenda-formulario h3 { margin: 0 0 10px; color: var(--violeta); }
.agenda-evento { display: grid; grid-template-columns: 108px minmax(220px, .8fr) minmax(0, 1.6fr); align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--linea); }
.agenda-evento strong { color: var(--violeta); font-size: 13px; }
.agenda-evento span { min-width: 0; font-size: 14px; }
.agenda-evento .agenda-detalle { color: var(--texto-suave); font-size: 13px; }
.agenda-formulario { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; align-items: end; }
.agenda-formulario h3 { grid-column: 1 / -1; }
.agenda-formulario .boton { justify-self: start; }
.agenda-formulario input, .agenda-formulario select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); font: inherit; }
@media (max-width: 620px) { .agenda { padding: 16px 0; } .agenda-dia { min-height: 64px; padding: 4px; } .agenda-marca { font-size: 9px; padding: 2px 3px; } .agenda-formulario { grid-template-columns: 1fr; } .agenda-evento { grid-template-columns: 1fr; gap: 3px; } }
@media (max-width: 620px) { .inicio { padding: 16px 12px 28px; } .inicio-resumen { grid-template-columns: 1fr; } .inicio-acciones .boton { flex: 1 1 calc(50% - 4px); } }

/* ---------------------------------------------------------------------------
   Pantalla ancha.

   Todo lo de arriba esta pensado para el telefono, que es donde se usa esto un
   viernes a la noche, y no cambia. Lo que sigue solo entra a partir de 900 px,
   donde el problema es el opuesto: sobra ancho y el contenido queda desangelado
   contra el borde izquierdo.

   El ancho maximo es 1080 px a proposito: es el mismo ancho que la imagen que
   la aplicacion exporta.
--------------------------------------------------------------------------- */

#app {
  max-width: 1080px;
  margin-inline: auto;
}

@media (min-width: 900px) {
  /* Armar lista pasa a dos columnas: los grupos a la izquierda y la paleta de
     voluntarios fija a la derecha, para no perderla de vista al desplazarse.
     El :has() acota la regla a esta pantalla; las demas siguen en una columna. */
  .cuerpo:has(.grupos) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 300px;
    column-gap: 32px;
    align-items: start;
  }

  .cuerpo:has(.grupos) .encabezado-lista,
  .cuerpo:has(.grupos) .barra,
  .cuerpo:has(.grupos) .barra-seleccion {
    grid-column: 1 / -1;
  }

  .cuerpo:has(.grupos) .grupos { grid-column: 1; }

  .cuerpo:has(.grupos) .voluntarios {
    grid-column: 2;
    position: sticky;
    top: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    border-top: none;
    border-left: 1px solid var(--linea);
    padding-left: 24px;
  }

  /* Las fichas de participante ya no compiten con los voluntarios por el ancho,
     asi que pueden acomodarse de a varias por fila. */
  .columna-participantes {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  /* Filas de texto: acotadas para que la vista no obligue a barrer la pantalla
     de lado a lado leyendo un nombre. */
  .seccion,
  .ajustes { max-width: 760px; }

  /* La imagen es vertical. Estirarla al ancho del monitor la vuelve una losa y
     deja de parecerse a lo que se va a ver en el telefono. */
  .lienzo-vista-previa {
    width: 420px;
    max-width: 100%;
  }
}

/* Zona de peligro: rotar el token deja afuera a todo el mundo a la vez, asi que
   va plegada y senalizada, no a un toque de las acciones de todos los dias.
   Contraste verificado con la funcion contraste() de js/imagen/tema.js:
   7,97 el texto y 7,46 el boton, ambos por encima de AA. */
.zona-peligro {
  border: 1px solid #F1B4AE;
  border-radius: 12px;
  background: #FDECEA;
  padding: 0 16px;
}
.zona-peligro[open] { padding-bottom: 16px; }
.zona-peligro-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding: 10px 0;
  cursor: pointer;
  font-weight: 500;
  color: #8C1D18;
  list-style: none;
}
.zona-peligro-titulo::-webkit-details-marker { display: none; }
.zona-peligro-titulo::after {
  content: '+';
  margin-left: auto;
  font-size: 20px;
  line-height: 1;
  color: #8C1D18;
}
.zona-peligro[open] .zona-peligro-titulo::after { content: '\2212'; }
.zona-peligro-marca {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 20px;
  background: #A3231C;
  color: #FFFFFF;
}
.aviso-rotar {
  background: transparent;
  color: #8C1D18;
  padding: 0 0 12px;
  margin: 0;
  font-size: 14px;
  line-height: 1.55;
}
.boton-peligro {
  border-color: #A3231C;
  background: #A3231C;
  color: #FFFFFF;
}

/* Editar el rotulo de un grupo: el titulo, las edades y la cancha cambian una vez
   por año, asi que el bloque va plegado y en gris, sin recuadro de color. No es una
   zona de peligro, solo algo que casi nunca se toca y no tiene que competir con las
   fichas, que son lo que se usa cada sabado. */
.editar-grupo { margin: 0 0 12px; }
.editar-grupo-titulo {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  cursor: pointer;
  font-size: 13px;
  color: var(--texto-suave);
  list-style: none;
}
.editar-grupo-titulo::-webkit-details-marker { display: none; }
.editar-grupo-titulo::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  color: var(--texto-suave);
}
.editar-grupo[open] .editar-grupo-titulo::after { content: '\2212'; }
.editar-grupo[open] {
  border-left: 2px solid var(--linea);
  padding-left: 12px;
}
.editar-grupo .campo { margin-bottom: 10px; max-width: 320px; }

/* Voluntario que ya acompaña al participante seleccionado. Se marca distinto de
   .seleccionada (violeta, que significa "este es el participante elegido") para
   que se entienda que el toque siguiente lo QUITA, no que lo agrega otra vez.
   El par #C11E6B sobre #FBEAF0 da 4,95 de contraste, verificado con contraste(). */
.ficha.quitable,
.ficha.quitable.seleccionada {
  border-color: var(--magenta-texto);
  background: #FBEAF0;
  color: var(--magenta-texto);
}
.ficha.quitable .ficha-detalle {
  color: var(--magenta-texto);
  font-size: 11px;
  opacity: 0.85;
}

/* Ausentes de la jornada. Van despues de los voluntarios, atenuados, porque son
   informacion de contexto y no lo que se toca todo el tiempo. */
.ausentes { padding: 8px 16px 24px; border-top: 1px solid var(--linea); }
.ausentes h2 { font-size: 18px; font-weight: 500; margin: 0 0 12px; }
.columna-ausentes { flex-direction: row; flex-wrap: wrap; align-items: center; }
.barra-seleccion-acciones { display: flex; gap: 8px; align-items: center; }

/* Nombre editable en la lista de personas. Se ve como texto hasta que lo tocás,
   para que la lista siga leyendose como una lista y no como un formulario. */
input.fila-nombre {
  flex: 1;
  min-width: 120px;
  min-height: 44px;
  padding: 8px 10px;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  background: transparent;
  border: 1px solid transparent;
  border-radius: 10px;
}
input.fila-nombre:hover { border-color: var(--linea); }
input.fila-nombre:focus {
  background: var(--fondo);
  border-color: var(--violeta);
  outline: none;
}
.marca-nuevo {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  font-size: 14px;
  color: var(--texto-suave);
  white-space: nowrap;
}
.marca-nuevo input { width: 20px; height: 20px; }

/* Saludo y despedida. Van entre los interruptores y la imagen, para que el
   efecto de lo que se escribe quede a la vista sin scrollear. */
.mensajes-imagen { display: flex; flex-direction: column; gap: 16px; padding: 0 16px 16px; }
.campo-mensaje textarea {
  width: 100%;
  min-height: 88px;
  padding: 10px 12px;
  font: inherit;
  font-size: 16px;
  line-height: 1.45;
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 10px;
  resize: vertical;
}
.campo-mensaje textarea:focus { border-color: var(--violeta); outline: none; }
.campo-ayuda { font-size: 12px; line-height: 1.45; color: var(--texto-suave); }

/* Correcciones tactiles medidas a 320 px.

   La fila de personas no envolvia, asi que en un telefono angosto el boton
   Quitar arrancaba en x=320 sobre un ancho de 320: quedaba entero fuera de la
   pantalla y no habia forma de dar de baja a nadie. Medido, no estimado.

   Y las casillas de los formularios median 24 px de alto, por debajo del
   minimo tactil de 44. */
.fila-persona { flex-wrap: wrap; row-gap: 4px; }
.formulario label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
}
.formulario label input[type=checkbox] { width: 20px; height: 20px; }

/* Directorio de Personas: un gesto abre el detalle, la lista se queda para buscar. */
.personas-cabecera, .personas-filtros, .personas-directorio, .persona-editor, .personas-personalizacion { padding: 16px; }
.personas-cabecera { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.personas-cabecera h2 { margin: 0 auto 0 0; }
.personas-resumen, .personas-deshacer, .personas-masivas { margin: 0 16px 12px; padding: 10px 12px; border-radius: 10px; background: #F1EAF5; color: var(--violeta); }
.personas-filtros input, .persona-formulario input:not([type=checkbox]), .persona-formulario select, .persona-formulario textarea, .personas-personalizacion select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 10px; }
.personas-chips { display: flex; gap: 8px; overflow-x: auto; padding: 12px 0 2px; }
.personas-abrir-filtros { display: none; }
.chip { flex: 0 0 auto; min-height: 36px; padding: 6px 10px; font-size: 14px; }
.chip.activa { background: var(--violeta); color: var(--fondo); }
.personas-directorio { padding-top: 0; }
.personas-directorio h3 { margin: 4px 0 8px; font-size: 14px; color: var(--texto-suave); }
.personas-resultados { display: grid; grid-template-columns: minmax(0, 1fr); }
.persona-tarjeta { display: flex; align-items: center; border-bottom: 1px solid var(--linea); }
.persona-abrir { display: flex; flex: 1; gap: 12px; align-items: center; min-width: 0; padding: 10px 0; color: var(--texto); background: transparent; border: 0; text-align: left; }
.persona-avatar { position: relative; display: grid; place-items: center; overflow: hidden; flex: 0 0 44px; width: 44px; height: 44px; border-radius: 50%; background: #F1EAF5; color: var(--violeta); font-size: 13px; font-weight: 700; }
.persona-avatar.participante { flex-basis: 64px; width: 64px; height: 64px; font-size: 15px; }
.persona-avatar.con-foto { background: var(--verde); color: white; }
.persona-tarjeta[data-grupo="1"] .persona-avatar { box-shadow: 0 0 0 3px #0F766E; }
.persona-tarjeta[data-grupo="2"] .persona-avatar { box-shadow: 0 0 0 3px #C21870; }
.persona-miniatura { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 220ms ease-out; }
.persona-miniatura.lista { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .persona-miniatura { transition: none; } }
.persona-texto { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 2px; }
.persona-texto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.persona-detalle { font-size: 13px; color: var(--texto-suave); }
.persona-grupo { display: inline-block; padding: 2px 7px; border-radius: 999px; font-size: 12px; font-weight: 700; }
.persona-grupo-1 { background: #DDF4F1; color: #0F766E; }
.persona-grupo-2 { background: #FBE3EF; color: #C21870; }
.persona-flecha { font-size: 24px; color: var(--texto-suave); }
.persona-seleccionar { width: 24px; height: 24px; margin: 10px; }
.persona-editor, .personas-personalizacion { position: fixed; z-index: 80; right: 0; bottom: 0; left: 0; box-sizing: border-box; max-height: min(82dvh, 760px); overflow: auto; overscroll-behavior: contain; border-radius: 18px 18px 0 0; background: var(--fondo); box-shadow: 0 -12px 36px rgba(41, 23, 58, .18); }
.persona-editor h2, .personas-personalizacion h2 { margin-top: 0; }
.persona-formulario, .personas-personalizacion { display: flex; flex-direction: column; gap: 12px; }
.persona-bio { display: grid; gap: 12px; margin: 4px 0 0; padding: 16px; border: 1px solid var(--linea); border-radius: 14px; background: #FAF8FB; }
.persona-bio legend { padding: 0 6px; color: var(--violeta); font-weight: 700; }
.persona-confirmacion { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #A7DED8; border-radius: 10px; color: var(--turquesa-texto); background: #F1FAF8; font-weight: 700; }
.persona-error { margin: 0 0 12px; padding: 10px 12px; border: 1px solid #E9A7C8; border-radius: 10px; color: #9D174D; background: #FFF1F6; font-weight: 700; }
.persona-edad { margin: -4px 0 0; color: var(--violeta); font-size: 14px; font-weight: 700; }
.persona-bio .campo { display: grid; gap: 6px; }
.persona-bio input, .persona-bio textarea { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.selector-fecha { position: relative; min-width: 0; }
.selector-fecha-entrada { position: absolute !important; width: 1px !important; min-width: 1px !important; height: 1px !important; min-height: 1px !important; margin: -1px !important; padding: 0 !important; overflow: hidden !important; clip: rect(0 0 0 0); white-space: nowrap; border: 0 !important; }
.selector-fecha-disparador { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 48px; padding: 9px 12px; color: var(--texto); background: var(--fondo); border: 1px solid var(--linea); border-radius: 10px; font: inherit; text-align: left; }
.selector-fecha-disparador::after { content: '⌄'; flex: 0 0 auto; color: var(--violeta); font-size: 22px; line-height: 1; }
.selector-fecha-disparador[aria-expanded=true] { border-color: var(--violeta); box-shadow: 0 0 0 3px #E9DBEF; }
.selector-fecha-panel { position: fixed; z-index: 110; box-sizing: border-box; width: min(360px, calc(100vw - 24px)); padding: 14px; border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo); box-shadow: 0 18px 44px rgba(41, 23, 58, .24); }
.selector-fecha-cabecera { display: grid; grid-template-columns: 36px minmax(0, 1fr) minmax(86px, .7fr) 36px; gap: 6px; align-items: center; }
.selector-fecha-cabecera select, .selector-fecha-navegar { min-width: 0; min-height: 40px; padding: 6px; color: var(--texto); background: #FAF8FB; border: 1px solid var(--linea); border-radius: 8px; font: inherit; }
.selector-fecha-navegar { font-size: 26px; line-height: 1; color: var(--violeta); }
.selector-fecha-navegar:disabled { opacity: .4; }
.selector-fecha-semana, .selector-fecha-dias { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin-top: 10px; text-align: center; }
.selector-fecha-semana { color: var(--texto-suave); font-size: 12px; font-weight: 700; }
.selector-fecha-dia { min-height: 36px; padding: 0; color: var(--texto); background: transparent; border: 0; border-radius: 8px; font: inherit; }
.selector-fecha-dia:hover, .selector-fecha-dia:focus-visible { color: var(--violeta); background: #F1EAF5; }
.selector-fecha-dia.seleccionado { color: var(--fondo); background: var(--violeta); }
@media (max-width: 480px) { .selector-fecha-panel { width: calc(100vw - 64px); } }
.vista-tarjeta-personal { display: grid; gap: 8px; margin-top: 18px; padding: 14px; border: 1px solid var(--linea); border-radius: 14px; background: #FAF8FB; }
.vista-tarjeta-personal h3 { margin: 0; color: var(--violeta); }
.vista-tarjeta-personal .ayuda-ajustes { margin: 0; }
.lienzo-tarjeta-personal { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--fondo); box-shadow: 0 3px 14px rgba(41, 23, 58, .14); }
.personas-tarjetas { display: grid; gap: 14px; padding: 16px; }
.personas-tarjetas h3 { margin: 0; }
.personas-tarjetas select { box-sizing: border-box; width: 100%; min-height: 44px; padding: 9px 12px; font: inherit; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); }
.personas-tarjetas > .boton { width: 100%; }
.persona-estado { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; padding: 10px 12px; border: 1px solid var(--linea); border-radius: 10px; cursor: pointer; }
.persona-estado-texto { display: flex; flex-direction: column; gap: 2px; font-size: 13px; color: var(--texto-suave); }
.persona-estado-texto strong { color: var(--texto); font-size: 15px; }
.persona-estado input[type=checkbox] { appearance: none; position: relative; flex: 0 0 auto; width: 44px; height: 26px; margin: 0; border: 1px solid var(--texto-suave); border-radius: 999px; background: var(--fondo); transition: background 160ms ease, border-color 160ms ease; }
.persona-estado input[type=checkbox]::after { content: ''; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: var(--texto-suave); transition: transform 160ms ease, background 160ms ease; }
.persona-estado input[type=checkbox]:checked { border-color: var(--violeta); background: var(--violeta); }
.persona-estado input[type=checkbox]:checked::after { transform: translateX(18px); background: var(--fondo); }
.persona-estado input[type=checkbox]:focus-visible { outline: 2px solid var(--violeta); outline-offset: 3px; }
.persona-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.persona-acciones .boton { flex: 1 1 148px; padding: 10px 14px; }
.personas-masivas { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.personas-masivas .boton { font-size: 14px; }

/* Personas es un directorio, no una planilla: en una pantalla grande dos
   columnas hacen que encontrar a alguien requiera menos desplazamiento sin
   alargar cada fila hasta volverla dificil de leer. */
@media (min-width: 1200px) {
  #app:has(.personas-directorio) { max-width: 1440px; }
  .personas-resultados { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; }
  .personas-filtros { display: grid; grid-template-columns: minmax(280px, 1fr) auto; column-gap: 20px; align-items: center; }
  .personas-chips { padding: 0 0 2px; }
}

@media (min-width: 900px) {
  .persona-editor, .personas-personalizacion {
    top: 50%;
    right: auto;
    bottom: auto;
    left: 50%;
    box-sizing: border-box;
    width: min(640px, calc(100vw - 48px));
    max-height: min(720px, calc(100vh - 64px));
    padding: 24px;
    border: 1px solid var(--linea);
    border-radius: 18px;
    transform: translate(-50%, -50%);
    box-shadow: 0 18px 48px rgba(41, 23, 58, .22);
  }
}

/* Selector de formato de la imagen. */
.campo-formato { padding: 16px 16px 0; }
.campo-formato select {
  min-height: 44px;
  padding: 8px 12px;
  font: inherit;
  font-size: 16px;
  color: var(--texto);
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo);
}

/* Rotulo del grupo con el lapiz al lado, para no gastar un renglon entero en
   algo que casi nunca se toca. */
.grupo-titulo { display: flex; align-items: center; gap: 4px; }
.grupo-titulo h2 { margin: 0 0 4px; }
.boton-icono {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 10px;
  background: transparent;
  color: var(--texto-suave);
  cursor: pointer;
}
.boton-icono:hover { border-color: var(--linea); color: var(--violeta); }
.boton-icono.activo { border-color: var(--violeta); color: var(--violeta); background: #F3E9F7; }
.boton-icono:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.editar-grupo[hidden] { display: none; }

/* Apoyo del grupo: no acompaña a nadie en particular, esta para toda la cancha. */
.apoyo-grupo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid var(--linea);
}
.apoyo-rotulo { font-size: 14px; color: var(--texto-suave); }
.boton.activo { background: var(--violeta); color: var(--fondo); }

/* Nada se sale de costado. El teléfono no debe poder moverse en horizontal:
   una barra fija que se pasa del ancho deja botones fuera de alcance. */
html, body { max-width: 100%; overflow-x: hidden; }
#app { overflow-x: clip; }

/* Barra de selección: entra en una línea. Con tres elementos y texto de 15 px
   se pasaba del ancho y Cancelar quedaba cortado contra el borde. */
.barra-seleccion { gap: 8px; padding: 10px 12px; }
.barra-seleccion-texto {
  font-size: 14px;
  line-height: 1.25;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.barra-seleccion-acciones { flex-shrink: 0; gap: 6px; }
.barra-seleccion-acciones .boton {
  padding: 8px 12px;
  font-size: 14px;
  white-space: nowrap;
}

/* El elegidor: la bandeja de voluntarios que se abre pegada a lo que se tocó.
   La barra magenta de la izquierda la ata visualmente a la ficha de arriba,
   para que se lea como parte de ella y no como otra sección de la página. */
.elegidor {
  align-self: stretch;
  flex-basis: 100%;
  margin: 2px 0 4px;
  padding: 10px 12px 12px;
  border: 1px solid var(--linea);
  border-left: 3px solid var(--magenta);
  border-radius: 4px 14px 14px 4px;
  background: #FBF8FC;
  animation: elegidor-aparece 150ms ease-out;
}
@keyframes elegidor-aparece {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .elegidor { animation: none; }
}
.elegidor-titulo {
  margin: 0 0 8px;
  font-size: 13px;
  line-height: 1.3;
  color: var(--texto-suave);
}

/* "Hoy no viene", al final de la bandeja de voluntarios. Es la unica respuesta
   que no es una persona, asi que va lleno y mas oscuro que todo el resto de la
   pantalla: no se toca por error creyendo que se elige a alguien, y de reojo
   marca donde termina la lista. Blanco sobre #4A1F5C da 12,8 de contraste. */
.boton-ausencia {
  border-color: #4A1F5C;
  background: #4A1F5C;
  color: var(--fondo);
  border-radius: 22px;
  padding: 10px 16px;
  font-size: 15px;
  white-space: nowrap;
}
.boton-ausencia:focus-visible { outline: 2px solid #4A1F5C; outline-offset: 2px; }

/* Navegación: cinco destinos entran en menos renglones si el texto no infla
   cada botón. Envuelve hacia abajo, nunca hacia el costado. */
.navegacion { flex-wrap: wrap; gap: 6px; padding: 10px 12px; }
.navegacion .boton {
  padding: 9px 14px;
  font-size: 14px;
  white-space: nowrap;
}

/* Sello de versión: discreto, pero siempre a la vista. Existe para contestar
   "¿ya llegó el cambio?" sin tener que abrir nada. */
.sello-version {
  margin: 0;
  padding: 14px 16px 20px;
  font-size: 11px;
  color: var(--texto-suave);
  opacity: .65;
  text-align: center;
}
.sello-version a { color: inherit; font-weight: 500; }
.sello-version a:hover { color: var(--violeta); }

/* Historial de versiones. En ingreso queda breve y expandible, mientras que
   la sección del CMS mantiene cada detalle a la vista. */
.pantalla-cambios { max-width: 920px; margin: 0 auto; padding: 32px 20px 56px; }
.cambios-cms { display: grid; gap: 18px; }
.titulo-cambios { margin: 0; color: var(--violeta); font-size: clamp(25px, 4vw, 34px); }
.ayuda-cambios { margin: -8px 0 2px; color: var(--texto-suave); line-height: 1.55; }
.cambio-version { padding: 24px; border: 1px solid var(--linea); border-radius: 18px; background: var(--fondo); }
.cambio-version-titulo { margin: 0; color: var(--violeta); font-size: 22px; }
.cambio-version-meta { margin: 4px 0 20px; color: var(--texto-suave); font-size: 13px; }
.cambios-grupo + .cambios-grupo { margin-top: 16px; }
.cambios-grupo h3 { margin: 0 0 6px; color: var(--turquesa-texto); font-size: 15px; }
.cambios-grupo ul { margin: 0; padding-left: 20px; }
.cambios-grupo li { margin: 5px 0; line-height: 1.5; }
.cambios-cms-compacto { gap: 10px; }
.cambios-cms-compacto .titulo-cambios { font-size: 18px; }
.cambios-cms-compacto .ayuda-cambios { font-size: 13px; }
.cambios-cms-compacto .cambio-version { padding: 18px; }
.cambios-cms-compacto .cambio-version-titulo { font-size: 18px; }
.cambios-cms-compacto .cambios-grupo { display: none; }
.cambios-cms-compacto .cambio-version-meta { margin: 4px 0 0; }
/* Solo aparece cuando el servidor tiene otra versión que la cargada. */
.aviso-version {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  background: #F3E9F7;
  border-bottom: 1px solid var(--violeta-claro, #D7B9E4);
  font-size: 14px;
  color: var(--violeta);
}
.aviso-version .boton { padding: 8px 14px; font-size: 14px; white-space: nowrap; }

/* Editor de foto. Ocupa la pantalla entera en el teléfono, porque elegir el
   recorte con el dedo necesita todo el espacio que haya. */
.capa-editor {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  background: rgba(28, 16, 36, .55);
}
.editor-foto {
  width: 100%;
  max-width: 420px;
  padding: 18px 16px 20px;
  border-radius: 18px;
  background: var(--fondo);
  box-shadow: 0 12px 40px rgba(28, 16, 36, .3);
}
.editor-titulo { margin: 0 0 4px; font-size: 18px; font-weight: 500; }
.editor-subtitulo { margin: 18px 0 8px; font-size: 13px; font-weight: 500; color: var(--texto-suave); }
.editor-ayuda { margin: 0 0 14px; font-size: 13px; line-height: 1.4; color: var(--texto-suave); }
.editor-lienzo {
  display: block;
  width: 100%;
  max-width: 260px;
  height: auto;
  margin: 0 auto;
  border-radius: 12px;
  background: var(--linea);
  touch-action: none;      /* el arrastre es nuestro, no del scroll de la página */
  cursor: grab;
}
.editor-lienzo:active { cursor: grabbing; }
.editor-controles {
  display: flex;
  gap: 12px;
  align-items: flex-end;
  margin-top: 14px;
}
.editor-zoom { flex: 1; display: flex; flex-direction: column; gap: 4px; }
/* Alto de sobra para el pulgar: el control nativo es de unos 20 px. */
.editor-zoom input[type=range] { width: 100%; height: 40px; accent-color: var(--violeta); }
.editor-previas {
  display: flex;
  gap: 12px;
  overflow-x: auto;        /* la tira scrollea sola, la página nunca */
  padding-bottom: 4px;
}
.previa { margin: 0; flex: 0 0 auto; }
.previa canvas { display: block; border-radius: 8px; background: var(--linea); }
.previa figcaption { margin-top: 5px; font-size: 11px; color: var(--texto-suave); text-align: center; }
.editor-acciones { display: flex; gap: 10px; margin-top: 18px; }
.editor-acciones .boton { flex: 1; }

/* Selector visual: cada opción se ve en vez de leerse. Los nombres de estas
   opciones no le dicen nada a nadie hasta que ve el resultado. */
.selector-visual { padding: 14px 16px 4px; }
.selector-rotulo { margin: 0 0 8px; font-size: 12px; color: var(--texto-suave); }
.selector-opciones {
  display: flex;
  gap: 10px;
  overflow-x: auto;        /* la tira scrollea sola, la página nunca */
  padding-bottom: 6px;
  scroll-snap-type: x proximity;
}
.bosquejo {
  flex: 0 0 auto;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  width: 92px;
  padding: 7px 5px 8px;
  border: 2px solid var(--linea);
  border-radius: 12px;
  background: var(--fondo);
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.bosquejo:focus-visible { outline: 2px solid var(--violeta); outline-offset: 2px; }
.bosquejo.elegido { border-color: var(--violeta); background: #F8F2FB; }
.bosquejo-lienzo {
  display: block;
  width: 76px;
  height: auto;
  border-radius: 6px;
  background: var(--linea);
}
.bosquejo-vacio { min-height: 76px; }
.bosquejo-etiqueta {
  font-size: 10.5px;
  line-height: 1.25;
  color: var(--texto-suave);
  text-align: center;
}
.bosquejo.elegido .bosquejo-etiqueta { color: var(--violeta); font-weight: 500; }

/* Panel de formato: plegado por defecto. Abierto son cuatro tiras de bosquejos,
   que empujaban la vista previa fuera de la pantalla. */
.panel-formato { border-bottom: 1px solid var(--linea); }
.vista-pestanas { display: flex; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--linea); }
.vista-panel-configuracion[hidden], .vista-panel-resultado[hidden] { display: none; }
.vista-pestana { flex: 1; }
.vista-pestana.activa { background: var(--violeta); color: var(--fondo); }
.panel-formato-cabecera {
  display: flex;
  gap: 12px;
  align-items: center;
  padding: 12px 16px;
}
.panel-formato-rotulo { font-size: 12px; color: var(--texto-suave); flex-shrink: 0; }
.panel-formato-resumen {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  color: var(--violeta);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.boton-cambiar-formato { flex-shrink: 0; padding: 8px 14px; font-size: 14px; white-space: nowrap; }

/* Registro de actividad. Solo administración. */
.registro-dia {
  margin: 20px 0 6px;
  font-size: 13px;
  font-weight: 500;
  color: var(--violeta);
}
.registro-lista { margin: 0; padding: 0; list-style: none; }
.registro-entrada {
  display: flex;
  gap: 10px;
  align-items: baseline;
  padding: 9px 0;
  border-bottom: 1px solid var(--linea);
  font-size: 14px;
}
.registro-hora { flex-shrink: 0; font-variant-numeric: tabular-nums; color: var(--texto-suave); }
.registro-accion { flex: 1; min-width: 0; }
.registro-quien { flex-shrink: 0; color: var(--magenta-texto); font-size: 13px; }
.registro-entrada.sin-autor .registro-quien { color: var(--texto-suave); font-style: italic; }
/* Los cambios de acceso, resaltados: son los que más importa auditar. */
.registro-entrada.de-accesos { background: #FBF6FD; }
.registro-entrada.de-accesos .registro-accion { color: var(--violeta); font-weight: 500; }
/* Cuando el trabajador todavía no tomó el control, el sello lo dice: esa carga
   puede estar corriendo lo que quedó en la caché del navegador. */
.sello-version[data-trabajador="no"] .sello-estado { color: var(--magenta-texto); }
/* Girar, espejar y centrar: acciones de la foto, aparte del deslizante. */
.editor-herramientas { display: flex; gap: 8px; margin-top: 10px; }
.editor-herramientas .boton { flex: 1; padding: 10px 8px; font-size: 14px; white-space: nowrap; }
/* Selector de grupo en la fila de cada participante. */
.fila-grupo {
  flex-shrink: 0;
  padding: 9px 8px;
  font-family: inherit;
  font-size: 14px;
  border: 1px solid var(--linea);
  border-radius: 10px;
  background: var(--fondo);
  color: var(--texto);
}

/* Reporte de asistencia. La tabla puede tener cinco columnas de sabados mas el
   nombre, asi que scrollea sola adentro de su caja: la pagina nunca se mueve
   para el costado, que en el telefono es lo que rompe la lectura. */
.tabla-envoltorio { overflow-x: auto; margin: 12px 0; }
.reporte-selector-mes { position: sticky; top: 0; z-index: 2; padding: 8px 0; background: var(--fondo); }
.tabla-reporte { border-collapse: collapse; font-size: 15px; }
.tabla-reporte th, .tabla-reporte td { padding: 8px 10px; text-align: left; white-space: nowrap; }
.tabla-reporte th.dia, .tabla-reporte td.casilla { text-align: center; min-width: 34px; }
.tabla-reporte thead th { font-weight: 500; color: var(--texto-suave); border-bottom: 1px solid var(--linea); }
.tabla-reporte .seccion-reporte { padding-top: 16px; font-weight: 500; color: var(--violeta); }
.tabla-reporte tbody tr:nth-child(even) { background: #FBF8FC; }
.tabla-reporte td[data-estado="vino"] { color: var(--turquesa-texto); }
.tabla-reporte td[data-estado="falto"] { color: var(--magenta-texto); }
.tabla-reporte .resumen-reporte { color: var(--texto-suave); font-size: 14px; }
.acciones-reporte { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.eliminar-mes-control {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 136px;
  color: #8C1D18;
  font-size: 12px;
  font-weight: 600;
}
.eliminar-mes-control select {
  min-height: 44px;
  padding: 8px 28px 8px 10px;
  border: 1px solid #A3231C;
  border-radius: 10px;
  background: var(--fondo);
  color: var(--texto);
  font: inherit;
  font-size: 15px;
}
.confirmacion-borrado {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
  padding: 14px;
  border: 1px solid #EAB0C9;
  border-left: 4px solid #A51E1A;
  border-radius: 12px;
  background: #FDF5F7;
}
.confirmacion-borrado strong, .confirmacion-borrado p { flex: 1 1 100%; margin: 0; }
.confirmacion-borrado p { color: var(--texto-suave); font-size: 14px; }

/* Corrección de asistencia. Filas anchas y tocables: se usan de a muchas
   seguidas y con el telefono en la mano. */
.columna-asistencia { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.subtitulo-asistencia { font-size: 15px; font-weight: 500; color: var(--texto-suave); margin: 12px 0 8px; }
.fila-asistencia {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  min-height: 48px;
  padding: 10px 14px;
  border: 1px solid var(--linea);
  border-radius: 12px;
  background: var(--fondo);
  font: inherit;
  font-size: 15px;
  color: var(--texto);
  cursor: pointer;
  text-align: left;
}
.marca-asistencia { font-size: 14px; }
.fila-asistencia[data-estado="vino"] { border-color: var(--turquesa); }
.fila-asistencia[data-estado="vino"] .marca-asistencia { color: var(--turquesa-texto); }
.fila-asistencia[data-estado="falto"] { border-color: var(--magenta); }
.fila-asistencia[data-estado="falto"] .marca-asistencia { color: var(--magenta-texto); }
.fila-asistencia[data-estado="no-estaba"] { opacity: 0.5; }
.progreso-asistencia { display: grid; gap: 6px; margin: 12px 0 16px; padding: 12px; border: 1px solid #BCE8E3; border-radius: 12px; background: #F1FAF8; }
.progreso-asistencia strong { color: var(--turquesa-texto); }
.progreso-asistencia span:not(.progreso-asistencia-barra) { color: var(--texto-suave); font-size: 13px; }
.progreso-asistencia-barra { display: block; height: 8px; overflow: hidden; border-radius: 999px; background: #D8EFEC; }
.progreso-asistencia-barra::before { content: ''; display: block; width: var(--progreso); height: 100%; border-radius: inherit; background: var(--turquesa-texto); transition: width 180ms ease; }

.agenda-filtros, .agenda-leyenda { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0; }
.agenda-opcion-especiales { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 12px; color: var(--texto); font-size: 14px; font-weight: 600; cursor: pointer; }
.agenda-opcion-especiales input { width: 18px; height: 18px; margin: 0; accent-color: var(--violeta); cursor: pointer; }
.agenda-filtro { min-height: 36px; padding: 6px 10px; font-size: 13px; }
.agenda-filtro.activo { background: var(--violeta); color: var(--fondo); }
.agenda-leyenda-item { display: inline-flex; align-items: center; min-height: 28px; padding: 4px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; }
.agenda-leyenda-item.cumpleanos { background: #FBE3EF; color: var(--magenta-texto); }
.agenda-leyenda-item.efemeride { background: #FFF5DE; color: #805800; }
.agenda-leyenda-item.evento { background: #E6F7F4; color: var(--turquesa-texto); }
.agenda-leyenda-item.institucional { background: #FFF5DE; color: #805800; }

.ajustes > input[type=search] { width: 100%; min-height: 44px; margin: 8px 0 12px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; }
.resumen-accesos, .resumen-registro { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 14px 0; }
.resumen-acceso, .resumen-registro-item { display: grid; gap: 3px; min-height: 78px; padding: 13px; border: 1px solid var(--linea); border-radius: 12px; background: #FCFAFD; }
.resumen-acceso strong, .resumen-registro-item strong { color: var(--violeta); font-size: 26px; font-variant-numeric: tabular-nums; }
.resumen-acceso span, .resumen-registro-item span { color: var(--texto-suave); font-size: 12px; font-weight: 600; }
.acceso-fila { gap: 10px; padding: 16px; border-radius: 14px; }
.acceso-identidad { display: flex; align-items: center; gap: 12px; min-width: 0; }
.acceso-avatar { display: grid; flex: 0 0 46px; width: 46px; height: 46px; place-items: center; overflow: hidden; border-radius: 50%; background: #F0E6F5; color: var(--violeta); font-size: 15px; font-weight: 800; }
.acceso-avatar img { width: 100%; height: 100%; object-fit: cover; }
.acceso-identidad-texto { display: grid; min-width: 0; gap: 2px; }
.acceso-identidad-texto strong { color: var(--texto); font-size: 17px; }
.acceso-identidad-texto .ayuda-ajustes { margin: 0; }
.formulario-agregar .campo-acceso { display: grid; gap: 5px; color: var(--violeta); font-size: 13px; font-weight: 700; }
.formulario-agregar .campo-acceso input, .formulario-agregar .campo-acceso select { width: 100%; min-height: 44px; }
.registro-institucional-pantalla { display: flex; flex-direction: column; min-height: calc(100dvh - 92px); max-width: none; padding: 28px 40px 22px; }
.registro-institucional-pantalla h2 { margin: 0 0 6px; color: var(--violeta); }
.registro-institucional-controles { display: grid; grid-template-columns: minmax(0, 1fr) minmax(180px, .4fr) auto; gap: 10px; margin: 18px 0 4px; }
.registro-institucional-controles input, .registro-institucional-controles select { min-height: 44px; padding: 8px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--texto); font: inherit; }
.registro-institucional-lista-completa { flex: 1 1 auto; min-height: min(54dvh, 620px); max-height: none; margin-top: 14px; border: 1px solid var(--linea); border-radius: 14px; background: var(--fondo); overflow-y: auto; }
.registro-institucional-evento { display: grid; gap: 4px; padding: 14px; border-bottom: 1px solid var(--linea); }
.registro-institucional-evento:last-child { border-bottom: 0; }
.registro-institucional-evento-cabecera { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.registro-institucional-evento-cabecera strong { color: var(--violeta); }
.registro-institucional-evento time { color: var(--texto-suave); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.registro-institucional-evento > span { color: var(--magenta-texto); font-size: 13px; font-weight: 600; }
.registro-institucional-evento p { margin: 0; }
.registro-de-accesos { border-left: 4px solid var(--violeta); background: #FCFAFD; }
.confirmacion-acceso {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  width: 100%;
  margin-top: 8px;
  padding: 10px;
  border: 1px solid #EAB0C9;
  border-radius: 10px;
  background: #FBEAF0;
  color: var(--magenta-texto);
}
.confirmacion-acceso strong, .confirmacion-acceso span { flex-basis: 100%; }
.confirmacion-acceso span { font-size: 13px; }
.registro-institucional { margin: 18px 0; padding: 12px; border: 1px solid var(--linea); border-radius: 12px; background: var(--fondo); }
.registro-institucional summary { cursor: pointer; color: var(--violeta); font-weight: 700; }
.registro-institucional-lista { display: grid; gap: 0; max-height: 320px; margin-top: 10px; overflow: auto; border-top: 1px solid var(--linea); }
.registro-institucional-lista p { margin: 0; padding: 10px 2px; border-bottom: 1px solid var(--linea); color: var(--texto); font-size: 14px; }

@media (max-width: 620px) {
  .resumen-accesos, .resumen-registro { grid-template-columns: 1fr; }
  .registro-institucional-pantalla { min-height: auto; padding: 16px 0; }
  .registro-institucional-controles { grid-template-columns: 1fr; }
  .registro-institucional-evento-cabecera { display: grid; gap: 3px; }
  .registro-institucional-lista-completa { min-height: 52dvh; }
  .personas-filtros { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; }
  .personas-filtros .personas-chips { grid-column: 1 / -1; padding-top: 4px; flex-wrap: wrap; overflow: visible; }
  .personas-filtros .personas-chips[hidden] { display: none; }
  .personas-abrir-filtros { display: inline-flex; min-width: 92px; padding: 8px 10px; font-size: 14px; }
}

/* Aviso de faltas. Turquesa y no rojo: no es un error de la aplicacion ni una
   urgencia, es algo que alguien tiene que mirar cuando pueda. */
.franja-alerta {
  margin: 12px 16px 0;
  padding: 12px 14px;
  border: 1px solid var(--turquesa);
  border-left: 3px solid var(--turquesa);
  border-radius: 4px 12px 12px 4px;
  background: #F1FAF8;
}
.franja-alerta-titulo { margin: 0 0 8px; font-size: 15px; font-weight: 500; color: var(--turquesa-texto); }
.alerta-persona {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 8px;
}
.alerta-texto { font-size: 15px; }
.franja-alerta .boton { padding: 8px 14px; font-size: 14px; min-height: 40px; }

/* Las dos tablas del reporte, una al lado de la otra. En el telefono no entran
   y bajan sola: es preferible a achicar la letra o a un scroll horizontal que
   tape media tabla. */
.tablas-reporte { display: flex; flex-wrap: wrap; gap: 32px; align-items: flex-start; }

/* ---------------------------------------------------------------------------
   Tablero de jornada.

   En el teléfono se priorizan las tres tareas de todos los sábados. Los otros
   destinos viven en Más. En pantalla ancha vuelve la navegación completa.
--------------------------------------------------------------------------- */

.navegacion-movil { display: none; }

.resumen-jornada { display: none; }
.campos-jornada {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
}

.grupo {
  position: relative;
  margin: 8px 12px 16px;
  padding: 16px 16px 18px 20px;
  border: 1px solid var(--linea);
  border-radius: 16px;
  background: var(--fondo);
  overflow: hidden;
}
.grupo::before {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 5px;
  background: var(--turquesa);
}
.grupo-2::before { background: var(--magenta); }
.grupo-titulo h2 { line-height: 1.25; }
.estado-grupo {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 4px 0 14px;
}
.pastilla-estado {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 9px;
  border-radius: 14px;
  font-size: 12px;
  font-weight: 500;
}
.pastilla-estado[data-estado="pendiente"] { background: #FBEAF0; color: var(--magenta-texto); }
.pastilla-estado[data-estado="completo"] { background: #E6F7F4; color: var(--turquesa-texto); }
.voluntarios-libres { font-size: 12px; color: var(--texto-suave); }

.ficha.sin-asignar { border-color: #D7CDD9; }
.ficha.sin-asignar::before {
  content: '';
  width: 7px;
  height: 7px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--magenta);
}
.ficha.asignada {
  border-color: #A7DED8;
  background: #F1FAF8;
}
.ficha.seleccionada:not(.quitable) {
  border-color: var(--violeta);
  background: var(--violeta);
  color: var(--fondo);
}
.ficha.seleccionada:not(.quitable) .ficha-detalle { color: var(--fondo); opacity: .85; }
.ficha.atenuada { opacity: 1; color: var(--texto-suave); background: #F6F4F6; }

.boton:focus-visible,
.ficha:focus-visible,
.boton-navegacion:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid rgba(102, 45, 125, .32);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

@media (max-width: 899px) {
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }

  .navegacion-escritorio { display: none; }
  .navegacion-movil {
    position: fixed;
    z-index: 40;
    inset: auto 0 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 4px;
    padding: 7px 8px calc(7px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--linea);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 -4px 18px rgba(44, 44, 42, .08);
  }
  .navegacion-movil > .boton,
  .boton-navegacion {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    min-height: 50px;
    padding: 7px 4px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--texto-suave);
    font: inherit;
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    list-style: none;
  }
  .boton-navegacion::-webkit-details-marker { display: none; }
  .navegacion-movil .activa { background: #F3E9F7; color: var(--violeta); }
  .navegacion-mas { position: relative; }
  .menu-navegacion {
    position: absolute;
    right: 0;
    bottom: calc(100% + 10px);
    display: grid;
    gap: 6px;
    width: max-content;
    min-width: 180px;
    padding: 8px;
    border: 1px solid var(--linea);
    border-radius: 14px;
    background: var(--fondo);
    box-shadow: 0 10px 32px rgba(44, 44, 42, .16);
  }
  .navegacion-mas:not([open]) .menu-navegacion { display: none; }
  .menu-navegacion .boton { width: 100%; text-align: left; }

  .encabezado-lista { display: block; padding: 12px 16px; }
  .resumen-jornada {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .resumen-jornada-texto { display: flex; flex-direction: column; min-width: 0; }
  .resumen-jornada-texto strong { font-size: 16px; font-weight: 500; color: var(--texto); }
  .resumen-jornada-texto span {
    overflow: hidden;
    font-size: 13px;
    color: var(--texto-suave);
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .boton-editar-jornada { min-height: 40px; padding: 7px 12px; font-size: 13px; flex-shrink: 0; }
  .campos-jornada { display: none; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--linea); }
  .encabezado-lista.abierta .campos-jornada { display: flex; }
  .campos-jornada .campo:last-child { flex: 1 1 100%; }
  .campos-jornada .campo:last-child input { width: 100%; }

  .grupo { margin-inline: 12px; }
  .barra { padding-top: 10px; padding-bottom: 4px; }
  .barra-seleccion { bottom: calc(65px + env(safe-area-inset-bottom)); }
}

/* Armazón institucional. La navegación deja de competir con el contenido y
   pasa a ser una referencia estable. Las áreas no se despliegan en la portada:
   cada una conserva su propia página y su lugar al volver. */
#app.app-cms {
  width: 100%;
  max-width: none;
  margin-inline: 0;
  min-height: 100vh;
  background: #FCFAFD;
}
.app-cms > .cuerpo { min-width: 0; margin-left: 256px; }
.app-cms > .sello { margin-left: 256px; }
.navegacion-cms-contenedor { position: relative; z-index: 50; }
.navegacion-cms {
  position: fixed;
  inset: 0 auto 0 0;
  display: flex;
  flex-direction: column;
  width: 256px;
  padding: 18px 14px;
  border-right: 1px solid #E8DFEA;
  background: #FFF;
  box-shadow: 8px 0 28px rgba(61, 29, 72, .035);
  overflow-y: auto;
}
.navegacion-cms-marca {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  min-height: 132px;
  margin: 0 0 20px;
  padding: 16px 9px;
  border: 0;
  border-radius: 14px;
  background: transparent;
  color: var(--violeta);
  font: inherit;
  text-align: center;
  cursor: pointer;
}
.navegacion-cms-marca:hover { background: #F8F3FA; }
.navegacion-cms-marca img { width: min(210px, 100%); height: auto; max-height: 78px; object-fit: contain; object-position: center; }
.navegacion-cms-marca small { margin-top: 9px; color: var(--texto-suave); font-size: 12px; }
.navegacion-cms-grupo { display: grid; gap: 4px; margin-bottom: 16px; }
.navegacion-cms-sistema { display: grid; gap: 4px; margin-top: auto; padding-top: 16px; }
.navegacion-cms-rotulo {
  padding: 0 11px 5px;
  color: #817A82;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.navegacion-cms .boton {
  justify-content: flex-start;
  width: 100%;
  min-height: 42px;
  margin: 0;
  padding: 9px 11px;
  border: 0;
  border-radius: 11px;
  color: #504A52;
  text-align: left;
  font-size: 13px;
  font-weight: 500;
}
.navegacion-cms .boton:hover { background: #F8F3FA; color: var(--violeta); }
.navegacion-cms .boton.activa {
  background: #F1E6F5;
  color: var(--violeta);
  box-shadow: inset 3px 0 0 var(--violeta);
}
.navegacion-cms-cuenta {
  display: grid;
  gap: 5px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #EEE8F0;
}
.navegacion-cms-usuario { overflow: hidden; padding: 3px 11px 7px; color: var(--texto-suave); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.navegacion-cms-movil { display: none; }

@media (max-width: 899px) {
  .app-cms > .cuerpo, .app-cms > .sello { margin-left: 0; }
  .navegacion-cms { display: none; }
  .navegacion-cms-movil { display: grid; }
  .navegacion-cms-movil .boton { flex-direction: column; gap: 2px; margin: 0; }
  .navegacion-cms-movil .boton svg, .navegacion-cms-movil .boton-navegacion svg { width: 20px; height: 20px; }
  .navegacion-cms-movil .boton-navegacion { flex-direction: column; gap: 2px; }
}

@media (min-width: 900px) {
  .grupo { margin-inline: 16px 0; }
  .cuerpo:has(.grupos) .voluntarios { margin-top: 8px; }
}

/* Confirmación de guardado. Es breve, textual y no bloquea el trabajo. */
.estado-guardado {
  position: fixed;
  z-index: 60;
  top: 12px;
  right: 12px;
  max-width: min(320px, calc(100vw - 24px));
  padding: 8px 12px;
  border: 1px solid var(--linea);
  border-radius: 18px;
  background: var(--fondo);
  box-shadow: 0 6px 22px rgba(44, 44, 42, .14);
  font-size: 13px;
  color: var(--texto-suave);
  pointer-events: none;
}
.estado-guardado[hidden] { display: none; }
.estado-guardado[data-estado="guardando"] { color: var(--violeta); }
.estado-guardado[data-estado="guardado"] { border-color: #A7DED8; color: var(--turquesa-texto); }
.estado-guardado[data-estado="error"] {
  display: flex;
  align-items: center;
  gap: 10px;
  border-color: #EAB0C9;
  background: #FBEAF0;
  color: var(--magenta-texto);
  pointer-events: auto;
}
.estado-guardado-texto { min-width: 0; }
.boton-reintentar {
  flex-shrink: 0;
  min-height: 34px;
  padding: 5px 10px;
  border-color: var(--magenta-texto);
  background: var(--fondo);
  color: var(--magenta-texto);
  font-size: 12px;
}

/* Los estados vacíos explican el siguiente paso en vez de dejar una pantalla
   sin salida. Mantienen el lenguaje de los grupos, sin sumar otra decoración. */
.estado-vacio {
  max-width: 520px;
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--turquesa);
  border-radius: 4px 14px 14px 4px;
  background: #F7FBFA;
}
.estado-vacio h3 { margin: 0 0 6px; font-size: 16px; font-weight: 500; }
.estado-vacio .ayuda { margin: 0 0 14px; line-height: 1.5; color: var(--texto-suave); }

/* CMS institucional. El tablero toma los colores de Aletea como una guía de
   trabajo: turquesa para avanzar, magenta para lo urgente y violeta para la
   visión institucional. No depende solo del color: todos los estados se leen. */
.cms { max-width: 1120px; margin: 0 auto; padding: 28px 24px 52px; }
.cms-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; padding-bottom: 22px; border-bottom: 1px solid var(--linea); }
.cms-encabezado h2 { margin: 3px 0 4px; font-size: clamp(28px, 4vw, 44px); line-height: 1.06; color: var(--violeta); }
.cms-encabezado .ayuda { margin: 0; }
.cms-sobrelinea { margin: 0; color: var(--magenta-texto); font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.cms-encabezado-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cms-encabezado-acciones .boton { flex: 0 0 auto; margin: 0; }
.cms-captura { display: grid; gap: 10px; margin: 18px 0; padding: 18px; border: 1px solid #DCCCE4; border-left: 5px solid var(--violeta); border-radius: 4px 16px 16px 4px; background: #FBF8FC; }
.cms-captura h3 { margin: 0 0 2px; color: var(--violeta); font-size: 18px; }
.cms-captura input, .cms-captura select, .cms-captura textarea { box-sizing: border-box; min-height: 48px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--texto); font: inherit; }
.cms-captura input:not(.selector-fecha-entrada), .cms-captura select, .cms-captura .selector-fecha-disparador { height: 48px; }
.cms-campo > .selector-fecha .campo-rotulo { display: none; }
.cms-campo > .cms-fecha-hora .campo-rotulo { display: none; }
.cms-captura textarea { min-height: 94px; resize: vertical; line-height: 1.45; }
.cms-captura [hidden] { display: none !important; }
.cms-etiqueta-campo { color: var(--violeta); font-size: 13px; font-weight: 700; }
.cms-campo { display: grid; gap: 5px; color: var(--texto-suave); font-size: 13px; font-weight: 700; }
.cms-rotulo-con-icono { display: inline-flex; align-items: center; gap: 6px; color: var(--violeta); }
.cms-rotulo-con-icono svg { flex: 0 0 auto; width: 16px; height: 16px; }
.cms-campo select, .cms-campo input { width: 100%; }
.cms-fecha-hora { display: grid; grid-template-columns: minmax(0, 1fr) minmax(132px, 156px); gap: 8px; align-items: end; }
.cms-fecha-hora > input { width: 100%; }
.cms-captura-detalles { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); gap: 12px; align-items: start; }
.cms-captura-detalles > * { min-width: 0; }
@media (min-width: 680px) { .cms-fecha-hora-campo { grid-column: span 2; } }
.cms-captura-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; min-width: 0; }
.cms-captura-acciones .boton { flex: 0 0 auto; min-width: 156px; margin: 0; }
.cms-captura-rapida-opciones { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px; }
.cms-captura-rapida-opciones .boton { margin: 0; min-height: 48px; justify-content: flex-start; text-align: left; }
.cms-indicadores { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin: 22px 0; }
.cms-indicador { min-height: 104px; padding: 16px; border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo); color: var(--texto); font: inherit; text-align: left; }
.cms-indicador strong { display: block; margin-bottom: 4px; color: var(--violeta); font-size: 30px; line-height: 1; }
.cms-indicador span { color: var(--texto-suave); font-size: 13px; }
.cms-indicador-atrasada { border-top: 4px solid var(--magenta); background: #FFF8FB; }
.cms-indicador-proxima { border-top: 4px solid #EDB743; background: #FFFDF7; }
.cms-indicador-bloqueada { border-top: 4px solid var(--violeta); background: #FAF7FC; }
.cms-indicador-seguimiento { border-top: 4px solid #3D82C6; background: #F6FAFF; }
.cms-indicador-sin-responsable { border-top: 4px solid var(--turquesa); background: #F5FCFB; }
.cms-seguimiento-personal { display: grid; gap: 10px; margin: 16px 0; padding: 20px; border: 1px solid #D8E8E5; border-left: 5px solid var(--turquesa); border-radius: 4px 16px 16px 4px; background: #F7FBFA; }
.cms-seguimiento-personal h3 { margin: 0; color: var(--turquesa); }
.cms-directrices { display: grid; gap: 12px; margin: 16px 0; padding: 20px; border: 1px solid #E7D8EC; border-left: 5px solid var(--violeta); border-radius: 4px 16px 16px 4px; background: #FCF9FD; }
.cms-directrices h3 { margin: 0; color: var(--violeta); }
.cms-directrices-lista { display: grid; gap: 10px; }
.cms-horizonte { display: grid; gap: 10px; margin: 16px 0; padding: 20px; border: 1px solid #DDE9F5; border-left: 5px solid #3976B9; border-radius: 4px 16px 16px 4px; background: #F8FBFF; }
.cms-horizonte h3 { margin: 0; color: #255D9D; }
.cms-horizonte .ayuda { margin: -4px 0 0; }
.cms-horizonte-lista { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.cms-horizonte-tramo { display: grid; gap: 4px; padding: 13px; border: 1px solid #DDE9F5; border-radius: 12px; background: var(--fondo); }
.cms-horizonte-tramo strong { color: #255D9D; font-size: 20px; }
.cms-horizonte-tramo span, .cms-horizonte-tramo small { color: var(--texto-suave); font-size: 13px; }
.cms-seguimiento-personal .ayuda { margin: -4px 0 0; }
.cms-seguimiento-resumen { margin: 0; color: var(--violeta); font-size: 13px; font-weight: 700; }
.cms-seguimiento-lista { display: grid; }
.cms-trabajo, .cms-contexto { padding: 20px; border: 1px solid var(--linea); border-radius: 16px; background: var(--fondo); }
.cms-trabajo h3, .cms-contexto h3 { margin: 0 0 12px; color: var(--violeta); }
.cms-tarea { display: grid; gap: 6px; padding: 13px 0 13px 14px; border-bottom: 1px solid var(--linea); border-left: 3px solid var(--turquesa); }
.cms-tarea:last-child { border-bottom: 0; }
.cms-tarea-atrasada { border-left-color: var(--magenta); }
.cms-tarea-bloqueada { border-left-color: var(--violeta); }
.cms-tarea-esperando_respuesta { border-left-color: #3D82C6; }
.cms-tarea-proxima { border-left-color: #EDB743; }
.cms-tarea-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cms-estado { flex: 0 0 auto; padding: 3px 8px; border-radius: 999px; background: #F3E9F7; color: var(--violeta); font-size: 12px; font-weight: 600; }
.cms-tarea-atrasada .cms-estado { background: #FDE7F1; color: var(--magenta-texto); }
.cms-tarea-meta { color: var(--texto-suave); font-size: 13px; }
.cms-alerta-seguimiento { width: fit-content; padding: 3px 8px; border-radius: 999px; background: #EAF3FF; color: #255D9D; font-size: 12px; font-weight: 700; }
.cms-tarea-descripcion { color: var(--texto); font-size: 13px; line-height: 1.45; }
.cms-tarea-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cms-tarea-acciones .boton { margin: 2px 0 0; }
.cms-contexto { display: grid; grid-template-columns: auto 1fr; column-gap: 20px; align-items: baseline; margin-top: 16px; background: #F7FBFA; }
.cms-contexto h3 { grid-row: span 2; }
.cms-contexto p { margin: 0; }
.cms-contexto .ayuda { font-size: 13px; }
.cms-estructura { margin-top: 16px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; background: #FCFAFD; }
.cms-entradas { display: grid; gap: 12px; margin-top: 16px; padding: 20px; border: 1px solid #D8E8E5; border-left: 5px solid var(--turquesa); border-radius: 4px 16px 16px 4px; background: #F7FBFA; }
.cms-entradas h3 { margin: 0 0 5px; color: var(--turquesa); }
.cms-entradas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-entrada { display: grid; gap: 6px; padding: 14px; border: 1px solid #CDE8E4; border-radius: 12px; background: var(--fondo); }
.cms-entrada-tarea { color: var(--turquesa); font-size: 13px; font-weight: 700; }
.cms-entrada-acciones { display: flex; margin-top: 2px; }
.cms-entrada-acciones .boton { margin: 0; }
.cms-resumen-semanal { display: grid; gap: 12px; margin: 16px 0; padding: 20px; border: 1px solid #E7DCEF; border-left: 5px solid var(--violeta); border-radius: 4px 16px 16px 4px; background: #FBF8FC; }
.cms-resumen-semanal h3 { margin: 0 0 5px; color: var(--violeta); }
.cms-resumen-semanal-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-resumen-semanal-bloque { padding: 14px; border: 1px solid #E8DDEA; border-radius: 12px; background: var(--fondo); }
.cms-resumen-semanal-bloque h4 { margin: 0 0 8px; color: var(--violeta); }
.cms-resumen-semanal-bloque p { margin: 6px 0; color: var(--texto); font-size: 13px; line-height: 1.4; }
.cms-resumen-semanal-bloque .ayuda { color: var(--texto-suave); }
.cms-alertas-institucionales { display: grid; gap: 10px; margin: 16px 0; padding: 20px; border: 1px solid #F0CDD9; border-left: 5px solid var(--magenta); border-radius: 4px 16px 16px 4px; background: #FFF8FB; }
.cms-alertas-institucionales h3 { margin: 0; color: var(--magenta-texto); }
.cms-alertas-institucionales > .ayuda { margin: -5px 0 0; }
.cms-alertas-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-notificaciones { display: grid; gap: 10px; margin: 16px 0; padding: 20px; border: 1px solid #D9D0ED; border-left: 5px solid var(--violeta); border-radius: 4px 16px 16px 4px; background: #FAF8FD; }
.cms-notificaciones h3 { margin: 0; color: var(--violeta); }
.cms-notificaciones > .ayuda { margin: -5px 0 0; }
.cms-notificaciones-lista { display: grid; gap: 8px; }
.cms-registro-institucional { display: grid; gap: 12px; margin: 16px 0; padding: 20px; border: 1px solid #D9D0ED; border-left: 5px solid var(--violeta); border-radius: 4px 16px 16px 4px; background: #FCFAFD; }
.cms-registro-institucional h3 { margin: 0; color: var(--violeta); }
.cms-registro-lista { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.cms-registro-fila { display: grid; gap: 3px; padding: 12px 14px; border: 1px solid #E8DDEA; border-radius: 12px; background: var(--fondo); }
.cms-registro-fila strong { color: var(--violeta); }
.cms-registro-fila span { color: var(--texto); overflow-wrap: anywhere; }
.cms-registro-fila small { color: var(--texto-suave); }
.cms-notificacion { display: grid; gap: 5px; padding: 12px; border: 1px solid #E3DCEF; border-radius: 12px; background: var(--fondo); }
.cms-notificacion-leida { opacity: .68; }
.cms-comunicados { display: grid; gap: 10px; margin: 16px 0; padding: 20px; border: 1px solid #CBE7E1; border-left: 5px solid #168271; border-radius: 4px 16px 16px 4px; background: #F7FCFB; }
.cms-comunicados-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-comunicado { display: grid; gap: 6px; padding: 14px; border: 1px solid #CFE8E4; border-radius: 12px; background: var(--fondo); }
.cms-comunicado-urgente { border-left: 4px solid #C61A70; }
.cms-comunicado-urgente strong { color: var(--magenta-texto); }
.cms-alerta-institucional { display: grid; gap: 5px; padding: 13px; border: 1px solid #F1D8E3; border-radius: 12px; background: var(--fondo); }
.cms-alerta-institucional strong { color: var(--magenta-texto); }
.cms-alerta-institucional span { color: var(--texto-suave); font-size: 13px; }
.cms-alerta-institucional .boton { justify-self: start; margin: 3px 0 0; }
.cms-alerta-acciones { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 3px; }
.cms-alerta-acciones .boton { margin: 0; }
.cms-alertas-pospuestas { display: grid; gap: 8px; padding: 10px 12px; border: 1px solid #E5D8EA; border-radius: 12px; background: #FCFAFD; }
.cms-alertas-pospuestas > .ayuda { margin: 0; }
.cms-alerta-pospuesta { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--texto-suave); font-size: 13px; }
.cms-alerta-pospuesta .boton { margin: 0; flex: 0 0 auto; }
.cms-alerta-prioridad-0 { border-left: 4px solid #A11D1D; }
.cms-seccion-encabezado { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 14px; }
.cms-seccion-encabezado h3 { margin: 0 0 5px; color: var(--violeta); }
.cms-seccion-encabezado .ayuda { margin: 0; }
.cms-seccion-acciones { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.cms-seccion-acciones .boton { margin: 0; }
.cms-estructura-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-documentos-filtros { display: grid; grid-template-columns: minmax(0, 1fr) minmax(150px, .45fr) minmax(170px, .5fr); gap: 8px; margin: 0 0 14px; }
.cms-documentos-filtros input, .cms-documentos-filtros select { min-width: 0; min-height: 44px; padding: 9px 12px; border: 1px solid var(--linea); border-radius: 10px; background: var(--fondo); color: var(--texto); font: inherit; }
.cms-proyecto { display: grid; gap: 5px; min-width: 0; padding: 14px; border: 1px solid #E8DDEA; border-top: 3px solid var(--violeta); border-radius: 12px; background: var(--fondo); }
.cms-proyecto strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-proyecto-meta, .cms-proyecto-fecha { color: var(--texto-suave); font-size: 13px; }
.cms-proyecto-fecha { color: var(--violeta); font-weight: 600; }
.cms-proyecto-notas { color: var(--texto); font-size: 13px; line-height: 1.4; }
.cms-proyecto-riesgos, .cms-proyecto-hitos { color: var(--texto-suave); font-size: 13px; font-weight: 600; }
.cms-proyecto-riesgos-atencion { color: #A92758; }
.cms-proyecto-acciones { display: flex; justify-content: flex-start; margin-top: 3px; }
.cms-proyecto-acciones .boton { margin: 0; }
.cms-recurrentes { border-top: 3px solid #168271; }
.cms-tarea-recurrente { border-top-color: #168271; }
.cms-alerta-automatizacion { margin: 0; padding: 10px 12px; border-radius: 10px; border-left: 4px solid #D21B70; background: #FFF5F9; color: #6A225B; font-weight: 700; }
.cms-modelos-recurrentes { margin: 14px 0; padding: 12px; border-radius: 12px; background: #F1FAF7; }
.cms-modelos-recurrentes .ayuda { margin-top: 0; }
.cms-revision-semanal { display: grid; gap: 10px; margin-top: 14px; padding: 14px; border: 1px solid var(--linea); border-radius: 12px; background: #F8F5FB; }
.cms-revision-semanal h4 { margin: 0; color: var(--violeta); }
.cms-riesgos-proyecto { display: grid; gap: 12px; margin-top: 16px; padding: 20px; border: 1px solid #F1D8E3; border-left: 5px solid #C61A70; border-radius: 4px 16px 16px 4px; background: #FFF9FB; }
.cms-riesgos-lista { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-riesgo { display: grid; gap: 6px; padding: 14px; border: 1px solid #F1D8E3; border-radius: 12px; background: var(--fondo); }
.cms-riesgo-alto, .cms-riesgo-critico { border-left: 4px solid #C61A70; }
.cms-riesgo-encabezado { display: flex; align-items: start; justify-content: space-between; gap: 8px; }
.cms-riesgo-meta { color: var(--texto-suave); font-size: 13px; }
.cms-riesgo-acciones { display: flex; margin-top: 2px; }
.cms-riesgo-acciones .boton { margin: 0; }
.cms-seguimiento-proyecto { display: grid; gap: 12px; margin-top: 16px; padding: 20px; border: 1px solid #DDE9F5; border-left: 5px solid #3976B9; border-radius: 4px 16px 16px 4px; background: #F8FBFF; }
.cms-seguimiento-columnas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-seguimiento-vinculos { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.cms-seguimiento-lista { display: grid; align-content: start; gap: 8px; }
.cms-seguimiento-lista h4 { margin: 0; color: var(--violeta); }
.cms-seguimiento-item { display: grid; gap: 4px; padding: 12px; border: 1px solid #DDE9F5; border-radius: 12px; background: var(--fondo); }
.cms-seguimiento-item span, .cms-seguimiento-item small { color: var(--texto-suave); font-size: 13px; line-height: 1.4; }
.cms-captura-proyecto .cms-captura-detalles { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.cms-captura-proyecto .cms-captura-detalles > * { min-width: 0; }
.cms-equipos-titulo { margin: 22px 0 10px; color: var(--violeta); font-size: 16px; }
.cms-equipos-lista { display: grid; gap: 8px; }
.cms-equipo { display: grid; gap: 6px; padding: 12px 14px; border: 1px solid #E8DDEA; border-radius: 12px; background: var(--fondo); }
.cms-equipo-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cms-equipo-encabezado .boton { flex: 0 0 auto; margin: 0; }
.cms-equipo-meta { color: var(--texto-suave); font-size: 13px; line-height: 1.45; }
.cms-programas { margin-top: 16px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; background: #F7FBFA; }
.cms-programa { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px; border-left: 5px solid var(--turquesa); border-radius: 4px 14px 14px 4px; background: var(--fondo); }
.cms-programa > div { display: grid; gap: 4px; }
.cms-programa strong { color: var(--violeta); font-size: 18px; }
.cms-programa span { color: var(--texto-suave); font-size: 14px; }
.cms-programa-sobrelinea { margin: 0; color: var(--turquesa); font-size: 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; }
.cms-programa .boton { flex: 0 0 auto; margin: 0; }
.cms-reuniones { margin-top: 16px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; background: #FFFBF6; }
.cms-eventos { margin-top: 16px; padding: 20px; border: 1px solid var(--linea); border-radius: 16px; background: #F7FBFA; }
.cms-eventos-lista { display: grid; gap: 10px; }
.cms-evento { display: grid; gap: 6px; padding: 14px; border: 1px solid #CDE8E4; border-left: 4px solid var(--turquesa); border-radius: 4px 12px 12px 4px; background: var(--fondo); }
.cms-evento-preparacion { color: var(--texto-suave); font-size: 13px; font-weight: 700; }
.cms-evento-preparacion-pendiente { color: #9B5D0A; }
.cms-conflictos { display: grid; gap: 12px; margin-top: 16px; padding: 20px; border: 1px solid #F0CDD9; border-left: 5px solid var(--magenta); border-radius: 4px 16px 16px 4px; background: #FFF8FB; }
.cms-conflictos h3 { margin: 0; color: var(--magenta-texto); }
.cms-conflictos .ayuda { margin: -6px 0 0; }
.cms-conflictos-lista { display: grid; gap: 8px; }
.cms-conflicto { display: grid; gap: 4px; padding: 12px; border: 1px solid #F2DCE5; border-radius: 12px; background: var(--fondo); }
.cms-conflicto-meta { color: var(--texto-suave); font-size: 13px; }
.cms-conflictos > .boton { justify-self: start; margin: 0; }
.cms-checklist-items { display: grid; gap: 8px; }
.cms-checklist-item { display: grid; grid-template-columns: minmax(0, 1fr) 120px 180px; gap: 8px; padding: 10px; border: 1px solid #E8DDEA; border-radius: 12px; background: var(--fondo); }
.cms-reuniones-lista, .cms-decisiones-lista { display: grid; gap: 10px; }
.cms-decisiones-lista { margin-top: 18px; }
.cms-decisiones-lista h4 { margin: 0 0 2px; color: var(--violeta); font-size: 16px; }
.cms-reunion, .cms-decision { display: grid; gap: 6px; padding: 14px; border: 1px solid #E8DDEA; border-left: 4px solid var(--violeta); border-radius: 4px 12px 12px 4px; background: var(--fondo); }
.cms-decision { border-left-color: var(--turquesa); }
.cms-reunion-encabezado { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cms-reunion-meta, .cms-reunion-objetivo { color: var(--texto-suave); font-size: 13px; line-height: 1.45; }
.cms-reunion-objetivo { color: var(--texto); }
.cms-reunion-acciones { display: flex; justify-content: flex-end; gap: 8px; }
.cms-reunion-acciones .boton { margin: 2px 0 0; }
.cms-decision-vinculada { color: var(--turquesa); font-size: 13px; font-weight: 700; }
.cms-formularios { display: grid; gap: 14px; padding: 20px; border: 1px solid #E8DDEA; border-radius: 18px; background: #FFF; }
.cms-formularios-lista { display: grid; gap: 10px; }
.cms-formulario { display: grid; gap: 7px; padding: 14px; border: 1px solid #E8DDEA; border-left: 4px solid var(--violeta); border-radius: 4px 12px 12px 4px; background: var(--fondo); }
.cms-enlace-copiado { align-self: center; color: var(--turquesa); font-size: 13px; font-weight: 700; }
.formulario-publico-pagina { min-height: 100vh; margin: 0; background: var(--fondo); }
.formulario-publico { width: min(100% - 28px, 680px); margin: 0 auto; padding: 40px 0 64px; }
.formulario-publico-cabecera { padding: 28px; border-radius: 20px 20px 0 0; background: var(--violeta); color: white; }
.formulario-publico-cabecera p { margin: 0 0 8px; }
.formulario-publico-cabecera h1 { margin: 0; color: white; }
.formulario-publico-forma { display: grid; gap: 18px; padding: 28px; border: 1px solid #E8DDEA; border-top: 0; border-radius: 0 0 20px 20px; background: white; }
.formulario-publico-campo { display: grid; gap: 7px; color: var(--texto); font-weight: 700; }
.formulario-publico-campo input, .formulario-publico-campo textarea { width: 100%; box-sizing: border-box; font: inherit; padding: 12px; border: 1px solid #DCCBE3; border-radius: 10px; }
.formulario-publico-fecha-hora { grid-template-columns: minmax(0, 1fr) minmax(128px, 156px); align-items: end; }
.formulario-publico-fecha-hora > span { grid-column: 1 / -1; }
.formulario-publico-fecha-hora .campo-rotulo { display: none; }
.formulario-publico-trampa { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; opacity: 0; pointer-events: none; }
.formulario-publico-estado { min-height: 24px; margin: 0; color: var(--violeta); font-weight: 700; }

@media (max-width: 899px) {
  .estado-guardado {
    top: auto;
    bottom: calc(144px + env(safe-area-inset-bottom));
  }
  .cms { padding: 20px 14px 100px; }
  .cms-encabezado { display: grid; gap: 12px; }
  .cms-encabezado-acciones { display: grid; }
  .cms-encabezado-acciones .boton { width: 100%; }
  .cms-captura-detalles > * { flex-basis: 100%; }
  .cms-fecha-hora, .formulario-publico-fecha-hora { grid-template-columns: 1fr; }
  .formulario-publico-fecha-hora > span { grid-column: auto; }
  .cms-captura-acciones .boton { flex: 1 1 100%; width: 100%; }
  .cms-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .cms-indicador { min-height: 92px; padding: 13px; }
  .cms-indicador strong { font-size: 25px; }
  .cms-contexto { display: block; }
  .cms-contexto h3 { margin-bottom: 6px; }
  .cms-contexto p + p { margin-top: 4px; }
  .cms-seccion-encabezado { display: grid; gap: 12px; }
  .cms-seccion-acciones { justify-content: stretch; }
  .cms-seccion-acciones .boton { flex: 1 1 160px; }
  .cms-estructura-lista { grid-template-columns: 1fr; }
  .cms-entradas-lista { grid-template-columns: 1fr; }
  .cms-resumen-semanal-lista { grid-template-columns: 1fr; }
  .cms-alertas-lista { grid-template-columns: 1fr; }
  .cms-horizonte-lista { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-documentos-filtros { grid-template-columns: 1fr; }
  .cms-riesgos-lista { grid-template-columns: 1fr; }
  .cms-seguimiento-columnas { grid-template-columns: 1fr; }
  .cms-seguimiento-vinculos { grid-template-columns: 1fr; }
  .cms-checklist-item { grid-template-columns: 1fr; }
  .cms-equipo-encabezado { align-items: stretch; flex-direction: column; }
  .cms-equipo-encabezado .boton { width: 100%; }
  .cms-programa { display: grid; }
  .cms-programa .boton { width: 100%; }
  .cms-reunion-encabezado { align-items: flex-start; flex-direction: column; }
  .cms-reunion-acciones .boton { width: 100%; }
  .cms-tarea-acciones .boton { width: 100%; }
  .cms-conflictos > .boton { width: 100%; }
  .inicio-encabezado { display: grid; }
  .inicio-encabezado .boton { width: 100%; }
}

/* Centro de control institucional. El inicio orienta y deriva: cada equipo
   trabaja en una vista propia, en vez de desplegar toda la institución aquí. */
.cms {
  max-width: 1360px;
  padding: 28px clamp(18px, 3vw, 42px) 64px;
}
.cms-encabezado {
  position: relative;
  align-items: center;
  min-height: 132px;
  padding: 26px 28px;
  border: 0;
  border-radius: 24px;
  background: linear-gradient(118deg, var(--aletea-violeta-profundo) 0%, var(--violeta) 58%, #7E3F90 100%);
  color: white;
  overflow: hidden;
}
.cms-encabezado::after {
  content: '';
  position: absolute;
  inset: auto -58px -94px auto;
  width: 240px;
  height: 240px;
  border: 32px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
}
.cms-encabezado > * { position: relative; z-index: 1; }
.cms-firma-aletea {
  position: relative;
  z-index: 2;
  width: min(150px, 18vw);
  max-height: 68px;
  margin-left: auto;
  object-fit: contain;
  object-position: right center;
  filter: brightness(0) invert(1);
}
.cms-encabezado h2 { color: white; }
.cms-encabezado .ayuda, .cms-encabezado .cms-sobrelinea { color: rgba(255, 255, 255, .82); }
.cms-encabezado .cms-sobrelinea { font-weight: 700; }
.cms-encabezado-acciones .boton { border-color: rgba(255, 255, 255, .72); background: rgba(255, 255, 255, .08); color: white; }
.cms-encabezado-acciones .boton-principal { border-color: white; background: white; color: var(--violeta); }
.cms-indicadores { margin: 18px 0; }
.cms-indicador { min-height: 88px; padding: 14px 16px; border-radius: 14px; }
.cms-indicador strong { font-size: 27px; }
.cms-briefing {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin: 0 0 20px;
  padding: 20px 22px;
  border: 1px solid #D8E8E5;
  border-left: 5px solid var(--turquesa);
  border-radius: 4px 18px 18px 4px;
  background: #F5FBFA;
}
.cms-briefing-texto { display: grid; gap: 4px; }
.cms-briefing-etiqueta, .cms-area-etiqueta {
  color: var(--turquesa-texto);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cms-briefing h3 { margin: 0; color: var(--violeta); font-size: clamp(18px, 2vw, 24px); }
.cms-briefing p { margin: 0; color: var(--texto-suave); line-height: 1.45; }
.cms-briefing .boton { flex: 0 0 auto; margin: 0; }
.cms-centro-control { display: grid; grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); align-items: start; gap: 20px; }
.cms-control-principal { display: grid; gap: 12px; min-width: 0; }
.cms-control-principal > * { min-width: 0; max-width: 100%; box-sizing: border-box; }
.cms-seccion-encabezado > div { min-width: 0; }
.cms-seccion-encabezado h3, .cms-seccion-encabezado p { overflow-wrap: anywhere; }
.cms-area {
  border: 1px solid #E8DFEA;
  border-radius: 18px;
  background: #FFF;
  box-shadow: 0 2px 12px rgba(65, 38, 70, .035);
  border-left: 5px solid var(--turquesa);
}
.cms-area-deportes, .cms-area-comunicacion, .cms-area-eventos { border-left-color: var(--magenta); }
.cms-area-capacitaciones { border-left-color: var(--aletea-azul); }
.cms-area-finanzas { border-left-color: var(--aletea-amarillo); }
.cms-area-administracion { border-left-color: var(--violeta); }
.cms-area-cabecera {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 96px;
  padding: 18px;
}
.cms-area-identidad { display: grid; gap: 2px; min-width: 0; }
.cms-area-identidad strong { color: var(--violeta); font-size: 19px; }
.cms-area-resumen { color: var(--texto-suave); font-size: 13px; margin-top: 3px; }
.cms-area-indicador { align-self: center; padding: 8px 11px; border-radius: 999px; background: #F3E9F7; color: var(--violeta); font-size: 12px; font-weight: 700; white-space: nowrap; }
.cms-centro-area { grid-template-columns: minmax(0, 1fr) minmax(400px, 460px); }
.cms-centro-area .cms-control-principal { gap: 18px; }
.cms-modulo-deporte { margin: 0; padding: 22px; border-left: 5px solid var(--magenta); }
.cms-trabajo h3 { position: relative; padding-left: 13px; }
.cms-trabajo h3::before { content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 4px; border-radius: 999px; background: var(--magenta); }
.cms-radar {
  position: sticky;
  top: 16px;
  display: grid;
  gap: 12px;
  padding: 14px;
  border: 1px solid #E8DFEA;
  border-radius: 18px;
  background: #FCFAFD;
}
.cms-radar-titulo { padding: 2px 4px 0; color: var(--violeta); font-size: 13px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.cms-radar .cms-alertas-institucionales,
.cms-radar .cms-horizonte,
.cms-radar .cms-notificaciones { margin: 0; padding: 15px; border-radius: 12px; }
.cms-radar .cms-alertas-lista,
.cms-radar .cms-horizonte-lista { grid-template-columns: 1fr; }
.cms-radar .cms-horizonte-tramo { padding: 10px; }
.cms-radar .cms-horizonte-tramo strong { font-size: 17px; }
.cms-radar .cms-notificacion { padding: 10px; }
.cms-contexto { margin-top: 18px; border-radius: 14px; }

@media (max-width: 1100px) {
  .cms-centro-control { grid-template-columns: 1fr; }
  .cms-radar { position: static; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; }
  .cms-radar-titulo { grid-column: 1 / -1; }
}

@media (max-width: 899px) {
  .cms { padding: 16px 14px 104px; }
  .cms-encabezado { min-height: 0; padding: 22px 18px; border-radius: 18px; }
  .cms-encabezado::after { width: 180px; height: 180px; border-width: 24px; }
  .cms-firma-aletea { width: 108px; max-height: 48px; justify-self: end; }
  .cms-encabezado-acciones { grid-template-columns: 1fr 1fr; }
  .cms-briefing { display: grid; gap: 14px; padding: 17px; border-radius: 4px 14px 14px 4px; }
  .cms-briefing .boton { width: 100%; }
  .cms-area-cabecera { grid-template-columns: minmax(0, 1fr); gap: 9px; min-height: 0; padding: 16px; }
  .cms-area-identidad strong { font-size: 17px; }
  .cms-area-indicador { width: 100%; }
  .cms-radar { display: grid; grid-template-columns: 1fr; padding: 10px; }
  .cms-radar-titulo { grid-column: auto; }
  .cms-indicadores { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-indicador:last-child { grid-column: 1 / -1; min-height: 64px; }
}

/* Centro de mando 2026. Los datos urgentes conservan el protagonismo y el
   mapa de equipos es la firma visual derivada de la estructura real de Aletea. */
.cms-migas { display: flex; align-items: center; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; color: var(--texto-suave); font-size: 12px; }
.cms-migas .boton { min-height: 30px; margin: 0; padding: 3px 6px; border: 0; background: transparent; font-size: 12px; }
.cms-miga-actual { color: var(--texto); font-weight: 600; }
.cms-busqueda-global { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; margin: 14px 0 0; }
.cms-busqueda-global input { width: 100%; min-height: 50px; padding: 11px 58px 11px 16px; border: 1px solid #E3D9E7; border-radius: 14px; background: #FFF; color: var(--texto); font: inherit; }
.cms-atajo { grid-column: 2; justify-self: end; margin-left: -54px; margin-right: 11px; padding: 3px 7px; border: 1px solid #E3D9E7; border-radius: 7px; color: #827985; background: #FAF8FB; font-size: 11px; pointer-events: none; }
.cms-busqueda-resultados { position: absolute; z-index: 35; inset: calc(100% + 7px) 0 auto; display: grid; gap: 5px; padding: 0; }
.cms-busqueda-resultados:not(:empty) { padding: 9px; border: 1px solid #E3D9E7; border-radius: 14px; background: #FFF; box-shadow: 0 18px 44px rgba(49, 22, 58, .16); }
.cms-busqueda-resultado { justify-content: flex-start; width: 100%; margin: 0; border: 0; text-align: left; }
.cms-centro-sin-radar { grid-template-columns: minmax(0, 1fr); }
.cms-centro-control:not(.cms-centro-area) .cms-control-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cms-centro-control:not(.cms-centro-area) .cms-trabajo-personal,
.cms-centro-control:not(.cms-centro-area) .cms-mapa-vivo,
.cms-centro-control:not(.cms-centro-area) .cms-comunicados { grid-column: 1 / -1; }
.cms-panel-mando { display: grid; align-content: start; gap: 10px; min-height: 190px; padding: 20px; border: 1px solid #E7DFE9; border-radius: 18px; background: #FFF; }
.cms-panel-mando h3 { margin: 0; color: var(--violeta); font-size: 18px; }
.cms-panel-mando p { margin: 0; line-height: 1.5; }
.cms-panel-mando > .boton { justify-self: start; margin: auto 0 0; }
.cms-panel-mando-encabezado { display: flex; align-items: center; gap: 10px; }
.cms-panel-mando-encabezado > div { display: grid; gap: 1px; }
.cms-panel-icono { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: #F2E8F5; color: var(--violeta); font-size: 11px; font-weight: 700; }
.cms-panel-etiqueta { color: var(--turquesa-texto); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cms-mando-fila { display: grid; gap: 2px; padding: 9px 0; border-bottom: 1px solid #EEE8F0; }
.cms-mando-fila strong { font-size: 13px; }
.cms-mando-fila span { color: var(--texto-suave); font-size: 11px; }
.cms-proximo-evento { border-top: 4px solid var(--turquesa); }
.cms-decisiones-pendientes { border-top: 4px solid var(--violeta); }
.cms-trabajo-personal { display: grid; gap: 12px; }
.cms-trabajo-personal > input[type="search"] { width: 100%; min-height: 44px; padding: 9px 12px; border: 1px solid #E4DCE6; border-radius: 11px; }
.cms-vistas-guardadas { display: flex; flex-wrap: wrap; gap: 7px; }
.cms-vistas-guardadas .cms-filtro { min-height: 36px; margin: 0; padding: 6px 10px; border-color: #DED2E3; border-radius: 999px; font-size: 12px; }
.cms-vistas-guardadas .cms-filtro.activa { border-color: var(--violeta); background: var(--violeta); color: #FFF; }

/* Contexto sensible: informa la puerta de acceso sin exponer datos en el tablero. */
.cms-contexto-personas-protegido {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 10px 20px;
  padding: 22px;
  border: 1px solid #DCEFEA;
  border-left: 6px solid var(--verde, #12836D);
  border-radius: 16px;
  background: #F6FCFA;
}
.cms-contexto-personas-protegido > :not(.cms-contexto-personas-accion) { min-width: 0; }
.cms-contexto-personas-protegido .cms-panel-etiqueta,
.cms-contexto-personas-protegido h3,
.cms-contexto-personas-protegido p { grid-column: 1; margin: 0; }
.cms-contexto-personas-protegido h3 { font-size: clamp(20px, 1.8vw, 28px); color: var(--violeta); }
.cms-contexto-personas-protegido p { max-width: 66ch; color: #51505A; line-height: 1.55; }
.cms-contexto-personas-accion { grid-column: 2; grid-row: 1 / span 3; white-space: nowrap; }

@media (max-width: 720px) {
  .cms-contexto-personas-protegido { grid-template-columns: 1fr; }
  .cms-contexto-personas-accion { grid-column: 1; grid-row: auto; width: 100%; }
}
.cms-mapa-vivo { display: grid; gap: 14px; padding: 22px; border: 1px solid #E6DDE8; border-radius: 20px; background: #FFF; overflow: hidden; }
.cms-mapa-vivo h3 { margin: 3px 0; color: var(--violeta); }
.cms-mapa { position: relative; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; padding: 18px; border-radius: 18px; background: radial-gradient(circle at center, #F4EAF7 0 16%, transparent 16.5%), linear-gradient(145deg, #FBF8FC, #F7FBFA); }
.cms-mapa::before { content: ''; position: absolute; inset: 50% 12%; height: 1px; background: #DDCFE2; }
.cms-mapa-centro { position: relative; z-index: 2; flex: 0 0 100%; box-sizing: border-box; display: grid; place-content: center; min-height: 88px; padding: 15px; border: 1px solid #D7C4DF; border-radius: 18px; background: var(--violeta); color: #FFF; text-align: center; box-shadow: 0 8px 24px rgba(72, 31, 88, .16); }
.cms-mapa-centro strong { font-size: 18px; }
.cms-mapa-centro span { color: rgba(255,255,255,.78); font-size: 11px; }
.cms-mapa-nodo { position: relative; z-index: 2; flex: 1 1 200px; max-width: 300px; display: grid; align-content: center; justify-items: center; min-height: 70px; margin: 0; padding: 12px; border: 1px solid #DCEAE7; border-top: 4px solid var(--turquesa); border-radius: 14px; background: #FFF; color: var(--texto); text-align: center; font-weight: 600; }
.cms-mapa-nodo small { color: var(--texto-suave); font-size: 10px; font-weight: 500; }
.cms-mapa-deportes, .cms-mapa-comunicacion, .cms-mapa-eventos { border-top-color: var(--magenta); }
.cms-mapa-capacitaciones { border-top-color: var(--aletea-azul); }
.cms-mapa-finanzas { border-top-color: var(--aletea-amarillo); }
.cms-mapa-administracion { border-top-color: var(--violeta); }
.cms-ficha-area { display: grid; gap: 8px; margin: 0; padding: 22px; border: 1px solid #E4D9E7; border-left: 6px solid var(--turquesa); border-radius: 5px 20px 20px 5px; background: #FFF; }
.cms-ficha-area h3 { margin: 0; color: var(--violeta); font-size: 25px; }
.cms-ficha-area p { margin: 0; color: var(--texto-suave); }
.cms-ficha-area-deportes, .cms-ficha-area-comunicacion, .cms-ficha-area-eventos { border-left-color: var(--magenta); }
.cms-ficha-area-capacitaciones { border-left-color: var(--aletea-azul); }
.cms-ficha-area-finanzas { border-left-color: var(--aletea-amarillo); }
.cms-ficha-area-administracion { border-left-color: var(--violeta); }
.cms-ficha-area-datos { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 5px; }
.cms-ficha-area-datos span { padding: 6px 9px; border-radius: 999px; background: #F5F0F7; color: var(--violeta); font-size: 11px; font-weight: 600; }
.cms-resumen-formularios { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.cms-resumen-formularios span { padding: 7px 10px; border-radius: 999px; background: #F4EEF6; color: var(--violeta); font-size: 12px; font-weight: 700; }
.cms-agenda-vistas { margin: 0 0 12px; }
.cms-calendario-mes { display: grid; gap: 10px; margin-bottom: 16px; padding: 18px; border: 1px solid #E5DCE7; border-radius: 18px; background: #FFF; }
.cms-calendario-mes h4 { margin: 0; color: var(--violeta); text-transform: capitalize; }
.cms-calendario-grilla { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cms-calendario-dia-semana { color: var(--texto-suave); font-size: 10px; font-weight: 800; text-align: center; }
.cms-calendario-dia { display: grid; align-content: start; gap: 3px; min-height: 76px; padding: 7px; border: 1px solid #EEE7EF; border-radius: 10px; background: #FCFBFC; }
.cms-calendario-dia > strong { font-size: 11px; }
.cms-calendario-hoy { border-color: var(--turquesa); background: #F0FAF8; box-shadow: inset 0 0 0 1px var(--turquesa); }
.cms-calendario-evento { overflow: hidden; padding: 3px 5px; border-radius: 5px; background: #F1E6F4; color: var(--violeta); font-size: 9px; font-weight: 600; text-overflow: ellipsis; white-space: nowrap; }
.cms-carga { display: grid; gap: 12px; padding: 26px 0; }
.cms-carga-linea, .cms-carga-tarjetas span { display: block; min-height: 22px; border-radius: 10px; background: linear-gradient(90deg, #F1EBF3 20%, #FAF8FB 45%, #F1EBF3 70%); background-size: 260% 100%; animation: cms-cargando 1.25s ease-in-out infinite; }
.cms-carga-linea-corta { width: 58%; }
.cms-carga-tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.cms-carga-tarjetas span { min-height: 150px; }
@keyframes cms-cargando { to { background-position: -160% 0; } }
.cms button:focus-visible, .cms input:focus-visible, .cms select:focus-visible, .cms textarea:focus-visible, .app-cms .boton:focus-visible { outline: 3px solid rgba(20, 128, 105, .34); outline-offset: 3px; }

/* Los formularios extensos se concentran en un modal acotado. El contexto se
   mantiene visible detrás y el usuario no pierde la sección de origen. */
.cms-con-panel::before { content: ''; position: fixed; z-index: 69; inset: 0; background: rgba(31, 18, 35, .28); backdrop-filter: blur(1px); }
.cms-con-panel > .cms-captura {
  position: fixed;
  z-index: 70;
  top: 50%;
  right: auto;
  bottom: auto;
  left: 50%;
  transform: translate(-50%, -50%);
  box-sizing: border-box;
  width: min(880px, calc(100vw - 48px));
  max-width: calc(100vw - 48px);
  max-height: calc(100dvh - 40px);
  min-width: 0;
  margin: 0;
  padding: clamp(18px, 2.2vw, 28px);
  overflow: auto;
  overscroll-behavior: contain;
  border: 1px solid #DCCCE4;
  border-radius: 22px;
  background: #FFF;
  box-shadow: 0 24px 70px rgba(43, 20, 50, .24);
}

@media (max-width: 1100px) {
  .cms-centro-control:not(.cms-centro-area) .cms-control-principal { grid-template-columns: 1fr; }
  .cms-centro-control:not(.cms-centro-area) .cms-control-principal > * { grid-column: auto; }
}

@media (max-width: 899px) {
  .cms-busqueda-global { margin-top: 10px; }
  .cms-busqueda-global input { min-height: 48px; padding-right: 16px; }
  .cms-atajo { display: none; }
  .cms-panel-mando { min-height: 0; padding: 17px; }
  .cms-mapa-vivo { padding: 16px; }
  .cms-mapa { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 10px; }
  .cms-mapa::before { display: none; }
  .cms-mapa-centro { grid-column: 1 / -1; }
  .cms-mapa-nodo { min-height: 64px; }
  .cms-mapa-nodo:last-child { grid-column: 1 / -1; }
  .cms-ficha-area { padding: 18px; }
  .cms-seccion-encabezado { align-items: stretch; }
  .cms-seccion-encabezado > .boton { width: 100%; }
  .cms-calendario-mes { padding: 12px; overflow: hidden; }
  .cms-calendario-grilla { min-width: 0; gap: 3px; }
  .cms-calendario-dia { min-width: 0; min-height: 48px; padding: 4px; border-radius: 7px; }
  .cms-calendario-evento { width: 100%; padding: 2px 3px; font-size: 7px; }
  .cms-carga-tarjetas { grid-template-columns: 1fr; }
  .cms-con-panel > .cms-captura { top: 50%; right: auto; bottom: auto; left: 50%; width: calc(100vw - 20px); max-width: calc(100vw - 20px); max-height: calc(100dvh - 20px); padding: 18px; border-radius: 18px; }
}

/* Rejilla fluida del centro institucional. Los cortes responden al espacio que
   queda despues de la navegacion lateral, no al ancho total del navegador. */
@media (min-width: 900px) {
  .app-cms > .cuerpo,
  .app-cms > .sello {
    width: calc(100% - 256px);
  }

  .cms {
    width: 100%;
    max-width: none;
    margin-inline: 0;
    box-sizing: border-box;
  }

  .cms-centro-control {
    grid-template-columns: minmax(0, 1fr) minmax(480px, 38%);
  }

  .cms-control-principal {
    container-type: inline-size;
  }

  .cms-centro-control:not(.cms-centro-area) .cms-control-principal {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-centro-control:not(.cms-centro-area) .cms-control-principal > * {
    grid-column: auto;
  }

  @container (min-width: 820px) {
    .cms-centro-control:not(.cms-centro-area) .cms-control-principal {
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .cms-centro-control:not(.cms-centro-area) .cms-trabajo-personal,
    .cms-centro-control:not(.cms-centro-area) .cms-mapa-vivo,
    .cms-centro-control:not(.cms-centro-area) .cms-comunicados {
      grid-column: 1 / -1;
    }
  }
}

.cms-mapa {
  grid-template-columns: repeat(auto-fit, minmax(175px, 1fr));
}

.cms-mapa-centro {
  grid-column: 1 / -1;
}

.cms-mapa-nodo {
  min-width: 0;
  justify-items: center;
  text-align: center;
  overflow-wrap: anywhere;
}

.cms-mapa-nodo small {
  max-width: 100%;
  overflow-wrap: anywhere;
}

@media (min-width: 900px) and (max-width: 1399px) {
  .cms-centro-control {
    grid-template-columns: minmax(0, 1fr);
  }

  .cms-radar {
    position: static;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: stretch;
  }

  .cms-radar-titulo {
    grid-column: 1 / -1;
  }
}

@media (max-width: 899px) {
  .app-cms > .cuerpo,
  .app-cms > .sello {
    width: 100%;
  }

  .cms,
  .cms-centro-control,
  .cms-control-principal,
  .cms-control-principal > *,
  .cms-seccion-encabezado,
  .cms-seccion-encabezado > *,
  .cms-estructura-lista,
  .cms-estructura-lista > *,
  .cms-modelos-recurrentes,
  .cms-proyecto,
  .cms-proyecto-meta,
  .cms-proyecto-fecha {
    min-width: 0;
    max-width: 100%;
  }

  .cms-seccion-encabezado,
  .cms-seccion-encabezado > *,
  .cms-modelos-recurrentes {
    width: auto;
    justify-self: stretch;
  }

  .cms-seccion-encabezado > .boton,
  .cms-proyecto-acciones .boton {
    width: 100%;
    min-width: 0;
  }

  .cms-proyecto-meta,
  .cms-proyecto-fecha,
  .cms-comunicado,
  .cms-comunicado * {
    overflow-wrap: anywhere;
  }

  .cms-proyecto-acciones {
    flex-wrap: wrap;
    gap: 8px;
  }

  .cms-formularios {
    container-type: inline-size;
  }

  .cms-formularios > .cms-seccion-encabezado {
    width: 100cqw;
  }

  .cms-mapa {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Refuerzo de ancho y jerarquía para el centro de mando. Estas reglas usan el
   ancho disponible después de la navegación lateral y nunca un ancho fijo de
   tarjeta, para que cada área conserve lectura cómoda en pantallas amplias. */
.app-cms > .cuerpo { width: auto; }
.cms-centro-control,
.cms-control-principal,
.cms-centro-control > *,
.cms-control-principal > *,
.cms-seccion-encabezado,
.cms-seccion-encabezado > *,
.cms-programa,
.cms-proyecto,
.cms-formulario,
.cms-evento,
.cms-reunion,
.cms-ficha-area,
.cms-contexto { min-width: 0; }

.cms-indicador {
  display: grid;
  align-content: start;
  gap: 2px;
  width: 100%;
  margin: 0;
  text-align: left;
  cursor: pointer;
}
.cms-indicador small { color: var(--texto-suave); font-size: 11px; font-weight: 600; }
.cms-indicador:hover { transform: translateY(-1px); box-shadow: 0 8px 20px rgba(61, 29, 72, .09); }
.cms-orientacion,
.cms-ayuda-contextual {
  display: grid;
  align-content: start;
  gap: 9px;
  min-height: 190px;
  padding: 20px;
  border: 1px solid #D8E8E5;
  border-left: 5px solid var(--turquesa);
  border-radius: 6px 18px 18px 6px;
  background: linear-gradient(150deg, #F6FCFB, #FFF);
}
.cms-orientacion h3,
.cms-ayuda-contextual h3 { margin: 0; color: var(--violeta); font-size: 20px; }
.cms-orientacion p,
.cms-ayuda-contextual p { margin: 0; line-height: 1.5; }
.cms-orientacion-accion { justify-self: start; margin-top: auto; }
.cms-ayuda-contextual { border-left-color: var(--magenta); background: #FFFDFE; }
.cms-ayuda-pasos { display: grid; gap: 9px; margin: 4px 0 0; padding: 0; list-style: none; }
.cms-ayuda-pasos li { display: grid; gap: 2px; padding: 8px 0; border-top: 1px solid #F0EAF2; }
.cms-ayuda-pasos strong { color: var(--violeta); font-size: 13px; }
.cms-ayuda-pasos span { color: var(--texto-suave); font-size: 12px; line-height: 1.45; }
.cms-estado-vacio { display: grid; gap: 10px; padding: 18px; border: 1px dashed #D8C9DE; border-radius: 14px; background: #FCFAFD; }
.cms-estado-vacio p { margin: 0; }
.cms-estado-vacio .boton { justify-self: start; margin: 0; }
.cms-busqueda-resultado { display: grid; gap: 2px; min-width: 0; padding: 10px 12px; }
.cms-busqueda-resultado strong,
.cms-busqueda-resultado span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cms-busqueda-resultado span { color: var(--texto-suave); font-size: 11px; }
.cms-flujo-proyectos,
.cms-embudo-formularios,
.cms-centro-decisiones {
  display: grid;
  gap: 16px;
  padding: 22px;
  border: 1px solid #E7DFE9;
  border-radius: 18px;
  background: #FFF;
}
.cms-flujo-etapas,
.cms-embudo-pasos,
.cms-decisiones-resumen { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 9px; }
.cms-flujo-etapa,
.cms-embudo-paso,
.cms-decisiones-resumen article {
  display: grid;
  gap: 3px;
  min-width: 0;
  padding: 13px;
  border: 1px solid #E8DFEA;
  border-top: 4px solid var(--turquesa);
  border-radius: 12px;
  background: #FCFAFD;
}
.cms-flujo-etapa:nth-child(2), .cms-embudo-paso:nth-child(2) { border-top-color: #EAB837; }
.cms-flujo-etapa:nth-child(3), .cms-embudo-paso:nth-child(3) { border-top-color: var(--magenta); }
.cms-flujo-etapa:nth-child(4), .cms-embudo-paso:nth-child(4) { border-top-color: #3976B9; }
.cms-flujo-etapa strong,
.cms-embudo-paso strong,
.cms-decisiones-resumen strong { color: var(--violeta); font-size: 24px; line-height: 1; }
.cms-flujo-etapa span,
.cms-embudo-paso span,
.cms-decisiones-resumen span { font-size: 12px; font-weight: 700; overflow-wrap: anywhere; }
.cms-flujo-etapa small { color: var(--texto-suave); font-size: 10px; line-height: 1.35; }
.cms-flujo-proyectos-lista,
.cms-decisiones-proximas { display: grid; gap: 9px; }
.cms-flujo-proyecto,
.cms-decision-pendiente {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 5px 14px;
  align-items: center;
  padding: 13px 0;
  border-top: 1px solid #EEE8F0;
}
.cms-flujo-proyecto > strong,
.cms-flujo-proyecto > span,
.cms-flujo-proyecto > small,
.cms-decision-pendiente > strong,
.cms-decision-pendiente > span { min-width: 0; overflow-wrap: anywhere; }
.cms-flujo-proyecto > span,
.cms-decision-pendiente > span { color: var(--texto-suave); font-size: 12px; }
.cms-flujo-avance { grid-column: 1; height: 7px; overflow: hidden; border-radius: 999px; background: #EAE2ED; }
.cms-flujo-avance::after { content: ''; display: block; width: var(--avance-proyecto); height: 100%; border-radius: inherit; background: linear-gradient(90deg, var(--turquesa), var(--violeta)); }
.cms-flujo-proyecto > small { grid-column: 1; color: var(--texto-suave); font-size: 11px; }
.cms-flujo-proyecto > .boton,
.cms-decision-pendiente > .boton { grid-column: 2; grid-row: 1 / span 3; margin: 0; white-space: nowrap; }
.cms-mapa-responsable { color: #796A80 !important; }

@media (min-width: 900px) {
  .cms-centro-control.cms-centro-sin-radar .cms-flujo-proyectos,
  .cms-centro-control.cms-centro-sin-radar .cms-embudo-formularios,
  .cms-centro-control.cms-centro-sin-radar .cms-centro-decisiones { grid-column: 1 / -1; }
}

@media (min-width: 900px) {
  .app-cms > .cuerpo,
  .app-cms > .sello {
    width: calc(100vw - 256px);
    max-width: none;
  }
  .cms { width: 100%; max-width: none; }
  .cms-centro-control.cms-centro-sin-radar,
  .cms-centro-control.cms-centro-area.cms-centro-sin-radar { grid-template-columns: minmax(0, 1fr); }
  .cms-centro-control.cms-centro-sin-radar .cms-control-principal { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-centro-control.cms-centro-sin-radar .cms-ficha-area,
  .cms-centro-control.cms-centro-sin-radar .cms-trabajo-personal,
  .cms-centro-control.cms-centro-sin-radar .cms-contexto,
  .cms-centro-control.cms-centro-sin-radar .cms-programas,
  .cms-centro-control.cms-centro-sin-radar .cms-estructura { grid-column: 1 / -1; }
}

@media (min-width: 900px) and (max-width: 1220px) {
  .cms-centro-control.cms-centro-sin-radar .cms-control-principal { grid-template-columns: minmax(0, 1fr); }
  .cms-centro-control.cms-centro-sin-radar .cms-control-principal > * { grid-column: auto; }
}

@media (max-width: 899px) {
  .cms-orientacion,
  .cms-ayuda-contextual { min-height: 0; padding: 17px; }
  .cms-orientacion-accion,
  .cms-estado-vacio .boton { width: 100%; }
  .cms-flujo-proyectos,
  .cms-embudo-formularios,
  .cms-centro-decisiones { padding: 17px; }
  .cms-flujo-etapas,
  .cms-embudo-pasos,
  .cms-decisiones-resumen { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cms-flujo-proyecto,
  .cms-decision-pendiente { grid-template-columns: minmax(0, 1fr); }
  .cms-flujo-proyecto > .boton,
  .cms-decision-pendiente > .boton { grid-column: 1; grid-row: auto; width: 100%; white-space: normal; }
}