/* =========================================================
   FECHA & HORA — Look tipo Notarioexpress (sin cambiar HTML)
   ========================================================= */

:root{
  --umres-card-bg: #ffffff;
  --umres-soft-bg: #eef2f7;
  --umres-stroke: #d7dce7;
  --umres-text: #0f172a;
  --umres-muted: #64748b;

  --umres-success-bg: #22c55e;
  --umres-success-bg-weak: rgba(34,197,94,.12);

  --umres-warning-bg: #facc15;
  --umres-warning-bg-weak: rgba(250,204,21,.14);

  --umres-danger-bg: #f43f5e;
  --umres-danger-bg-weak: rgba(244,63,94,.14);

  --umres-primary: #2f56ff; /* fallback si no usas variables del diseño */
}

/* ----- Título y ayuda del panel (más “limpio”) ----- */
.umres-booking-shell .umres-step-panel[data-step="2"] .umres-panel-title,
#umres-booking .umres-step-panel[data-step="2"] .umres-panel-title{
  margin-bottom: 6px;
}
.umres-booking-shell .umres-step-panel[data-step="2"] .umres-panel-help,
#umres-booking .umres-step-panel[data-step="2"] .umres-panel-help{
  color: var(--umres-muted);
  margin-bottom: 16px;
}

/* ----- Fecha (input date) centrado y más “UI”) ----- */
.umres-booking-shell .umres-date-row,
#umres-booking .umres-date-row{
  display:flex;
  align-items:center;
  gap: 12px;
  justify-content:center;
  margin: 8px auto 14px;
  padding: 10px 12px;
  max-width: 980px;
  border-radius: 16px;
  background: transparent;
}

.umres-booking-shell .umres-date-row .umres-field-label,
#umres-booking .umres-date-row .umres-field-label{
  font-weight: 800;
  color: var(--umres-text);
}

.umres-booking-shell .umres-input.umres-input-date,
#umres-booking .umres-input.umres-input-date{
  width: min(320px, 100%);
  padding: 10px 12px;
  border: 1px solid var(--umres-stroke);
  background: #fff;
  border-radius: 12px;
  font-weight: 800;
  color: var(--umres-text);
  box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
.umres-booking-shell .umres-input.umres-input-date:focus,
#umres-booking .umres-input.umres-input-date:focus{
  outline: none;
  border-color: rgba(47,86,255,.45);
  box-shadow: 0 0 0 4px rgba(47,86,255,.12), 0 12px 26px rgba(15,23,42,.08);
}

/* ----- Contenedor horarios (card grande) ----- */
.umres-booking-shell .umres-times-wrapper,
.umres-booking-widget .umres-times-wrapper,
#umres-booking .umres-times-wrapper{
  max-width: 980px;
  margin: 10px auto 0;
  background: var(--umres-card-bg);
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 18px;
  padding: 18px 18px 18px;
  box-shadow: 0 20px 50px rgba(15,23,42,.08);
}

/* Header: título + leyenda (como “¿Qué significan los colores?”) */
.umres-booking-shell .umres-times-header,
.umres-booking-widget .umres-times-header,
#umres-booking .umres-times-header{
  display:flex;
  align-items:flex-end;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-weight: 900;
  color: var(--umres-text);
}

.umres-booking-shell .umres-times-header > span:first-child,
.umres-booking-widget .umres-times-header > span:first-child,
#umres-booking .umres-times-header > span:first-child{
  font-size: 14px;
}

/* Leyenda (puntos) */
.umres-booking-shell .umres-times-legend,
.umres-booking-widget .umres-times-legend,
#umres-booking .umres-times-legend{
  font-weight: 800;
  color: var(--umres-muted);
  font-size: 12px;
  display: inline-flex;
  gap: 10px;
  align-items:center;
  background: rgba(15,23,42,.03);
  border: 1px solid rgba(15,23,42,.06);
  padding: 8px 10px;
  border-radius: 14px;
}

