/* Agenda del centro — interfaz de secretaría */

:root {
  --fondo: #f5f7f6;
  --superficie: #ffffff;
  --tinta: #1a2b2c;
  --tinta-suave: #5b6d6c;
  --linea: #dde4e2;
  --linea-hora: #eef2f1;
  --acento: #1f7a8c;
  --acento-tinta: #ffffff;

  --libre: #d9771f;
  --libre-fondo: #fdf1e4;
  --bloqueo: #b9473a;
  --bloqueo-fondo: #f4e9e7;
  --ahora: #c2412f;

  --lic-1: #1f7a8c;
  --lic-2: #7a5ba6;
  --lic-3: #4d8b57;
  --lic-4: #4559a6;

  --hora: 52px;
  --radio: 6px;
  --fuente: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root {
    --fondo: #0f1817;
    --superficie: #152120;
    --tinta: #e1ebe9;
    --tinta-suave: #93a5a3;
    --linea: #263532;
    --linea-hora: #1b2826;
    --acento: #4fb3c6;
    --acento-tinta: #0f1817;
    --libre: #f0a050;
    --libre-fondo: #3a2814;
    --bloqueo: #e07a6d;
    --bloqueo-fondo: #2c1d1b;
    --ahora: #ff7a66;
    --lic-1: #4fb3c6;
    --lic-2: #a98ad6;
    --lic-3: #7cbf86;
    --lic-4: #8197e0;
  }
}

* { box-sizing: border-box; }

html, body { margin: 0; }

body {
  font: 15px/1.45 var(--fuente);
  color: var(--tinta);
  background: var(--fondo);
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing: antialiased;
}

button { font: inherit; color: inherit; }

:focus-visible { outline: 2px solid var(--acento); outline-offset: 2px; }

/* ---------- Botones ---------- */

.boton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 36px;
  padding: 0 14px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  color: var(--tinta);
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
}
.boton:hover { border-color: var(--tinta-suave); }
.boton:disabled { opacity: .5; cursor: not-allowed; }
.boton-icono { width: 36px; padding: 0; font-size: 20px; line-height: 1; }
.boton-principal { background: var(--acento); border-color: var(--acento); color: var(--acento-tinta); }
.boton-principal:hover { filter: brightness(1.08); border-color: var(--acento); }
.boton-suave { background: transparent; border-color: transparent; color: var(--tinta-suave); }

/* ---------- Ingreso ---------- */

.pagina-ingreso { min-height: 100vh; display: grid; place-items: center; padding: 16px; }
.ingreso { max-width: 380px; }
.ingreso h1 { font-size: 32px; line-height: 1.1; letter-spacing: -.02em; margin: 0 0 12px; }
.ingreso p { color: var(--tinta-suave); margin: 0 0 24px; }
.ingreso .boton-principal { min-height: 44px; padding: 0 20px; }
.ingreso .ingreso-nota { font-size: 13px; margin: 16px 0 0; }

/* ---------- Barra superior ---------- */

