/* BASTIUM CRM - agenda.css
   Calendario en tres modos (mes, semana, lista) y panel de resumen del dia.
   Se apoya en tokens.css y componentes.css. Cero colores a mano, cero SVG, cero emojis. */

/* ============================================================ armazon */

.agenda {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 324px;
  gap: var(--e-5);
  align-items: start;
  min-width: 0;
}

.agenda-principal {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}

.agenda-barra {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  flex-wrap: wrap;
  min-width: 0;
}

.agenda-nav {
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.agenda-paso {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-s);
  background: var(--cristal-2);
  color: var(--texto-2);
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva);
}

.agenda-paso:hover { background: var(--cristal-3); border-color: var(--borde-fuerte); }
.agenda-paso:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* Flechas dibujadas con bordes: nada de iconos importados */
.flecha {
  width: 7px;
  height: 7px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
}

.flecha.izquierda { transform: rotate(-135deg) translate(-1px, -1px); }
.flecha.derecha { transform: rotate(45deg) translate(-1px, -1px); }

.agenda-periodo {
  margin-right: auto;
  font-family: var(--fuente-display);
  font-size: var(--t-l);
  font-weight: var(--peso-fuerte);
  letter-spacing: .06em;
  color: var(--texto);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Solo la inicial en mayuscula: "Julio de 2026", nunca "Julio De 2026" */
.agenda-periodo::first-letter,
.lista-dia-texto::first-letter,
.ficha-datos dd::first-letter { text-transform: uppercase; }

.agenda-filtros {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.agenda-lienzo { min-width: 0; }

.agenda-lienzo > .cargador { margin: var(--e-9) auto; }

/* ============================================================ color por tipo y estado */

.tipo-reunion      { --evento: var(--acento); }
.tipo-llamada      { --evento: var(--bien); }
.tipo-seguimiento  { --evento: var(--alerta); }
.tipo-cierre       { --evento: var(--oro); }
.tipo-demo         { --evento: var(--etapa-4); }

.estado-noasistio { --evento: var(--mal); }
.estado-cancelado { opacity: .5; }
.estado-cancelado .evento-titulo,
.estado-cancelado .lista-titulo { text-decoration: line-through; }
.estado-hecho { --evento: var(--bien); }

/* ============================================================ modo mes */

.mes {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-l);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-2);
  overflow: hidden;
}

.mes-cabecera {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--borde);
  background: linear-gradient(180deg, var(--cristal-2), transparent);
}

.mes-dia-nombre {
  padding: var(--e-2) var(--e-3);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-3);
}

.mes-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-auto-rows: minmax(104px, auto);
}

.mes-celda {
  position: relative;
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  padding: var(--e-2) 5px 20px;
  border-right: 1px solid var(--borde);
  border-bottom: 1px solid var(--borde);
  transition: background var(--v-rapida) var(--curva);
  cursor: cell;
}

.mes-celda:nth-child(7n) { border-right: 0; }
.mes-celda:nth-last-child(-n + 7) { border-bottom: 0; }
.mes-celda:hover { background: var(--cristal); }
.mes-celda.fuera { background: var(--cristal-hondo); }
.mes-celda.fuera .mes-numero { color: var(--texto-4); }

.mes-celda.destino {
  background: var(--acento-tenue);
  box-shadow: inset 0 0 0 1px var(--acento-hondo);
}

.mes-numero {
  align-self: flex-start;
  min-width: 24px;
  height: 22px;
  padding: 0 6px;
  border: 0;
  border-radius: var(--r-redondo);
  background: transparent;
  color: var(--texto-2);
  font-family: var(--fuente-mono);
  font-size: var(--t-s);
  font-variant-numeric: tabular-nums;
  cursor: pointer;
}

.mes-numero:hover { background: var(--cristal-2); color: var(--texto); }
.mes-numero:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.mes-celda.hoy .mes-numero {
  background: var(--acento);
  color: var(--texto-sobre-acento);
  font-weight: var(--peso-fuerte);
}

.mes-eventos {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 0;
}

.mes-eventos > .evento-chip:nth-child(n + 4) { display: none; }