.umres-booking-shell .umres-dot,
.umres-booking-widget .umres-dot,
#umres-booking .umres-dot{
  width: 10px;
  height: 10px;
  border-radius: 999px;
  display:inline-block;
  margin-right: 6px;
  box-shadow: 0 6px 14px rgba(15,23,42,.12);
}
.umres-booking-shell .umres-dot-free,
.umres-booking-widget .umres-dot-free,
#umres-booking .umres-dot-free{ background: var(--umres-success-bg); }

.umres-booking-shell .umres-dot-taken,
.umres-booking-widget .umres-dot-taken,
#umres-booking .umres-dot-taken{ background: #cbd5e1; }

/* ----- Grilla horarios (botones tipo “píldora”) ----- */
.umres-booking-shell .umres-times-grid,
.umres-booking-widget .umres-times-grid,
#umres-booking .umres-times-grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}

/* Base: cada slot */
.umres-booking-shell .umres-times-grid > *,
.umres-booking-widget .umres-times-grid > *,
#umres-booking .umres-times-grid > *{
  border: 1px solid rgba(15,23,42,.08);
  background: #fff;
  border-radius: 12px;
  padding: 10px 10px;
  font-weight: 900;
  font-size: 13px;
  text-align:center;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease, background .12s ease, opacity .12s ease;
  box-shadow: 0 10px 22px rgba(15,23,42,.06);
}

/* Disponible (si tu JS agrega class/atributo, esto lo “pinta” verde)
   - soporta: .is-available / .umres-available / [data-status="available"] */
.umres-booking-shell .umres-times-grid > *.is-available,
.umres-booking-shell .umres-times-grid > *.umres-available,
.umres-booking-shell .umres-times-grid > *[data-status="available"],
.umres-booking-widget .umres-times-grid > *.is-available,
.umres-booking-widget .umres-times-grid > *.umres-available,
.umres-booking-widget .umres-times-grid > *[data-status="available"],
#umres-booking .umres-times-grid > *.is-available,
#umres-booking .umres-times-grid > *.umres-available,
#umres-booking .umres-times-grid > *[data-status="available"]{
  background: var(--umres-success-bg);
  border-color: rgba(34,197,94,.30);
  color: #083018;
}

/* Hover */
.umres-booking-shell .umres-times-grid > *:hover,
.umres-booking-widget .umres-times-grid > *:hover,
#umres-booking .umres-times-grid > *:hover{
  transform: translateY(-1px);
  box-shadow: 0 18px 34px rgba(15,23,42,.12);
  border-color: rgba(47,86,255,.22);
}

/* Disabled / booked / blocked */
.umres-booking-shell .umres-times-grid > *.is-disabled,
.umres-booking-shell .umres-times-grid > *.umres-disabled,
.umres-booking-shell .umres-times-grid > *[data-status="booked"],
.umres-booking-shell .umres-times-grid > *[data-status="blocked"],
.umres-booking-widget .umres-times-grid > *.is-disabled,
.umres-booking-widget .umres-times-grid > *.umres-disabled,
.umres-booking-widget .umres-times-grid > *[data-status="booked"],
.umres-booking-widget .umres-times-grid > *[data-status="blocked"],
#umres-booking .umres-times-grid > *.is-disabled,
#umres-booking .umres-times-grid > *.umres-disabled,
#umres-booking .umres-times-grid > *[data-status="booked"],
#umres-booking .umres-times-grid > *[data-status="blocked"]{
  opacity: .55;
  cursor: not-allowed;
  background: #f1f5f9;
  color: #64748b;
  box-shadow: none;
}

/* Selected */
.umres-booking-shell .umres-times-grid > *.is-selected,
.umres-booking-shell .umres-times-grid > *.umres-selected,
.umres-booking-widget .umres-times-grid > *.is-selected,
.umres-booking-widget .umres-times-grid > *.umres-selected,
#umres-booking .umres-times-grid > *.is-selected,
#umres-booking .umres-times-grid > *.umres-selected{
  outline: 3px solid rgba(47,86,255,.20);
  border-color: rgba(47,86,255,.55);
  box-shadow: 0 18px 34px rgba(15,23,42,.14);
}