.barra {
  display: flex;
  align-items: center;
  gap: 16px 24px;
  flex-wrap: wrap;
  padding: 14px 20px;
  background: var(--superficie);
  border-bottom: 1px solid var(--linea);
}
.marca { font-size: 17px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.semana-nav { display: flex; align-items: center; gap: 6px; flex: 1; min-width: 0; }
.rango { font-size: 17px; font-weight: 600; margin: 0 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.usuario { display: flex; align-items: center; gap: 10px; }
.usuario-nombre { display: flex; flex-direction: column; font-weight: 500; line-height: 1.2; text-align: right; }
.usuario-nombre small { color: var(--tinta-suave); font-weight: 400; font-size: 12px; }
.usuario form { margin: 0; }

/* ---------- Filtros por licenciada ---------- */

.filtros { display: flex; gap: 8px; flex-wrap: wrap; padding: 14px 20px 6px; }

.filtro {
  display: grid;
  grid-template-columns: 12px auto;
  column-gap: 10px;
  align-items: center;
  padding: 8px 14px 8px 12px;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: var(--superficie);
  text-align: left;
  cursor: pointer;
}
.filtro-punto { width: 12px; height: 12px; border-radius: 50%; background: var(--lic); grid-row: span 2; }
.filtro-nombre { font-weight: 600; }
.filtro-cifras { font-size: 13px; color: var(--tinta-suave); }
.filtro-cifras strong { color: var(--libre); font-weight: 600; }
.filtro[aria-pressed='false'] { opacity: .55; }
.filtro[aria-pressed='false'] .filtro-punto { background: transparent; box-shadow: inset 0 0 0 2px var(--lic); }

/* ---------- Avisos ---------- */

#avisos:empty { display: none; }
#avisos { padding: 6px 20px 0; display: grid; gap: 8px; }
.aviso {
  padding: 10px 14px;
  border-radius: var(--radio);
  background: var(--bloqueo-fondo);
  border-left: 3px solid var(--bloqueo);
}
.aviso strong { display: block; }
.aviso small { color: var(--tinta-suave); word-break: break-word; }

/* ---------- Grilla semanal ---------- */

.agenda { padding: 10px 20px 20px; }
.cargando, .vacio { color: var(--tinta-suave); padding: 40px 0; text-align: center; }

.grilla {
  display: grid;
  grid-template-columns: 56px repeat(var(--dias), minmax(0, 1fr));
  background: var(--superficie);
  border: 1px solid var(--linea);
  border-radius: 8px;
  overflow: clip; /* clip (no hidden) para que los encabezados queden fijos al hacer scroll */
}

.cab-dia {
  position: sticky;
  top: 0;
  z-index: 3;
  padding: 10px 8px 0;
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  border-bottom: 1px solid var(--linea);
}
.cab-dia-nombre { font-size: 13px; color: var(--tinta-suave); }
.cab-dia-num { font-size: 22px; font-weight: 600; line-height: 1.1; }
.cab-dia.es-hoy .cab-dia-num {
  display: inline-grid; place-items: center;
  min-width: 34px; height: 34px; padding: 0 6px;
  border-radius: 17px; background: var(--acento); color: var(--acento-tinta);
}
.cab-carriles { display: flex; gap: 2px; margin-top: 8px; }
.cab-carriles span { flex: 1; height: 3px; border-radius: 2px 2px 0 0; background: var(--lic); }

.esquina { border-bottom: 1px solid var(--linea); background: var(--superficie); position: sticky; top: 0; z-index: 3; }

.fila-todo-dia { display: contents; }
.todo-dia-rotulo, .todo-dia-celda {
  border-bottom: 1px solid var(--linea);
  min-height: 8px;
}
.todo-dia-rotulo { font-size: 11px; color: var(--tinta-suave); padding: 4px 6px; text-align: right; }
.todo-dia-celda { border-left: 1px solid var(--linea); padding: 4px; display: grid; gap: 3px; align-content: start; }

.horas { position: relative; }
.hora-rotulo {
  position: absolute; right: 8px;
  transform: translateY(-50%);
  font-size: 12px; color: var(--tinta-suave);
}

.columna-dia { position: relative; border-left: 1px solid var(--linea); display: flex; gap: 2px; padding: 0 2px; }
.columna-dia.es-hoy { background: color-mix(in srgb, var(--acento) 4%, transparent); }
.linea-hora { position: absolute; left: 0; right: 0; height: 1px; background: var(--linea-hora); pointer-events: none; }
.carril { position: relative; flex: 1; min-width: 0; }

.ahora { position: absolute; left: 0; right: 0; height: 2px; background: var(--ahora); z-index: 2; pointer-events: none; }
.ahora::before {
  content: ''; position: absolute; left: -4px; top: -3px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--ahora);
}

/* ---------- Eventos ---------- */

.evento {
  position: absolute;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  overflow: hidden;
  padding: 3px 6px;
  border: 0;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.3;
  text-align: left;
  cursor: pointer;
}
.evento:hover { z-index: 1; filter: brightness(.97); }
.evento-titulo {
  font-weight: 600;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow-wrap: anywhere;
}
.evento-titulo { flex-shrink: 0; }
.evento-hora { opacity: .85; min-height: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* En eventos angostos (turnos superpuestos) el nombre tiene prioridad sobre el horario. */
.evento { container-type: inline-size; }
@container (max-width: 80px) { .evento-hora { display: none; } }
.evento.compacto .evento-titulo { -webkit-line-clamp: 1; }

/* Turno: sólido y sobrio, con el color de la licenciada a la izquierda. */
.evento-turno {
  background: color-mix(in srgb, var(--lic) 14%, var(--superficie));
  color: var(--tinta);
  border-left: 3px solid var(--lic);
}

/* Libre: el elemento protagonista. Donde la secretaría puede agendar. */
.evento-disponible {
  background: var(--libre-fondo);
  color: var(--tinta);
  box-shadow: inset 0 0 0 1.5px var(--libre);
}
.evento-disponible .evento-titulo { color: var(--libre); }

/* Bloqueo: presente pero en segundo plano. */
.evento-bloqueo {
  background: repeating-linear-gradient(135deg, var(--bloqueo-fondo) 0 6px, transparent 6px 11px), var(--superficie);
  color: var(--tinta-suave);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bloqueo) 35%, transparent);
}
.evento-bloqueo .evento-titulo { font-weight: 500; }