.mes-mas {
  position: absolute;
  left: 6px;
  bottom: 4px;
  padding: 1px 4px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--texto-3);
  font-size: var(--t-micro);
  cursor: pointer;
}

.mes-mas:hover { background: var(--cristal-2); color: var(--texto); }
.mes-mas:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

/* Abrir el dia: la lista completa flota sobre la rejilla */
.mes-celda.expandida { z-index: 6; }

.mes-celda.expandida .mes-eventos {
  position: absolute;
  left: 4px;
  right: 4px;
  top: 30px;
  z-index: 7;
  max-height: 232px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-s);
  background: var(--cristal-hondo);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-3);
}

.mes-celda.expandida .mes-eventos > .evento-chip:nth-child(n + 4) { display: flex; }

.mes-puntos {
  display: none;
  gap: 3px;
  padding-top: 2px;
}

.mes-punto {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--evento, var(--acento));
}

.mes-punto.estado-cancelado { opacity: .4; }

/* ---- chip de evento (mes) ---- */

.evento-chip {
  display: flex;
  align-items: center;
  gap: 5px;
  width: 100%;
  padding: 2px 5px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--texto-2);
  font-size: var(--t-xs);
  text-align: left;
  cursor: pointer;
  touch-action: none;
  transition: background var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}

.evento-chip::before {
  content: "";
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--evento, var(--acento));
}

.evento-chip:hover { background: var(--cristal-2); color: var(--texto); }
.evento-chip:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.evento-chip.activo { background: var(--acento-tenue); color: var(--texto); }
.evento-chip.arrastrado { opacity: .35; }

.evento-chip .evento-hora {
  flex: 0 0 auto;
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

.evento-chip .evento-titulo {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.evento-chip.estado-hecho::before { box-shadow: 0 0 0 2px var(--bien-tenue); }
.evento-chip.estado-noasistio { color: var(--mal); }

/* En celdas estrechas manda el titulo: la hora estorba */
@container (max-width: 168px) {
  .evento-chip .evento-hora { display: none; }
}

/* Copia que sigue al dedo o al raton mientras se arrastra */
.fantasma-agenda {
  position: fixed;
  top: 0;
  left: 0;
  z-index: var(--z-arrastre);
  pointer-events: none;
  padding: 4px 8px;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-xs);
  background: var(--cristal-hondo);
  backdrop-filter: var(--desenfoque-suave);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  box-shadow: var(--sombra-arrastre);
  transform: rotate(2deg);
  opacity: .95;
}

body.agenda-arrastrando { cursor: grabbing; user-select: none; }

/* ============================================================ modo semana */

.semana {
  --alto-hora: 52px;
  display: flex;
  flex-direction: column;
  max-height: calc(100dvh - 216px);
  overflow: auto;
  border: 1px solid var(--borde);
  border-top-color: var(--borde-luz);
  border-radius: var(--r-l);
  background: var(--cristal);
  backdrop-filter: var(--desenfoque);
  -webkit-backdrop-filter: var(--desenfoque);
  box-shadow: var(--sombra-2);
  overscroll-behavior: contain;
}

.semana-cabecera {
  position: sticky;
  top: 0;
  z-index: 3;
  display: grid;
  grid-template-columns: 58px repeat(7, minmax(0, 1fr));
  border-bottom: 1px solid var(--borde);
  background: var(--fondo-1);
}

.semana-esquina { border-right: 1px solid var(--borde); }

.semana-dia {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: var(--e-2);
  padding: var(--e-3) var(--e-2);
  border: 0;
  border-right: 1px solid var(--borde);
  background: transparent;
  color: var(--texto-3);
  cursor: pointer;
  transition: color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
}

.semana-dia:last-child { border-right: 0; }
.semana-dia:hover { background: var(--cristal); color: var(--texto); }
.semana-dia:focus-visible { outline: 2px solid var(--acento); outline-offset: -2px; }

.semana-dia-nombre {
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
}

.semana-dia-numero {
  font-family: var(--fuente-mono);
  font-size: var(--t-l);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.semana-dia.hoy .semana-dia-nombre { color: var(--acento-claro); }

.semana-dia.hoy .semana-dia-numero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--acento);
  color: var(--texto-sobre-acento);
  font-size: var(--t-m);
}