/* Mensaje “no hay horarios” */
.umres-booking-shell .umres-times-empty,
.umres-booking-widget .umres-times-empty,
#umres-booking .umres-times-empty{
  margin: 12px 2px 0;
  color: var(--umres-muted);
  font-weight: 700;
  font-size: 13px;
}

/* Responsive */
@media (max-width: 900px){
  .umres-booking-shell .umres-times-grid,
  .umres-booking-widget .umres-times-grid,
  #umres-booking .umres-times-grid{
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}
/* ==========================================================
   Separación visual de horarios por bloques (Mañana / Tarde)
   ========================================================== */
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group{
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(15, 23, 42, 0.08);
}

.umres-booking-shell .umres-times-group:first-child,
.umres-booking-widget .umres-times-group:first-child{
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.umres-times-group-head{
  display:flex;
  align-items:center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.umres-times-group-title{
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(15, 23, 42, 0.75);
  text-transform: uppercase;
}

.umres-times-groups{
  display:block;
}

.umres-times-group .umres-times-grid{
  margin-top: 0;
}
/* Contenido interno del botón de horario */
.umres-booking-shell .umres-time-pill,
.umres-booking-widget .umres-time-pill,
#umres-booking .umres-time-pill{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap: 2px;
}

/* Hora arriba */
.umres-booking-shell .umres-time-pill > span:first-child,
.umres-booking-widget .umres-time-pill > span:first-child,
#umres-booking .umres-time-pill > span:first-child{
  font-weight: 900;
  line-height: 1.15;
}

/* Funcionario abajo */
.umres-booking-shell .umres-time-staff,
.umres-booking-widget .umres-time-staff,
#umres-booking .umres-time-staff{
  font-size: 12px;
  font-weight: 800;
  opacity: .85;
  line-height: 1.1;
  white-space: nowrap;
}
.umres-time-pill-occupied {
  opacity: .55;
  cursor: not-allowed;
}
/* ==========================================================
   LOOK "2da imagen": 2 tarjetas (Mañana / Tarde) lado a lado
   + slots rectangulares uniformes
   (Pegar al FINAL de fecha.css)
   ========================================================== */

/* Contenedor general de grupos */
.umres-booking-shell .umres-times-groups,
.umres-booking-widget .umres-times-groups,
#umres-booking .umres-times-groups{
  display: flex;
  gap: 22px;
  align-items: stretch;
}

/* Cada grupo como tarjeta grande */
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group,
#umres-booking .umres-times-group{
  flex: 1 1 0;
  margin: 0;                 /* quita el margin-top anterior */
  padding: 18px 18px 16px;   /* padding tipo caja */
  border: 1px solid rgba(15,23,42,.08);
  border-radius: 16px;
  background: #f1f5f9;       /* fondo suave */
  box-shadow: none;          /* limpio, como ejemplo */
}

/* Quita la "separación por línea" anterior */
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group{
  border-top: 1px solid rgba(15,23,42,.08) !important;
}
.umres-booking-shell .umres-times-group:first-child,
.umres-booking-widget .umres-times-group:first-child{
  border-top: 1px solid rgba(15,23,42,.08) !important;
}

/* Encabezado (MAÑANA / TARDE) */
.umres-times-group-head{
  margin: 0 0 14px;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
}

/* Título tipo "Horarios en la mañana/tarde" */
.umres-times-group-title{
  font-weight: 800;
  font-size: 13px;
  letter-spacing: .02em;
  color: rgba(15,23,42,.75);
  text-transform: uppercase;
}