.evento.compacto { padding-top: 1px; padding-bottom: 1px; }
.evento.compacto .evento-hora { display: none; }

.evento-dia {
  position: static;
  padding: 2px 6px;
  font-size: 12px;
  border-left: 3px solid var(--lic);
}

/* Dos turnos de la misma licenciada al mismo tiempo: hay que revisarlo. */
.evento-turno.superpuesto { box-shadow: inset 0 0 0 1.5px var(--bloqueo); }
.evento-turno.superpuesto .evento-titulo::before { content: '⚠ '; color: var(--bloqueo); }
.detalle-aviso { margin: 0 0 20px; font-size: 14px; }

.evento[aria-pressed='true'] { outline: 2px solid var(--tinta); outline-offset: 1px; z-index: 2; }

/* ---------- Pie y leyenda ---------- */

.pie {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px 20px;
  padding: 0 20px 24px; font-size: 13px; color: var(--tinta-suave);
}
.leyenda { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.leyenda li { display: flex; align-items: center; gap: 8px; }
.muestra { width: 18px; height: 12px; border-radius: 3px; }
.muestra-libre { background: var(--libre-fondo); box-shadow: inset 0 0 0 1.5px var(--libre); }
.muestra-turno { background: color-mix(in srgb, var(--lic-1) 14%, var(--superficie)); border-left: 3px solid var(--lic-1); }
.muestra-bloqueo { background: repeating-linear-gradient(135deg, var(--bloqueo-fondo) 0 3px, var(--superficie) 3px 6px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bloqueo) 35%, transparent); }

/* ---------- Panel de detalle ---------- */

.detalle {
  position: fixed; top: 0; right: 0; bottom: 0; z-index: 10;
  width: min(380px, 100%);
  padding: 22px 24px;
  background: var(--superficie);
  border-left: 1px solid var(--linea);
  box-shadow: -12px 0 32px rgba(15, 30, 30, .12);
  overflow-y: auto;
  animation: entrar-detalle .18s ease-out;
}
@keyframes entrar-detalle { from { transform: translateX(24px); opacity: 0; } }