.semana-cuerpo {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
}

.semana-horas {
  display: flex;
  flex-direction: column;
  border-right: 1px solid var(--borde);
}

.semana-hora {
  position: relative;
  height: var(--alto-hora);
  padding-right: var(--e-2);
  text-align: right;
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
  transform: translateY(-6px);
}

.semana-rejilla {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.semana-columna {
  position: relative;
  border-right: 1px solid var(--borde);
  cursor: cell;
}

.semana-columna:last-child { border-right: 0; }
.semana-columna.hoy { background: var(--acento-tenue); }
.semana-columna.destino { background: var(--cristal-2); }

.semana-franja {
  height: var(--alto-hora);
  border-bottom: 1px solid var(--borde);
}

.semana-franja:last-child { border-bottom: 0; }

.semana-ahora {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--mal);
  pointer-events: none;
  z-index: 4;
}

.semana-ahora::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--mal);
  box-shadow: 0 0 0 3px var(--mal-tenue);
}

/* ---- bloque de evento (semana) ---- */

.evento-bloque {
  position: absolute;
  left: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 1px;
  overflow: hidden;
  min-width: 0;
  padding: 3px 6px;
  border: 1px solid var(--borde);
  border-left: 3px solid var(--evento, var(--acento));
  border-radius: var(--r-xs);
  background: var(--cristal-2);
  backdrop-filter: var(--desenfoque-suave);
  -webkit-backdrop-filter: var(--desenfoque-suave);
  color: var(--texto);
  cursor: grab;
  touch-action: none;
  transition: box-shadow var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva);
}

/* El tinte del tipo va en una capa propia para no apagar el texto */
.evento-bloque::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--evento, var(--acento));
  opacity: .14;
  pointer-events: none;
}

.evento-bloque > * { position: relative; z-index: 1; }

.evento-bloque:hover { box-shadow: var(--sombra-1); border-color: var(--borde-fuerte); }
.evento-bloque:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }
.evento-bloque.activo { box-shadow: var(--brillo-acento); }

.evento-bloque.arrastrado {
  z-index: 8;
  box-shadow: var(--sombra-arrastre);
  cursor: grabbing;
  opacity: .92;
}

.evento-bloque .evento-hora {
  font-family: var(--fuente-mono);
  font-size: var(--t-micro);
  font-variant-numeric: tabular-nums;
  color: var(--texto-2);
  white-space: nowrap;
}

.evento-bloque .evento-titulo {
  font-size: var(--t-xs);
  font-weight: var(--peso-medio);
  line-height: 1.25;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.evento-bloque .evento-lead {
  font-size: var(--t-micro);
  color: var(--texto-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Cita de 30 minutos o menos: hora y titulo en la misma linea */
.evento-bloque.corto {
  flex-direction: row;
  align-items: baseline;
  gap: var(--e-2);
  padding-top: 1px;
}

.evento-bloque.corto .evento-lead { display: none; }
.evento-bloque.corto .evento-hora { flex: 0 0 auto; }
.evento-bloque.corto .evento-titulo { min-width: 0; }

.evento-bloque.estado-noasistio::before {
  opacity: .2;
  background: repeating-linear-gradient(
    135deg,
    var(--mal) 0 6px,
    transparent 6px 12px
  );
}

.evento-bloque.estado-hecho { border-left-color: var(--bien); }
.evento-bloque.estado-cancelado::before { opacity: .06; }

.evento-asa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  height: 8px;
  cursor: ns-resize;
  touch-action: none;
}

.evento-asa::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 22px;
  height: 2px;
  border-radius: var(--r-redondo);
  background: var(--borde-fuerte);
  transform: translateX(-50%);
  opacity: 0;
  transition: opacity var(--v-rapida) var(--curva);
}

.evento-bloque:hover .evento-asa::after { opacity: 1; }

/* ============================================================ modo agenda (lista) */

.lista-agenda {
  display: flex;
  flex-direction: column;
  gap: var(--e-5);
}

.lista-dia {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.lista-dia-cabecera {
  display: flex;
  align-items: baseline;
  gap: var(--e-3);
  padding: var(--e-2) var(--e-2) var(--e-3);
  border-bottom: 1px solid var(--borde);
  margin-bottom: var(--e-2);
}

.lista-dia-numero {
  font-family: var(--fuente-mono);
  font-size: var(--t-xl);
  font-variant-numeric: tabular-nums;
  color: var(--texto);
}

.lista-dia-texto {
  font-size: var(--t-s);
  color: var(--texto-3);
}

.lista-dia-cabecera.hoy .lista-dia-numero { color: var(--acento-claro); }

.lista-evento,
.lista-tarea {
  display: flex;
  align-items: center;
  gap: var(--e-4);
  width: 100%;
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--borde);
  border-left: 3px solid var(--evento, var(--acento));
  border-radius: var(--r-s);
  background: var(--cristal);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva), transform var(--v-rapida) var(--curva);
}

