/* =========================================================
   HORARIO DE ATENCIÓN
   RUTH.il

   Usa los tokens de la hoja del registro (--bg-2, --text-1,
   --accent, --border...), así que sigue el tema claro/oscuro
   sin un solo color escrito a mano.
   ========================================================= */

.horario-bloque {
  border: 1px solid var(--border, rgba(20,23,26,.12));
  border-radius: 12px;
  padding: 16px 18px;
  background: var(--bg-2, #F7F5EF);
}

.horario-rotulo {
  margin: 0 0 9px;
  font-size: .82rem;
  font-weight: 600;
  color: var(--text-2, #333);
}

/* ---------- DÍAS ---------- */
.horario-dias {
  display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px;
}
.horario-dia {
  min-width: 52px; padding: 9px 11px;
  border-radius: 9px; cursor: pointer;
  border: 1px solid var(--border-strong, rgba(20,23,26,.2));
  background: transparent;
  color: var(--text-2, #333);
  font-family: inherit; font-size: .82rem; font-weight: 600;
  transition: background .12s, color .12s, border-color .12s;
}
.horario-dia:hover { border-color: var(--accent, #C42A8E); }
.horario-dia.activo {
  background: var(--accent, #C42A8E);
  border-color: var(--accent, #C42A8E);
  color: #fff;
}

/* ---------- FRANJA HORARIA ---------- */
.horario-franja {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-bottom: 14px;
}
.horario-franja label {
  display: flex; flex-direction: column; gap: 4px;
  font-size: .75rem; color: var(--text-3, #666); font-weight: 600;
}
.horario-franja select {
  padding: 9px 11px; border-radius: 9px; min-width: 104px;
  border: 1px solid var(--border-strong, rgba(20,23,26,.2));
  background: var(--bg, #fff);
  color: var(--text-1, #14171A);
  font-family: inherit; font-size: .88rem;
}
.horario-franja select:focus { outline: none; border-color: var(--accent, #C42A8E); }
.horario-hasta {
  font-size: .78rem; color: var(--text-3, #666); padding-bottom: 11px;
}

.horario-sabado {
  padding-left: 13px;
  border-left: 2px solid var(--accent, #C42A8E);
}

/* ---------- CASILLA DEL SÁBADO ---------- */
.horario-check {
  display: flex; align-items: center; gap: 8px;
  font-size: .84rem; color: var(--text-2, #333);
  cursor: pointer; margin-bottom: 14px;
}
.horario-check input { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent, #C42A8E); }

/* ---------- VISTA PREVIA ----------
   Enseña la frase exacta que se va a guardar. La notaría ve lo que
   quedará escrito ANTES de enviarlo, no después. */
.horario-vista {
  margin: 0; padding: 10px 12px; border-radius: 9px;
  font-size: .82rem; line-height: 1.45;
}
.horario-vista.bien {
  background: rgba(30,123,69,.10);
  color: var(--ok, #1E7B45);
  border: 1px solid rgba(30,123,69,.28);
}
.horario-vista.mal {
  background: rgba(194,43,43,.10);
  color: var(--danger, #C22B2B);
  border: 1px solid rgba(194,43,43,.28);
}

@media (max-width: 560px) {
  .horario-franja { gap: 8px; }
  .horario-franja select { min-width: 92px; }
  .horario-hasta { display: none; }
}

/* =========================================================
   BLINDAJE CONTRA LOS ESTILOS DE LA PÁGINA QUE LO ALOJA
   ---------------------------------------------------------
   El formulario de registro usa etiquetas flotantes: tiene una
   regla   .field label { position:absolute; pointer-events:none }
   para que el rótulo "flote" sobre el campo.

   Ese selector alcanza también a las etiquetas DE ESTE
   componente, porque van dentro de un .field. El resultado era
   que la casilla de los sábados quedaba colocada en absoluto
   encima de los botones de los días y, además, sin poder
   pulsarse: pointer-events:none. Es decir, el componente se veía
   pero no se podía usar.

   Y no se arregla solo con el orden de las hojas: `.field label`
   tiene más peso que `.horario-check`. Hace falta igualarlo, que
   es lo que hacen estos selectores.

   Si mañana este componente se usa en otra pantalla con otras
   manías, este bloque es el sitio donde neutralizarlas.
   ========================================================= */

.horario-bloque label,
.field .horario-bloque label,
.horario-bloque .horario-check,
.field .horario-bloque .horario-check {
  position: static;
  pointer-events: auto;
  top: auto; left: auto;
  transform: none;
  transition: none;
  letter-spacing: normal;
  font-size: inherit;
  color: inherit;
}

.horario-bloque input[type="checkbox"] {
  pointer-events: auto;
  position: static;
  width: 16px; height: 16px;
  opacity: 1;
}

/* La etiqueta "Horario de atención" del formulario sí tiene que
   comportarse como rótulo fijo, no como etiqueta flotante: no hay
   un campo de texto debajo sobre el que flotar. */
.field-horario .etiqueta-fija {
  position: static;
  display: block;
  margin-bottom: 9px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text-2, #333);
  pointer-events: auto;
}