/* Grilla interna: más parecida al ejemplo (botones compactos) */
.umres-booking-shell .umres-times-group .umres-times-grid,
.umres-booking-widget .umres-times-group .umres-times-grid,
#umres-booking .umres-times-group .umres-times-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Botones/slots: estilo rectangular uniforme como la 2da imagen */
.umres-booking-shell .umres-time-pill,
.umres-booking-widget .umres-time-pill,
#umres-booking .umres-time-pill{
  width: 72px;               /* tamaño uniforme */
  min-height: 34px;
  padding: 6px 8px;
  border-radius: 8px;        /* menos “píldora”, más rectángulo */
  border: 1px solid rgba(15,23,42,.10);
  background: #22c55e;       /* verde */
  color: #052e16;
  box-shadow: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0;
}

/* Solo la hora visible como en la 2da imagen (ocultar funcionario) */
.umres-booking-shell .umres-time-staff,
.umres-booking-widget .umres-time-staff,
#umres-booking .umres-time-staff{
  display: none;
}

/* Texto de hora más “limpio” */
.umres-booking-shell .umres-time-pill > span:first-child,
.umres-booking-widget .umres-time-pill > span:first-child,
#umres-booking .umres-time-pill > span:first-child{
  font-weight: 800;
  font-size: 12px;
  line-height: 1;
}

/* Hover sutil (sin levantar tanto) */
.umres-booking-shell .umres-time-pill:hover,
.umres-booking-widget .umres-time-pill:hover,
#umres-booking .umres-time-pill:hover{
  transform: none;
  filter: brightness(0.97);
  border-color: rgba(15,23,42,.18);
}

/* Ocupado / deshabilitado */
.umres-booking-shell .umres-time-pill:disabled,
.umres-booking-widget .umres-time-pill:disabled,
#umres-booking .umres-time-pill:disabled{
  background: #e2e8f0;
  color: rgba(15,23,42,.45);
  border-color: rgba(15,23,42,.08);
  cursor: not-allowed;
  opacity: 1; /* evita que se vea “lavado” doble */
}

/* Seleccionado: borde azul fino como UI */
.umres-booking-shell .umres-time-pill-selected,
.umres-booking-widget .umres-time-pill-selected,
#umres-booking .umres-time-pill-selected{
  outline: none;
  border-color: rgba(47,86,255,.85);
  box-shadow: 0 0 0 3px rgba(47,86,255,.18);
}

/* Responsive: en móvil apila Mañana/Tarde */
@media (max-width: 900px){
  .umres-booking-shell .umres-times-groups,
  .umres-booking-widget .umres-times-groups,
  #umres-booking .umres-times-groups{
    flex-direction: column;
  }
}
/* Contenedor MAÑANA / TARDE alineados a extremos */
.umres-booking-shell .umres-times-groups,
.umres-booking-widget .umres-times-groups,
#umres-booking .umres-times-groups{
  display: flex;
  justify-content: space-between; /* 🔑 izquierda / derecha */
  align-items: stretch;
  gap: 24px;
  width: 100%;
}
/* Tarjetas Mañana / Tarde más anchas */
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group,
#umres-booking .umres-times-group{
  flex: 0 0 48%;        /* 🔑 casi mitad y bien abiertas */
  min-height: 170px;   /* altura similar a ejemplo */
  padding: 20px 22px;
  background: #f1f5f9;
  border-radius: 18px;
}
.umres-booking-shell .umres-times-group .umres-times-grid,
.umres-booking-widget .umres-times-group .umres-times-grid{
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  align-content: flex-start;
}
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group{
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}
@media (max-width: 900px){
  .umres-booking-shell .umres-times-groups,
  .umres-booking-widget .umres-times-groups{
    flex-direction: column;
  }

  .umres-booking-shell .umres-times-group,
  .umres-booking-widget .umres-times-group{
    flex: 1 1 auto;
    width: 100%;
  }
}
/* ==========================================================
   FIX: MAÑANA a la izquierda / TARDE al extremo derecho,
   usando TODO el ancho del bloque de horarios
   ========================================================== */

/* 1) El contenedor que realmente envuelve Mañana/Tarde debe ocupar 100% */
.umres-booking-shell [data-umres-times],
.umres-booking-widget [data-umres-times],
#umres-booking [data-umres-times]{
  width: 100%;
}