.lista-evento:hover { background: var(--cristal-2); transform: translateX(2px); }
.lista-evento:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }
.lista-evento.activo { box-shadow: var(--brillo-acento); }

.lista-tarea { border-left-color: var(--texto-4); cursor: default; }
.lista-tarea.prioridad-alta { border-left-color: var(--mal); }

.lista-horas {
  display: flex;
  flex-direction: column;
  flex: 0 0 62px;
  font-family: var(--fuente-mono);
  font-variant-numeric: tabular-nums;
}

.lista-hora-inicio { font-size: var(--t-m); color: var(--texto); }
.lista-hora-fin { font-size: var(--t-micro); color: var(--texto-4); }

.lista-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  margin-right: auto;
}

.lista-titulo {
  font-size: var(--t-m);
  font-weight: var(--peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.lista-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  font-size: var(--t-xs);
  color: var(--texto-3);
}

.lista-meta > span + span::before {
  content: "";
  display: inline-block;
  width: 3px;
  height: 3px;
  margin-right: var(--e-3);
  border-radius: 50%;
  background: var(--texto-4);
  vertical-align: middle;
}

/* ============================================================ panel lateral */

.agenda-lateral {
  position: sticky;
  top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
  min-width: 0;
}

.resumen {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.resumen-bloque {
  gap: var(--e-2);
  padding: var(--e-4);
}

.resumen-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-2);
}

.resumen-titulo {
  margin-right: auto;
  font-family: var(--fuente-display);
  font-size: var(--t-s);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-2);
}

.resumen-cuenta {
  min-width: 22px;
  padding: 1px 6px;
  border-radius: var(--r-redondo);
  background: var(--cristal-3);
  color: var(--texto-2);
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  text-align: center;
}

.resumen-item {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: 5px var(--e-2);
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  color: var(--texto-2);
  text-align: left;
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva);
}

.resumen-item::before {
  content: "";
  flex: 0 0 auto;
  width: 4px;
  height: 22px;
  border-radius: var(--r-redondo);
  background: var(--evento, var(--acento));
}

.resumen-item:hover { background: var(--cristal-2); color: var(--texto); }
.resumen-item:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.resumen-hora {
  flex: 0 0 auto;
  font-family: var(--fuente-mono);
  font-size: var(--t-xs);
  font-variant-numeric: tabular-nums;
  color: var(--texto-3);
}

.resumen-texto {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: var(--t-s);
}

.resumen-acciones {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
  margin-top: var(--e-3);
}

/* Reuniones pasadas sin resultado: el aviso que hay que reclamar */
.resumen-bloque.reclamo {
  border-color: var(--alerta);
  background: var(--alerta-tenue);
}

.reclamo-numero {
  font-family: var(--fuente-mono);
  font-size: var(--t-3xl);
  line-height: 1;
  color: var(--alerta);
}

.reclamo-texto {
  font-size: var(--t-s);
  color: var(--texto);
}

/* ---- tareas del panel ---- */

.tarea-fila {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-2);
  border-radius: var(--r-xs);
}

.tarea-fila:hover { background: var(--cristal-2); }

