@import url("https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;800&family=Open+Sans:wght@400;600;700&display=swap");

/* ======================================================================
   Paso 19 — Rediseño visual (maqueta aprobada en docs/maqueta-diseno/maqueta.css).
   Todo el diseño sale de estas variables (se definen UNA sola vez) y de UN solo corte a 900 px.
   ====================================================================== */
:root {
  /* marca */
  --lila: #9b96c9;
  --lila-osc: #7f79b3;
  --magenta: #9e378c;
  --magenta-osc: #832d74;
  --tinta: #1e2939;
  --suave: #6a7282;
  --borde: #e3e0f0;
  --campo: #faf9fe;
  --app-fondo: #f5f3fb;
  --ok: #16a34a;
  --ok-fondo: #eafbf1;
  --peligro: #dc2626;
  --peligro-fondo: #fdecec;
  --seleccion-fondo: #fbf3fa;
  --lila-suave: #f4f2fb;
  /* formas y sombras */
  --radio-campo: 14px;
  --radio-tarjeta: 28px;
  --radio-panel: 22px;
  --sombra-tarjeta: 0 34px 70px -24px rgba(50, 30, 95, 0.55);
  --sombra-boton: 0 14px 26px -10px rgba(158, 55, 140, 0.6);
  --sombra-panel: 0 10px 30px -18px rgba(60, 40, 100, 0.3);
  /* tipografías */
  --fuente-titulo: "Montserrat", sans-serif;
  --fuente-texto: "Open Sans", sans-serif;
  /* fondo lila de las páginas públicas */
  --fondo-publico: radial-gradient(900px 620px at 10% 6%, #b7b2dc 0%, rgba(155, 150, 201, 0) 62%),
    radial-gradient(820px 700px at 96% 102%, #8780b9 0%, rgba(135, 128, 185, 0) 60%), #9b96c9;
}

* { box-sizing: border-box; }
html, body { margin: 0; }
body { font-family: var(--fuente-texto); color: var(--tinta); background: var(--lila); -webkit-font-smoothing: antialiased; }
h1, h2, h3 { font-family: var(--fuente-titulo); margin: 0; }
img, video, svg { max-width: 100%; }
.oculto { display: none !important; }
.oculto-rol { display: none !important; }
.solo-lector { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ============ PÁGINAS PÚBLICAS: fondo lila, dos columnas ============ */
.pub { min-height: 100vh; color: #fff; display: flex; flex-direction: column; background: var(--fondo-publico); }
.pub-grid {
  flex: 1; width: 100%; max-width: 1340px; margin: 0 auto; padding: 56px 64px 28px;
  display: grid; grid-template-columns: minmax(0, 1fr) 600px; gap: 80px; align-items: center;
}
.marca { display: flex; flex-direction: column; gap: 26px; }
.marca .logo { width: 300px; height: auto; display: block; margin-left: -6px; }
.marca h1 { font-size: 58px; line-height: 1.07; font-weight: 700; text-shadow: 0 2px 10px rgba(40, 20, 80, 0.18); }
.marca .lead { font-size: 21px; line-height: 1.5; color: rgba(255, 255, 255, 0.94); max-width: 520px; margin: 0; }
.marca .lead:empty { display: none; }
.aliada { display: flex; gap: 26px; align-items: flex-end; margin-top: 10px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.28); max-width: 560px; }
.aliada img { width: 210px; height: auto; display: block; flex: none; }
.aliada h2 { font-size: 25px; font-weight: 700; margin-bottom: 10px; text-shadow: 0 1px 6px rgba(40, 20, 80, 0.2); }
.aliada p { margin: 0; font-weight: 600; font-size: 17px; line-height: 1.5; color: #fff; }
.pie { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.78); padding: 14px 0 22px; margin: 0; }
.columna { min-width: 0; }

/* ============ TARJETA BLANCA ============ */
.tarjeta { background: #fff; color: var(--tinta); border-radius: var(--radio-tarjeta); padding: 44px 46px; box-shadow: var(--sombra-tarjeta); }
.tarjeta + .tarjeta { margin-top: 24px; }
.tarjeta h2 { font-size: 26px; font-weight: 700; margin-bottom: 8px; line-height: 1.2; }
.paso-titulo { font-size: 26px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; }
.intro { font-size: 16px; line-height: 1.55; color: var(--suave); margin: 0 0 22px; }
.sep { height: 1px; background: var(--borde); margin: 26px 0; }

/* ============ CAMPOS ============ */
label { display: block; font: 600 14px var(--fuente-texto); color: var(--suave); margin: 20px 0 8px; }
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], input[type="number"], input[type="email"], select, textarea {
  width: 100%; height: 58px; border: 1.5px solid var(--borde); border-radius: var(--radio-campo); padding: 0 18px;
  font: 400 18px var(--fuente-texto); background: var(--campo); color: var(--tinta);
}
select {
  appearance: none; -webkit-appearance: none; padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='10' viewBox='0 0 16 10'%3E%3Cpath d='M2 2l6 6 6-6' fill='none' stroke='%239e378c' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 18px center;
}
textarea { height: auto; min-height: 110px; padding: 14px 18px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #9aa0ad; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--magenta); box-shadow: 0 0 0 4px rgba(158, 55, 140, 0.14); background: #fff; }
input[readonly] { color: var(--suave); }

/* ============ BOTONES ============ */
.boton {
  display: block; width: 100%; padding: 19px 24px; border-radius: 999px; border: 0; cursor: pointer;
  font: 700 16px var(--fuente-titulo); letter-spacing: 0.03em; text-transform: uppercase; text-align: center; text-decoration: none;
  background: var(--magenta); color: #fff; box-shadow: var(--sombra-boton); transition: background-color 0.15s ease, transform 0.15s ease;
}
.tarjeta > .boton { margin-top: 26px; }
.tarjeta > .boton:first-child, .tarjeta > .camino-detalle + .boton { margin-top: 0; }
.tarjeta > .boton + .boton { margin-top: 14px; }
.intro + .boton { margin-top: 0; }
.boton-primario:hover, .boton-marca:hover { background: var(--magenta-osc); }
.boton-primario:disabled { background: var(--borde); color: var(--suave); box-shadow: none; cursor: not-allowed; }
.boton-secundario { background: #fff; color: var(--magenta); border: 2px solid var(--magenta); padding: 17px 24px; box-shadow: none; }
.boton-secundario:hover { background: var(--seleccion-fondo); }
.boton-texto { background: none; color: var(--magenta); text-transform: none; font: 600 15px var(--fuente-texto); letter-spacing: 0; padding: 14px; box-shadow: none; }
.boton-whatsapp { background: var(--ok-fondo); color: #14803f; text-transform: none; font: 600 15px var(--fuente-texto); letter-spacing: 0; padding: 15px; box-shadow: none; position: relative; }
.tarjeta > .camino-detalle + .boton-whatsapp { margin-top: 30px; }
.boton-whatsapp::before { content: ""; position: absolute; left: 0; right: 0; top: -16px; height: 1px; background: var(--borde); }
.boton-peligro { background: var(--peligro-fondo); color: var(--peligro); border: 1.5px solid #f3b7b7; padding: 13px 22px; box-shadow: none; font-size: 14px; }
.camino-detalle, .det { font-size: 14px; color: var(--suave); text-align: center; margin: 10px 0 26px; }
.resultado-encabezado { display: block; }
.resultado-encabezado .boton-texto { display: inline-block; width: auto; padding: 0; margin: 0 0 18px; font-weight: 600; }

/* ============ TURNERO: pasos ============ */
.paso-subtitulo { font: 700 15px var(--fuente-titulo); color: var(--tinta); margin: 22px 0 10px; }
.item-detalle { font-size: 14px; color: var(--suave); margin: 8px 0 0; line-height: 1.5; }
.item-titulo { font: 700 18px var(--fuente-titulo); color: var(--tinta); }
.item-lista { border: 1.5px solid var(--borde); border-radius: 18px; padding: 20px 22px; margin-bottom: 14px; background: #fff; }
.item-lista .item-detalle { margin-top: 4px; }
.item-lista .boton { margin-top: 14px; }
.item-clickeable { position: relative; cursor: pointer; padding-right: 54px; transition: background-color 0.15s ease, border-color 0.15s ease; }
.item-clickeable::after { content: "›"; position: absolute; right: 22px; top: 50%; transform: translateY(-52%); color: var(--magenta); font-size: 26px; line-height: 1; }
.item-clickeable:hover { border-color: var(--magenta); background: var(--seleccion-fondo); box-shadow: 0 0 0 4px rgba(158, 55, 140, 0.1); }
.item-completo { opacity: 0.6; }
.item-cancelado { background: var(--peligro-fondo); border-color: var(--peligro); }
.resultado-fallido { color: var(--peligro); }
.estado-pago-turno { background: var(--lila-suave); border-radius: var(--radio-campo); padding: 12px 16px; color: #55507a; }
.vacio { text-align: center; color: var(--suave); padding: 26px 0; font-size: 15px; margin: 0; }
.mensaje-error { color: var(--peligro); font-size: 14px; margin: 12px 0 0; }
.mensaje-global { text-align: center; padding: 12px 16px; border-radius: var(--radio-campo); font-size: 14px; margin: 18px 0 0; background: #fff; }
.mensaje-global.exito { background: var(--ok-fondo); color: var(--ok); }
.mensaje-global.error { background: var(--peligro-fondo); color: var(--peligro); }

/* bienvenida de "Es mi primera vez" (el titular grande está en la columna izquierda) */
.intro-primera .paso-titulo { display: none; }
.intro-primera p { font-size: 16px; line-height: 1.55; color: var(--suave); margin: 0 0 6px; }
.solo-nuevo { display: none; }
.modo-nuevo .solo-nuevo { display: block; }
.modo-nuevo .solo-normal, .modo-nuevo .marca .lead { display: none; }

/* calendario */
.calendario-encabezado { display: flex; justify-content: space-between; align-items: center; margin: 22px 0 10px; }
.calendario-encabezado span { font: 700 18px var(--fuente-titulo); text-transform: capitalize; }
.boton-mes { width: 38px; height: 38px; border-radius: 50%; background: var(--campo); border: 1px solid var(--borde); color: var(--magenta); font-size: 20px; line-height: 1; cursor: pointer; display: grid; place-items: center; padding: 0; }
.boton-mes:disabled { opacity: 0.4; cursor: not-allowed; }
.calendario-dias-semana, .calendario-grilla { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; text-align: center; }
.calendario-dias-semana span { font: 600 12px var(--fuente-texto); color: var(--suave); padding: 6px 0; }
.dia-calendario { height: 44px; display: grid; place-items: center; border-radius: 12px; border: 1px solid transparent; background: none; padding: 0; font: 600 15px var(--fuente-texto); color: #c1c4cc; cursor: default; }
.dia-calendario-apagado { color: #c1c4cc; }
.dia-calendario-disponible { color: var(--tinta); background: var(--campo); border-color: var(--borde); cursor: pointer; }
.dia-calendario-disponible:hover { border-color: var(--magenta); }
.dia-calendario-seleccionado { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.dia-calendario-elegido { box-shadow: inset 0 0 0 2px var(--ok); }
.dia-calendario-elegido:not(.dia-calendario-seleccionado) { background: var(--ok-fondo); }
.dia-calendario-feriado { background: var(--peligro-fondo); border-color: var(--peligro); color: var(--peligro); }
.dia-calendario-ausencia { background: var(--ok-fondo); border-color: var(--ok); }
.dia-calendario-rango { box-shadow: inset 0 0 0 2px var(--magenta); background: rgba(158, 55, 140, 0.08); }
.dia-calendario-feriado.dia-calendario-seleccionado, .dia-calendario-ausencia.dia-calendario-seleccionado { background: var(--magenta); color: #fff; }

/* horarios */
.grilla-horarios { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 8px 0 24px; }
.grilla-horarios .boton { padding: 13px 0; border-radius: 12px; border: 1.5px solid var(--borde); background: #fff; color: var(--tinta); font: 700 15px var(--fuente-titulo); letter-spacing: 0; text-transform: none; box-shadow: none; margin: 0; }
.grilla-horarios .boton:hover { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.horario-profesional { display: block; font: 400 12px var(--fuente-texto); margin-top: 2px; opacity: 0.85; }

/* confirmación */
.listo { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
.listo i { width: 46px; height: 46px; border-radius: 50%; background: var(--ok-fondo); color: var(--ok); display: grid; place-items: center; font-style: normal; font-size: 26px; font-weight: 700; flex: none; }
.listo h2 { margin: 0; }
.resumen { background: var(--campo); border: 1px solid var(--borde); border-radius: 18px; padding: 20px 24px; margin: 6px 0 22px; }
.resumen div { display: flex; justify-content: space-between; gap: 16px; padding: 7px 0; font-size: 16px; }
.resumen div span { color: var(--suave); }
.resumen div b { font-weight: 600; text-align: right; }
.qr-turno { display: block; margin: 6px auto 18px; width: 190px; height: auto; max-width: 100%; }
#paso-confirmado .boton, #paso-confirmacion .boton { margin-top: 6px; }

/* formulario de primera vez */
.form-intro { margin: 0 0 6px; }
.form-intro p { margin: 0 0 14px; }
.privacidad { background: var(--lila-suave); border-radius: var(--radio-campo); padding: 14px 18px; font-size: 14px; color: #55507a; margin: 0 0 6px; }
.progreso { height: 10px; background: #efecf8; border-radius: 99px; overflow: hidden; margin: 16px 0 8px; }
.progreso-barra { height: 100%; width: 0; background: var(--magenta); border-radius: 99px; transition: width 0.25s ease; }
.progreso-texto { font-size: 13px; color: var(--suave); margin: 0 0 6px; }
.form-parte { font: 700 20px var(--fuente-titulo); margin: 34px 0 6px; }
.pregunta { margin: 0; }
.pregunta > .pregunta-texto, .pregunta > label { display: block; font: 700 17px var(--fuente-titulo); color: var(--tinta); margin: 26px 0 12px; line-height: 1.35; }
.pregunta-ayuda { font-size: 14px; color: var(--suave); margin: -4px 0 10px; }
.pregunta-error > .pregunta-texto, .pregunta-error > label { color: var(--peligro); }
label.opcion { display: flex; align-items: center; gap: 12px; margin: 0 0 10px; padding: 15px 18px; border: 1.5px solid var(--borde); border-radius: var(--radio-campo); font: 600 16px var(--fuente-texto); color: var(--tinta); background: #fff; cursor: pointer; }
label.opcion input { width: 20px; height: 20px; flex: none; accent-color: var(--magenta); margin: 0; }
label.opcion:has(input:checked) { border-color: var(--magenta); background: var(--seleccion-fondo); color: var(--magenta); }
.escala { display: flex; flex-wrap: wrap; gap: 8px; }
.escala label { margin: 0; width: 44px; height: 44px; display: grid; place-items: center; border: 1.5px solid var(--borde); border-radius: 12px; cursor: pointer; font: 600 15px var(--fuente-texto); color: var(--tinta); background: #fff; }
.escala input { display: none; }
.escala input:checked + span { background: var(--magenta); color: #fff; border-radius: 10px; width: 100%; height: 100%; display: grid; place-items: center; }
.intro-form { background: var(--lila-suave); border-radius: var(--radio-campo); padding: 14px 18px; font-size: 14px; color: #55507a; margin: 14px 0 6px; }
details.info-agujas { border: 1.5px solid var(--borde); border-radius: var(--radio-campo); padding: 12px 16px; margin: 6px 0 10px; background: var(--campo); }
details.info-agujas summary { cursor: pointer; font-weight: 600; color: var(--magenta); }
details.info-agujas p, details.info-agujas ul { font-size: 14px; margin: 8px 0; }
#form-cargando { text-align: center; }
#form-listo-texto { margin: 0; font-size: 18px; line-height: 1.55; }

/* ============ CELULAR (un solo corte, 900 px) ============ */
@media (max-width: 900px) {
  .pub-grid { display: flex; flex-direction: column; align-items: stretch; gap: 20px; padding: 26px 16px 8px; max-width: none; }
  .marca { display: contents; }
  .marca .logo { order: 1; width: 190px; margin: 0 auto; }
  .marca h1 { order: 2; font-size: 33px; text-align: center; margin-top: 2px; }
  .marca .lead { order: 3; font-size: 17px; text-align: center; margin: 0 auto; }
  .columna { order: 4; width: 100%; }
  .marca .logo { align-self: center; }
  .tarjeta { padding: 26px 22px; border-radius: 24px; }
  .tarjeta h2, .paso-titulo { font-size: 22px; }
  .aliada { order: 5; max-width: none; gap: 16px; align-items: center; margin-top: 8px; padding-top: 22px; }
  .aliada img { width: 128px; }
  .aliada h2 { font-size: 20px; margin-bottom: 6px; }
  .aliada p { font-size: 15px; }
  .boton { font-size: 15px; padding: 17px 18px; }
  .boton-secundario { padding: 15px 18px; }
  input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="time"], select { height: 54px; font-size: 17px; }
  .item-lista { padding: 16px 16px; }
  .item-clickeable { padding-right: 46px; }
  .item-clickeable::after { right: 16px; }
  .grilla-horarios { gap: 8px; }
  .dia-calendario { height: 40px; }
  .qr-turno { width: 170px; }
  .pie { padding: 12px 16px 24px; }
}
.trampa { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.vacio a { color: var(--magenta); font-weight: 600; }
#consulta-form .boton { margin-top: 26px; }
#consulta-form + .boton-texto { margin-top: 6px; }

/* ======================================================================
   SITIO DE GESTIÓN: lo que el turnero no usa (TPA alumnos, ingreso, panel).
   ====================================================================== */
body > .mensaje-global { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 60; width: max-content; max-width: min(92vw, 560px); box-shadow: 0 14px 30px -12px rgba(40, 20, 80, 0.45); margin: 0; }
.admin-titulo { margin: 0 0 8px; }
#login-form .boton, #primera-form .boton-primario { margin-top: 26px; }
#login-form .boton-texto { margin-top: 6px; }
#login-btn-volver { margin-top: 6px; }
#primera-form h3 { font-size: 20px; margin: 22px 0 6px; }
#login-mensaje { margin: 14px 0 0; }
.item-completo, .item-cancelado { }

/* ============ PANEL DE GESTIÓN (cuando se ve #panel-admin) ============ */
body.modo-panel { background: var(--app-fondo); }
body.modo-panel #vista-publica { display: none; }
.burger { display: none; border: 0; cursor: pointer; font-family: inherit; }
.app { display: grid; grid-template-columns: 288px minmax(0, 1fr); min-height: 100vh; background: var(--app-fondo); color: var(--tinta); }
.side {
  background: linear-gradient(185deg, #a7a2d2 0%, #9b96c9 45%, #8780b9 100%); color: #fff; padding: 30px 22px;
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
}
.side .logo { width: 210px; display: block; margin: 0 auto 10px; }
.side .quien { text-align: center; font-size: 13px; color: rgba(255, 255, 255, 0.88); margin-bottom: 26px; }
.side .quien b { display: block; font: 700 15px var(--fuente-titulo); color: #fff; margin-bottom: 2px; }
.admin-nav { display: flex; flex-direction: column; gap: 5px; }
.admin-tab { display: block; width: 100%; text-align: left; padding: 13px 18px; border-radius: 14px; border: 0; background: none; color: #fff; font: 600 15px var(--fuente-titulo); cursor: pointer; }
.admin-tab:hover { background: rgba(255, 255, 255, 0.14); }
.admin-tab.activa { background: #fff; color: var(--magenta); box-shadow: 0 10px 20px -10px rgba(40, 20, 80, 0.4); }
.side .salir { margin-top: auto; padding-top: 18px; text-align: center; }
.side .salir .boton { display: block; width: 100%; margin: 0; background: none; box-shadow: none; color: #fff; text-transform: none; font: 600 14px var(--fuente-texto); letter-spacing: 0; padding: 12px; opacity: 0.92; }
.side .salir .boton:hover { opacity: 1; text-decoration: underline; }
.main { padding: 40px 52px 56px; min-width: 0; }
.top { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 28px; }
.top h1 { font-size: 32px; font-weight: 700; }

.admin-pestana { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.admin-pestana[data-seccion="turnos-dia"] { display: grid; grid-template-columns: 1fr 1fr; }
.admin-pestana[data-seccion="turnos-dia"] > .admin-seccion:nth-child(n + 3) { grid-column: 1 / -1; }
.admin-pestana.oculto { display: none !important; }
.main > .admin-seccion { margin-top: 24px; }
.admin-seccion form { display: flex; flex-direction: column; gap: 10px; }
.admin-seccion form > .boton { align-self: flex-start; }
.admin-seccion {
  background: #fff; border-radius: var(--radio-panel); padding: 28px 30px; border: 1px solid #ece9f7; box-shadow: var(--sombra-panel);
  display: flex; flex-direction: column; gap: 10px; min-width: 0;
}
.admin-seccion > * { align-self: stretch; }
.admin-seccion > .boton { align-self: flex-start; }
.admin-seccion h3 { font-size: 19px; margin: 0 0 4px; }
.admin-seccion > summary { font: 700 19px var(--fuente-titulo); cursor: pointer; list-style: none; }
.admin-seccion > summary::-webkit-details-marker { display: none; }
.admin-seccion > summary::before { content: "▸ "; color: var(--magenta); }
.admin-seccion[open] > summary::before { content: "▾ "; }
details.admin-seccion { display: block; }
details.admin-seccion > * + * { margin-top: 10px; }
.admin-subtitulo { margin: 8px 0 0; font: 700 14px var(--fuente-titulo); color: var(--suave); }
.admin-seccion label { margin: 14px 0 6px; }
.admin-seccion input[type="text"], .admin-seccion input[type="password"], .admin-seccion input[type="tel"], .admin-seccion input[type="date"], .admin-seccion input[type="time"], .admin-seccion input[type="number"], .admin-seccion select { height: 50px; font-size: 16px; }
.admin-seccion .item-detalle { margin: 0; }
.app .boton { display: inline-block; width: auto; margin-top: 12px; padding: 15px 22px; font-size: 14px; }
.app .boton-secundario { padding: 13px 22px; }
.app .boton-texto { padding: 12px 4px; }
.app .boton-peligro { padding: 12px 20px; }
.app .item-lista { border: 1px solid var(--borde); border-radius: 16px; padding: 16px 18px; margin-bottom: 12px; }
.app .item-lista .item-titulo { font-size: 16px; }
.app .item-lista .item-lista { margin-top: 8px; margin-bottom: 0; padding: 10px 14px; }
.item-suspendido { background: #f1eff8; border-style: dashed; }
.item-suspendido .item-titulo { color: var(--suave); }
.aviso-suspendida { font-weight: 700; font-size: 14px; color: var(--peligro); }
.admin-checkboxes { display: flex; flex-direction: column; gap: 6px; max-height: 220px; overflow-y: auto; border: 1.5px solid var(--borde); border-radius: var(--radio-campo); padding: 12px; }
.admin-checkbox { display: flex; align-items: center; gap: 10px; margin: 0; font: 400 15px var(--fuente-texto); color: var(--tinta); }
.admin-checkbox input[type="checkbox"], .admin-seccion input[type="checkbox"] { width: 18px; height: 18px; flex: none; accent-color: var(--magenta); }
#admin-lista-resultado { display: flex; flex-direction: column; max-height: 420px; overflow-y: auto; }
#admin-agenda-grilla { display: flex; flex-direction: column; gap: 10px; }
.admin-agenda-dia { border: 1.5px solid var(--borde); border-radius: var(--radio-campo); padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.admin-agenda-dia-titulo { display: flex; align-items: center; justify-content: space-between; font-weight: 600; }
.admin-agenda-franjas { display: flex; flex-direction: column; gap: 6px; }
.admin-agenda-franja { display: flex; align-items: center; gap: 8px; }
.admin-agenda-franja input[type="time"] { flex: 1; height: 44px; }
#admin-aus-horas { display: flex; flex-direction: column; gap: 8px; }
details.inactivos { margin-top: 12px; }
details.inactivos > summary { cursor: pointer; font-weight: 600; color: var(--suave); margin-bottom: 8px; }
.td-visor { border-radius: var(--radio-campo); overflow: hidden; background: #000; }
.td-visor video { display: block; width: 100%; max-height: 320px; object-fit: cover; }
.td-ya-realizada { color: var(--ok); font-weight: 700; }
.td-monto-efectivo { margin-bottom: 8px; }

/* Paso 21: filtro de días en Clases TPA y clases del día en "Anotar a fecha puntual" */
.filtro-dias { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.filtro-dia { border: 1.5px solid var(--borde); background: #fff; color: var(--tinta); border-radius: 999px; padding: 9px 16px; font: 600 14px var(--fuente-titulo); cursor: pointer; }
.filtro-dia.activa { background: var(--magenta); border-color: var(--magenta); color: #fff; }
.admin-opcion-clase { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; margin-bottom: 10px; }
.admin-opcion-clase input { margin-top: 4px; accent-color: var(--magenta); flex: none; }
.admin-opcion-clase:has(input:checked) { border-color: var(--magenta); background: var(--seleccion-fondo); }
#admin-puntual-calendario { margin-top: 10px; }

/* bloqueo hasta configurar el correo de envíos (solo pantalla) */
.arranque-intro { display: none; }
.bloqueado-correo .arranque-intro { display: flex; }
.bloqueado-correo .admin-nav, .bloqueado-correo #dir-cambiar-clave { display: none; }
.bloqueado-correo .admin-pestana[data-seccion="configuracion"] > .admin-seccion:not(.arranque-intro):not(.sec-correo) { display: none; }

/* ============ CELULAR (panel) ============ */
@media (max-width: 900px) {
  .app { grid-template-columns: 1fr; }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; padding: 14px 18px; background: linear-gradient(90deg, #a7a2d2, #8780b9); overflow: visible; }
  .side .logo { width: 118px; margin: 0; }
  .burger { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.22); font-size: 22px; color: #fff; }
  .side .quien, .side .admin-nav, .side .salir { display: none; }
  .side.abierto .quien { display: block; width: 100%; margin: 14px 0 8px; }
  .side.abierto .admin-nav { display: flex; width: 100%; }
  .side.abierto .salir { display: block; width: 100%; margin-top: 8px; padding-top: 8px; }
  .bloqueado-correo .side.abierto .admin-nav { display: none; }
  .main { padding: 22px 16px 40px; }
  .top h1 { font-size: 26px; }
  .admin-pestana, .admin-pestana[data-seccion="turnos-dia"] { display: flex; flex-direction: column; gap: 16px; }
  .main > .admin-seccion { margin-top: 16px; }
  .admin-seccion { padding: 22px 20px; }
  .app .boton { display: block; width: 100%; text-align: center; }
  .side .salir .boton { display: block; }
}

/* ==== PASO 23: barra de Guardar/Descartar cambios y cuadro de "Cambiar mi contraseña" del Director ==== */
.barra-cambios { position: sticky; bottom: 0; z-index: 20; display: flex; gap: 10px; justify-content: flex-end; padding: 12px 16px; background: #fff; border-top: 1px solid #ddd; box-shadow: 0 -2px 8px rgba(0,0,0,.08); }
.barra-cambios .boton { width: auto; margin: 0; }
.barra-cambios .boton:disabled { opacity: .45; cursor: not-allowed; }
.modal-clave { position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 16px; background: rgba(0,0,0,.45); }
.modal-clave.oculto { display: none; }
.modal-clave .admin-seccion { width: 100%; max-width: 420px; background: #fff; }
@media (max-width: 600px) { .barra-cambios { flex-direction: column; } .barra-cambios .boton { width: 100%; } }
/* el aviso global no tapa los botones de Guardar/Descartar: sube por encima de la barra */
body:has(#barra-cambios:not(.oculto)) > .mensaje-global { bottom: 88px; }
@media (max-width: 600px) { body:has(#barra-cambios:not(.oculto)) > .mensaje-global { bottom: 150px; } }

/* ==== PASO 24: nombre y rol en el menú, lista de personas, campos de las clases ==== */
.side .quien-usuario { display: block; margin-top: 12px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.side .quien-usuario strong { display: block; font: 700 14px var(--fuente-titulo); color: #fff; overflow-wrap: anywhere; }
.side .quien-usuario em { display: block; font-style: normal; font-size: 12px; opacity: 0.88; }
.persona-item { cursor: pointer; }
.persona-item:hover, .persona-item:focus-visible { border-color: var(--magenta); outline: none; box-shadow: 0 6px 18px -10px rgba(158, 55, 140, 0.55); }
.etiqueta-persona { font-weight: 700; color: var(--magenta); }
.clase-campos { display: grid; gap: 4px; margin: 10px 0 14px; }
#admin-clase-nueva { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--borde); }
#admin-btn-clase-nueva { margin-top: 14px; }
#admin-puntual-seccion { margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--borde); }
/* ==== FIN ==== */