.detalle-cerrar { position: absolute; top: 14px; right: 14px; }
.detalle-tipo {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 600; margin: 0 0 10px;
}
.detalle-tipo::before { content: ''; width: 10px; height: 10px; border-radius: 2px; }
.detalle-tipo.tipo-turno::before { background: var(--lic); }
.detalle-tipo.tipo-disponible { color: var(--libre); }
.detalle-tipo.tipo-disponible::before { background: var(--libre); }
.detalle-tipo.tipo-bloqueo { color: var(--bloqueo); }
.detalle-tipo.tipo-bloqueo::before { background: var(--bloqueo); }

.detalle h2 { font-size: 22px; line-height: 1.2; letter-spacing: -.01em; margin: 0 40px 6px 0; overflow-wrap: anywhere; }
.detalle-cuando { margin: 0 0 20px; color: var(--tinta-suave); }

.detalle dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 16px; margin: 0 0 24px; font-size: 14px; }
.detalle dt { color: var(--tinta-suave); }
.detalle dd { margin: 0; overflow-wrap: anywhere; }

.detalle-acciones { display: grid; gap: 8px; }
.detalle-acciones p { font-size: 13px; color: var(--tinta-suave); margin: 0; }

/* ---------- Selector de día (celular) ---------- */

.dias-movil { display: none; }

@media (max-width: 760px) {
  .barra { padding: 12px 16px; }
  .marca { display: none; }
  .semana-nav { order: 1; flex-basis: 100%; }
  .rango { font-size: 16px; }
  .usuario { margin-left: auto; }
  .usuario-nombre { display: none; }
  .filtros, .agenda, .pie { padding-left: 16px; padding-right: 16px; }
  .filtros { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; }
  .filtro { flex: none; padding: 6px 12px 6px 10px; }
  .filtro-cifras { font-size: 12px; }
  #avisos { padding-left: 16px; padding-right: 16px; }

  .dias-movil { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; padding: 6px 16px 0; }
  .dia-movil {
    display: grid; justify-items: center; gap: 2px;
    padding: 6px 0; border: 1px solid transparent; border-radius: var(--radio);
    background: transparent; cursor: pointer;
  }
  .dia-movil small { font-size: 11px; color: var(--tinta-suave); }
  .dia-movil span { font-size: 16px; font-weight: 600; }
  .dia-movil[aria-selected='true'] { background: var(--superficie); border-color: var(--linea); }
  .dia-movil.es-hoy span { color: var(--acento); }

  .grilla { grid-template-columns: 48px minmax(0, 1fr); }
  .detalle { top: auto; width: 100%; max-height: 75vh; border-left: 0; border-top: 1px solid var(--linea); border-radius: 12px 12px 0 0; }
  @keyframes entrar-detalle { from { transform: translateY(24px); opacity: 0; } }
}

@media (prefers-reduced-motion: reduce) {
  .detalle { animation: none; }
}

/* ---------- En vivo ---------- */

.estado-pie { display: inline-flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.vivo { display: inline-flex; align-items: center; gap: 6px; }
.vivo::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: var(--tinta-suave); }
.vivo.conectado { color: var(--tinta); }
.vivo.conectado::before { background: #2f9e5b; box-shadow: 0 0 0 3px color-mix(in srgb, #2f9e5b 20%, transparent); }

.novedad {
  position: fixed; left: 50%; bottom: 24px; z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100% - 32px);
  padding: 10px 16px;
  border-radius: var(--radio);
  background: var(--tinta); color: var(--fondo);
  font-size: 14px; font-weight: 500;
  box-shadow: 0 8px 24px rgba(15, 30, 30, .2);
  animation: aparecer-novedad .2s ease-out;
}
@keyframes aparecer-novedad { from { opacity: 0; transform: translate(-50%, 8px); } }

/* Licenciada cuya agenda acaba de cambiar */
.filtro.recien-cambiado { border-color: var(--lic); box-shadow: 0 0 0 2px color-mix(in srgb, var(--lic) 30%, transparent); }

@media (prefers-reduced-motion: reduce) { .novedad { animation: none; } }