.tarea-casilla {
  flex: 0 0 auto;
  position: relative;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  padding: 0;
  border: 1px solid var(--borde-fuerte);
  border-radius: var(--r-xs);
  background: var(--cristal);
  cursor: pointer;
  transition: background var(--v-rapida) var(--curva), border-color var(--v-rapida) var(--curva);
}

.tarea-casilla:hover { border-color: var(--acento); }
.tarea-casilla:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.tarea-casilla.marcada {
  background: var(--bien);
  border-color: var(--bien);
}

/* Marca de verificacion dibujada con dos bordes */
.tarea-casilla.marcada::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 1px;
  width: 5px;
  height: 9px;
  border-right: 2px solid var(--texto-sobre-acento);
  border-bottom: 2px solid var(--texto-sobre-acento);
  transform: rotate(42deg);
}

.tarea-cuerpo {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  margin-right: auto;
}

.tarea-titulo {
  font-size: var(--t-s);
  color: var(--texto);
  overflow: hidden;
  text-overflow: ellipsis;
}

.tarea-meta { font-size: var(--t-micro); color: var(--texto-4); }

.tarea-fila.vencida .tarea-titulo { color: var(--mal); }
.tarea-fila.vencida .tarea-meta { color: var(--mal); opacity: .8; }
.tarea-fila.vencida .tarea-casilla { border-color: var(--mal); }

.tarea-prioridad {
  flex: 0 0 auto;
  width: 6px;
  height: 6px;
  margin-top: 7px;
  border-radius: 50%;
  background: var(--mal);
}

.salud-numero {
  font-family: var(--fuente-mono);
  font-size: var(--t-2xl);
  color: var(--texto);
  margin-bottom: var(--e-2);
}

.salud-numero + .barra-progreso { margin-bottom: var(--e-2); }

/* ============================================================ ficha del evento */

.agenda-ficha {
  gap: var(--e-3);
  padding: var(--e-5);
}

.ficha-cabecera {
  display: flex;
  align-items: center;
  gap: var(--e-3);
}

.ficha-tipo {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-right: auto;
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: var(--espaciado-etiqueta);
  text-transform: uppercase;
  color: var(--texto-3);
}

.ficha-tipo::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--evento, var(--acento));
}

.ficha-cerrar {
  position: relative;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: var(--r-xs);
  background: transparent;
  cursor: pointer;
}

.ficha-cerrar:hover { background: var(--cristal-2); }
.ficha-cerrar:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.ficha-cerrar::before,
.ficha-cerrar::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 1px;
  background: var(--texto-2);
  transform-origin: center;
}

.ficha-cerrar::before { transform: translate(-50%, -50%) rotate(45deg); }
.ficha-cerrar::after { transform: translate(-50%, -50%) rotate(-45deg); }

.ficha-titulo {
  font-family: var(--fuente-display);
  font-size: var(--t-xl);
  font-weight: var(--peso-fuerte);
  line-height: var(--interlinea-titulo);
  color: var(--texto);
}

.agenda-ficha > .etiqueta { align-self: flex-start; }

.ficha-datos {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: var(--e-2) var(--e-3);
  margin-top: var(--e-2);
  font-size: var(--t-s);
}

.ficha-datos dt {
  color: var(--texto-4);
  text-transform: uppercase;
  font-size: var(--t-micro);
  letter-spacing: var(--espaciado-etiqueta);
  padding-top: 2px;
}

.ficha-datos dd { color: var(--texto); }

.ficha-lead {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  padding: var(--e-3);
  border: 1px solid var(--borde);
  border-radius: var(--r-s);
  background: var(--cristal-2);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
  transition: border-color var(--v-rapida) var(--curva), background var(--v-rapida) var(--curva);
}

.ficha-lead:hover { border-color: var(--acento); background: var(--acento-tenue); }
.ficha-lead:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

.ficha-lead-inicial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--cristal-3);
  color: var(--texto-2);
  font-size: var(--t-xs);
  font-weight: var(--peso-fuerte);
  letter-spacing: .04em;
}