/* 2) Asegurar que "umres-times-groups" (si existe) sea el layout principal */
.umres-booking-shell .umres-times-groups,
.umres-booking-widget .umres-times-groups,
#umres-booking .umres-times-groups{
  display: flex !important;
  justify-content: space-between !important; /* extremos */
  align-items: stretch !important;
  gap: 16px !important;                      /* separación pequeña */
  width: 100% !important;
}

/* 3) Si no existe .umres-times-groups y los .umres-times-group cuelgan directo,
      igual lo resolvemos aplicando flex al padre directo */
.umres-booking-shell [data-umres-times] > .umres-times-group,
.umres-booking-widget [data-umres-times] > .umres-times-group,
#umres-booking [data-umres-times] > .umres-times-group{
  /* nada acá, solo para asegurar selector */
}
.umres-booking-shell [data-umres-times],
.umres-booking-widget [data-umres-times],
#umres-booking [data-umres-times]{
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  gap: 16px;
}

/* 4) Tarjetas: se estiran casi hasta encontrarse */
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group,
#umres-booking .umres-times-group{
  flex: 1 1 0 !important;   /* se reparten el ancho */
  min-width: 0 !important;  /* evita overflow raro */
  margin: 0 !important;
  padding: 20px 22px !important;
  min-height: 190px;
}

/* 5) Empuja TARDE totalmente a la derecha (aunque el padre no esté perfecto) */
.umres-booking-shell .umres-times-group[data-umres-time-group="afternoon"],
.umres-booking-widget .umres-times-group[data-umres-time-group="afternoon"],
#umres-booking .umres-times-group[data-umres-time-group="afternoon"]{
  margin-left: auto !important;
}

/* 6) (Opcional) Que el fondo/caja se vea más “alargado” */
.umres-booking-shell .umres-times-group,
.umres-booking-widget .umres-times-group,
#umres-booking .umres-times-group{
  border-radius: 18px;
  background: #f1f5f9;
  border: 1px solid rgba(15,23,42,.08);
}

/* 7) Responsive: apilar en móvil */
@media (max-width: 900px){
  .umres-booking-shell [data-umres-times],
  .umres-booking-widget [data-umres-times],
  #umres-booking [data-umres-times]{
    flex-direction: column !important;
  }

  .umres-booking-shell .umres-times-group,
  .umres-booking-widget .umres-times-group,
  #umres-booking .umres-times-group{
    width: 100% !important;
  }

  .umres-booking-shell .umres-times-group[data-umres-time-group="afternoon"],
  .umres-booking-widget .umres-times-group[data-umres-time-group="afternoon"],
  #umres-booking .umres-times-group[data-umres-time-group="afternoon"]{
    margin-left: 0 !important;
  }
}
/* ==========================================================
   FIX: que el rango "HH:MM - HH:MM" no se parta en 2 líneas
   ========================================================== */

/* 1) El texto del rango NO debe envolver (wrap) */
.umres-booking-shell .umres-time-pill > span:first-child,
.umres-booking-widget .umres-time-pill > span:first-child,
#umres-booking .umres-time-pill > span:first-child{
  white-space: nowrap;        /* 🔑 evita salto de línea */
  word-break: keep-all;       /* no rompe " - " */
  overflow-wrap: normal;
}

/* 2) Dale un poco más de ancho al botón para que quepa "09:00 - 09:30" */
.umres-booking-shell .umres-time-pill,
.umres-booking-widget .umres-time-pill,
#umres-booking .umres-time-pill{
  width: 96px;                /* antes 72px (muy chico) */
  min-height: 34px;
}

/* 3) (Opcional) si aún se ve apretado, baja 1px la fuente */
.umres-booking-shell .umres-time-pill > span:first-child,
.umres-booking-widget .umres-time-pill > span:first-child,
#umres-booking .umres-time-pill > span:first-child{
  font-size: 11px;
}