/* calendar.css – responsive calendar styles
   No custom font is set to preserve the site's original font.
*/

.calendar-container { width: 100%; }
.calendar {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.08);
}

/* columns */
.calendar .col { padding: 16px; }
.calendar .leftCol { background: #F48989; color: #fff; }
.calendar .rightCol { background: #fff; }

/* header */
.calendar .date { font-size: 1.25rem; font-weight: 700; margin: 0 0 12px 0; }

/* labels */
.calendar-label { color: #fff; margin-top: 8px; margin-bottom: 6px; display: block; }

/* selects / inputs base */
.calendar-select, .calendar-input {
  width: 100%;
  display: block;
  margin-bottom: 12px;
  padding: 8px 10px;
  background: #F48989;
  color: #fff;
  border: none;
  border-bottom: 2px solid #fff;
  border-radius: 0;
  outline: none;
  /*appearance: none;*/
}
.calendar-select:focus, .calendar-input:focus { box-shadow: none; }

/* inline rows for label + control */
.calendar-row {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 8px 10px; margin-bottom: 12px;
  border-bottom: 2px solid #fff;
}
.calendar-row-label { color: #fff; font-weight: 500; }
.calendar-inline-control {
  display: inline-block; background: #F48989; color: #fff; outline: none; border: none;
  border-radius: 0; flex: 0 0 140px; max-width: 160px; padding-left: 8px; padding-right: 8px;
}
@media (max-width: 575.98px){
  .calendar-row{ gap: 8px; }
  .calendar-inline-control{ flex: 0 0 120px; max-width: 120px; }
}

/* iOS-style switch */
.calendar-field {
  width: 100%; padding: 8px 10px; margin-bottom: 12px;
  border-bottom: 2px solid #fff; display: flex; align-items: center; justify-content: space-between;
}
.calendar-switch .switch-text { color: #fff; font-weight: 500; }
.switch { position: relative; display: inline-block; width: 44px; height: 26px; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .slider {
  position: absolute; inset: 0; cursor: pointer;
  background: rgba(255,255,255,0.35); border: 2px solid #fff; border-radius: 999px;
  transition: background .2s ease, border-color .2s ease;
}
.switch .slider:before {
  content:""; position:absolute; height:18px; width:18px; left:2px; top:2px;
  background:#fff; border-radius:50%; transition: transform .2s ease, background .2s ease;
}
.switch input:checked + .slider { background:#fff; border-color:#fff; }
.switch input:checked + .slider:before { transform: translateX(18px); background:#F48989; }

/* week header + days grid */
.calendar .weekday, .calendar .days {
  list-style:none; padding-left:0; margin:6px 0 0 0;
  display:grid; grid-template-columns: repeat(7,1fr); gap:6px;
}
.calendar .weekday li a, .calendar .days li a {
  display:block; text-align:center; text-decoration:none; border-radius:8px;
  padding:10px 0; border:1px solid transparent; user-select:none;
}
.calendar .weekday li a { font-weight:700; font-size:.85rem; cursor:default; background:#fafafa; border-color:rgba(0,0,0,.06); color:#333; }

/* available day numbers color */
.calendar .days li a { font-size:.95rem; background:#fff; border-color:rgba(0,0,0,.08); color:#747978; }
.calendar .days li a:hover { outline:none; border-color:rgba(0,0,0,.30); }

/* states */
.calendar .days li.disabled a { color:#a9a9a9; background:#f1f1f1; cursor:not-allowed; border-color:rgba(0,0,0,.05); }
.calendar .days li.disabled.today a { border-color:rgba(0,0,0,.05); font-weight:600; }

/* TODAY ring */
.calendar .days li.today a { position: relative; }
.calendar .days li.today a::before{
  content:""; position:absolute; width:28px; height:28px;
  border:2px solid #F48989; border-radius:50%;
  top:50%; left:50%; transform: translate(-50%,-50%); pointer-events:none;
}

/* === NEW: blocked days (no stock) === */
.calendar .days li.blocked a{
  background: #2B2F31;          /* gris oscuro */
  border-color: #2B2F31;
  color: #C8CED2;               /* gris claro */
  cursor: not-allowed;
}

/* padding cells */
.calendar .days li.pad a { visibility:hidden; pointer-events:none; }

/* responsive layout */
@media (min-width: 992px){
  .calendar { display:grid; grid-template-columns:280px 1fr; }
  .calendar .leftCol { border-right:1px solid rgba(0,0,0,.08); }
}
@media (max-width: 991.98px){ .calendar { display:block; } }

/* === Make SELECTED always win visually === */
.calendar .days li.selected a{
  background:#0d6efd !important;
  color:#fff !important;
  border-color:#0d6efd !important;
  position: relative;
  z-index: 1;
}

/* Campo compacto (máx. 3 dígitos) */
.calendar-inline-control.sm {
  flex: 0 0 90px;
  max-width: 90px;
  text-align: right;
  padding-right: 8px;
}

/* Opcional: estilizar number inputs igual que selects */
.calendar-inline-control[type="number"] {
  -moz-appearance: textfield;
}
.calendar-inline-control[type="number"]::-webkit-outer-spin-button,
.calendar-inline-control[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Inputs y selects dentro de la columna rosa (leftCol) */
.calendar-select,
.calendar-input,
.calendar-inline-control {
  background: #fff5f5;   /* un rosa muy claro */
  color: #2B2F31;        /* texto oscuro para legibilidad */
  border: none;
  border-bottom: 2px solid #fff;  /* mantiene el subrayado blanco */
  border-radius: 0;
  outline: none;
}

/* Estado focus */
.calendar-select:focus,
.calendar-input:focus,
.calendar-inline-control:focus {
  background: #ffecec;   /* un poco más oscuro al enfocarse */
  box-shadow: none;
}

/* Uniformar ancho de los campos dentro de leftCol */
.leftCol .calendar-inline-control,
.leftCol .calendar-input,
.leftCol .calendar-select {
  flex: 0 0 120px;   /* ancho fijo */
  max-width: 120px;
  text-align: center;  /* centramos números y selects */
  padding-left: 6px;
  padding-right: 6px;
}
/* Fuente unificada para todo el modal */
#validationModal {
  font-family: Helvetica, Arial, sans-serif;
}
/* Campos dentro de leftCol con bordes redondeados */
.leftCol .calendar-inline-control,
.leftCol .calendar-input,
.leftCol .calendar-select {
  flex: 0 0 120px;
  max-width: 120px;
  text-align: center;
  padding-left: 6px;
  padding-right: 6px;

  border-radius: 6px;       /* bordes redondeados */
  border: 1px solid #ddd;   /* un borde suave */
}

/* Fondo editable más claro para distinguirlos */
.leftCol .calendar-inline-control,
.leftCol .calendar-input,
.leftCol .calendar-select {
  background: #fff5f5;
  color: #2B2F31;
}

/* Hover y focus */
.leftCol .calendar-inline-control:focus,
.leftCol .calendar-input:focus,
.leftCol .calendar-select:focus {
  background: #ffecec;
  border-color: #aaa;
  outline: none;
}