.ficha-lead-texto {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ficha-lead-nombre {
  font-size: var(--t-m);
  font-weight: var(--peso-medio);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ficha-lead-meta { font-size: var(--t-xs); color: var(--texto-3); }

.ficha-notas {
  padding: var(--e-3);
  border-left: 2px solid var(--borde-fuerte);
  background: var(--cristal-hondo);
  border-radius: 0 var(--r-xs) var(--r-xs) 0;
  font-size: var(--t-s);
  color: var(--texto-2);
  white-space: pre-wrap;
}

.ficha-estados,
.ficha-acciones {
  display: flex;
  gap: var(--e-2);
  flex-wrap: wrap;
}

.ficha-estados { margin-top: var(--e-2); }

.ficha-acciones {
  margin-top: var(--e-2);
  padding-top: var(--e-3);
  border-top: 1px solid var(--borde);
}

.ficha-acciones .boton:last-child { margin-left: auto; }

/* ============================================================ formularios */

.agenda-formulario {
  display: flex;
  flex-direction: column;
  gap: var(--e-4);
}

.agenda-buscalead { position: relative; }

.agenda-sugerencias {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 190px;
  overflow-y: auto;
  margin-top: var(--e-1);
}

.agenda-sugerencias:empty { display: none; }

.agenda-sugerencia {
  display: flex;
  flex-direction: column;
  gap: 1px;
  width: 100%;
  padding: var(--e-2) var(--e-3);
  border: 1px solid transparent;
  border-radius: var(--r-xs);
  background: var(--cristal);
  color: var(--texto);
  text-align: left;
  cursor: pointer;
}

.agenda-sugerencia:hover { background: var(--cristal-2); border-color: var(--borde); }
.agenda-sugerencia:focus-visible { outline: 2px solid var(--acento); outline-offset: 1px; }

.agenda-sugerencia-nombre { font-size: var(--t-s); }
.agenda-sugerencia-meta { font-size: var(--t-micro); color: var(--texto-3); }

/* ============================================================ responsive */

@media (max-width: 1180px) {
  .agenda { grid-template-columns: minmax(0, 1fr); }
  .agenda-lateral { position: static; }
  .resumen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .semana { max-height: calc(100dvh - 300px); }
}

@media (max-width: 900px) {
  .agenda-periodo { order: -1; width: 100%; margin-right: 0; }
  .mes-rejilla { grid-auto-rows: minmax(88px, auto); }
}

@media (max-width: 620px) {
  .resumen { grid-template-columns: minmax(0, 1fr); }

  .agenda-barra { gap: var(--e-2); }
  .agenda-modos { width: 100%; }
  .agenda-filtros { width: 100%; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 2px; }
  .agenda-filtros::-webkit-scrollbar { height: 0; }

  /* El mes se compacta a puntos por dia */
  .mes-rejilla { grid-auto-rows: minmax(56px, auto); }
  .mes-celda { padding: var(--e-1) 2px var(--e-2); align-items: center; }
  .mes-numero { align-self: center; padding: 0 4px; font-size: var(--t-xs); }
  .mes-eventos { display: none; }
  .mes-mas { display: none; }
  .mes-puntos { display: flex; }
  .mes-celda.expandida .mes-eventos {
    display: flex;
    top: 26px;
    max-height: 180px;
  }

  .semana {
    --alto-hora: 44px;
    max-height: calc(100dvh - 320px);
  }
  .semana-cabecera { grid-template-columns: 42px repeat(7, minmax(0, 1fr)); }
  .semana-cuerpo { grid-template-columns: 42px minmax(0, 1fr); }
  .semana-dia { flex-direction: column; gap: 0; padding: var(--e-2) 0; }
  .semana-dia-numero { font-size: var(--t-m); }
  .evento-bloque .evento-lead { display: none; }

  .lista-evento,
  .lista-tarea { gap: var(--e-3); padding: var(--e-3); }
  .lista-horas { flex: 0 0 48px; }
  .ficha-datos { grid-template-columns: 84px minmax(0, 1fr); }
}

@media (max-width: 400px) {
  .agenda-periodo { font-size: var(--t-m); }
  .mes-dia-nombre { padding: var(--e-2) 4px; font-size: var(--t-micro); text-align: center; }
  .lista-dia-numero { font-size: var(--t-l); }
}

@media (prefers-reduced-motion: reduce) {
  .lista-evento:hover { transform: none; }
}