/* rtdFecha: selectores de fecha (Dia/Mes/Anio) y calendario flatpickr con tema Apple.
   Variables con respaldo: transferir.php no carga tokens.css, el panel si.
   Tema oscuro del sitio: html[data-theme="dark"]. */
:root {
  --rf-bg: var(--surface-card, #fff);
  --rf-field: var(--surface-inset, #fff);
  --rf-text: var(--text-primary, #1d1d1f);
  --rf-muted: var(--text-muted, #6e6e73);
  --rf-border: var(--border, #d2d2d7);
  --rf-hover: rgba(0, 0, 0, 0.05);
  --rf-accent: var(--blue, #0099FF);
  --rf-accent-soft: rgba(0, 153, 255, 0.22);
  --rf-on-accent: #fff;
  --rf-danger: var(--danger, #FC445F);
  --rf-shadow: 0 12px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
  --rf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
html[data-theme="dark"] {
  --rf-bg: var(--surface-card, #292932);
  --rf-field: var(--surface-inset, #1f1f27);
  --rf-text: var(--text-primary, #fff);
  --rf-muted: var(--text-muted, #9A9AA9);
  --rf-border: var(--border, #44444F);
  --rf-hover: rgba(255, 255, 255, 0.08);
  --rf-accent-soft: rgba(0, 153, 255, 0.32);
  --rf-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --rf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239A9AA9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Original del rodillo: sigue siendo un input nativo (validacion), solo invisible, anclado al contenedor */
.rtd-fecha3 { position: relative; }
.rtd-fecha-orig {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  margin: 0;
  padding: 0;
  border: 0;
  opacity: 0;
  pointer-events: none;
}

/* Tipo 1: tres selectores */
.rtd-fecha3 {
  display: flex;
  flex-flow: row nowrap;
  gap: 8px;
  width: 100%;
}
.rtd-fecha3 select {
  -webkit-appearance: none;
  appearance: none;
  box-sizing: border-box;
  height: 46px;
  min-width: 0;
  margin: 0;
  padding: 0 26px 0 12px;
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  background-color: var(--rf-field);
  background-image: var(--rf-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
  color: var(--rf-text);
  font: inherit;
  font-size: 16px;
  line-height: 1.2;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rtd-fecha3 select:nth-child(1) { flex: 0 0 72px; }
.rtd-fecha3 select:nth-child(2) { flex: 1 1 auto; }
.rtd-fecha3 select:nth-child(3) { flex: 0 0 92px; }
.rtd-fecha3 select:focus,
.rtd-fecha3 select:focus-visible {
  outline: none;
  border-color: var(--rf-accent);
  box-shadow: 0 0 0 3px var(--rf-accent-soft);
}
.rtd-fecha3 select:disabled { opacity: 0.55; cursor: not-allowed; }
.rtd-fecha3 select.is-invalid,
.rtd-fecha3.is-invalid select { border-color: var(--rf-danger); }

/* Tipos 2/3: campo visible de flatpickr (altInput, con altInputClass "rtd-fecha-alt"), igual que los selectores.
   Si la pagina no define fuente, el navegador usa la suya; el calendario ya lleva -apple-system. */
.rtd-fecha-alt {
  box-sizing: border-box;
  width: 100%;
  height: 46px;
  padding: 0 14px;
  border: 1px solid var(--rf-border);
  border-radius: 12px;
  background-color: var(--rf-field);
  color: var(--rf-text);
  font: inherit;
  font-size: 16px;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.rtd-fecha-alt:focus,
.rtd-fecha-alt:focus-visible {
  outline: none;
  border-color: var(--rf-accent);
  box-shadow: 0 0 0 3px var(--rf-accent-soft);
}
.rtd-fecha-alt.is-invalid { border-color: var(--rf-danger); }
.rtd-fecha-alt:disabled { opacity: 0.55; cursor: not-allowed; }
/* Panel del organizador: la regla `.kitRow input` fija 14px y en iPhone el zoom salta por debajo de 16px. */
.kitRow input.rtd-fecha-alt { font-size: 16px; }

/* Calendario flatpickr, estilo Apple */
.flatpickr-calendar {
  box-sizing: border-box;
  width: 320px;
  padding: 10px;
  border: 0;
  border-radius: 16px;
  background: var(--rf-bg);
  color: var(--rf-text);
  box-shadow: var(--rf-shadow);
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", system-ui, sans-serif;
}
.flatpickr-calendar.arrowTop::before,
.flatpickr-calendar.arrowTop::after,
.flatpickr-calendar.arrowBottom::before,
.flatpickr-calendar.arrowBottom::after { display: none; }
.flatpickr-innerContainer,
.flatpickr-rContainer,
.flatpickr-days,
.dayContainer { width: 100%; min-width: 0; max-width: 100%; }
.flatpickr-months { align-items: center; padding-bottom: 6px; }
.flatpickr-months .flatpickr-month { height: 36px; color: var(--rf-text); fill: var(--rf-text); }
.flatpickr-current-month { font-size: 16px; font-weight: 600; color: var(--rf-text); padding-top: 6px; }
.flatpickr-current-month .flatpickr-monthDropdown-months,
.flatpickr-current-month input.cur-year {
  color: var(--rf-text);
  font-weight: 600;
  background: transparent;
}
/* Con min y max en el mismo anio flatpickr deshabilita el anio y lo pinta casi negro: ilegible en oscuro */
.flatpickr-current-month input.cur-year:disabled {
  color: var(--rf-muted);
  -webkit-text-fill-color: var(--rf-muted);
  opacity: 1;
}
.flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-current-month:hover input.cur-year { background: var(--rf-hover); }
.flatpickr-monthDropdown-months .flatpickr-monthDropdown-month { background: var(--rf-bg); color: var(--rf-text); }
.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 0;
  border-radius: 10px;
  color: var(--rf-accent);
  fill: var(--rf-accent);
}
.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover { background: var(--rf-hover); }
.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg { fill: var(--rf-accent); }
.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg { width: 14px; height: 14px; fill: var(--rf-accent); }
span.flatpickr-weekday {
  color: var(--rf-muted);
  font-size: 12px;
  font-weight: 600;
  background: transparent;
}
.flatpickr-day {
  max-width: none;
  width: 14.2857%;
  height: 40px;
  line-height: 40px;
  margin: 0;
  border: 0;
  border-radius: 50%;
  color: var(--rf-text);
  font-size: 15px;
}
.flatpickr-day:hover,
.flatpickr-day:focus {
  background: var(--rf-hover);
  border: 0;
}
.flatpickr-day.today {
  border: 0;
  box-shadow: inset 0 0 0 1.5px var(--rf-accent);
}
.flatpickr-day.today:hover,
.flatpickr-day.today:focus {
  background: var(--rf-hover);
  border: 0;
  color: var(--rf-text);
}
.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
  background: var(--rf-accent);
  border: 0;
  color: var(--rf-on-accent);
  font-weight: 600;
}
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay { color: var(--rf-muted); opacity: 0.6; }
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover { color: var(--rf-muted); opacity: 0.35; background: transparent; }

/* Selector de hora (tipo 3, fecha y hora): flatpickr lo pinta con fondo claro y texto gris fijos, ilegible en oscuro.
   16 px como minimo: con menos, Safari de iPhone amplia la pagina al tocar la hora. */
.flatpickr-time,
.flatpickr-calendar.hasTime .flatpickr-time {
  height: 46px;
  max-height: none;
  border-top: 1px solid var(--rf-border);
  line-height: 46px;
}
.flatpickr-time input,
.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  height: 46px;
  line-height: 46px;
  color: var(--rf-text);
  background: transparent;
  font-size: 16px;
  font-weight: 600;
}
.flatpickr-time input:hover,
.flatpickr-time .flatpickr-am-pm:hover { background: var(--rf-hover); }
.flatpickr-time input:focus,
.flatpickr-time .flatpickr-am-pm:focus { background: var(--rf-accent-soft); outline: none; }
.numInputWrapper:hover { background: transparent; }
.numInputWrapper span { border-color: var(--rf-border); }
.numInputWrapper span:hover { background: var(--rf-hover); }
.flatpickr-calendar .numInputWrapper span.arrowUp:after,
.flatpickr-time .numInputWrapper span.arrowUp:after { border-bottom-color: var(--rf-muted); }
.flatpickr-calendar .numInputWrapper span.arrowDown:after,
.flatpickr-time .numInputWrapper span.arrowDown:after { border-top-color: var(--rf-muted); }

/* Pantallas angostas: hoja centrada, objetivos tactiles de al menos 40 px */
@media (max-width: 480px) {
  .flatpickr-calendar.open {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%);
    animation: none !important;
    width: min(360px, calc(100vw - 32px));
    max-height: calc(100vh - 32px);
    max-height: calc(100dvh - 32px);
    overflow: auto;
    z-index: 100000;
  }
  .flatpickr-day { height: 44px; line-height: 44px; font-size: 16px; }
  .flatpickr-months .flatpickr-prev-month,
  .flatpickr-months .flatpickr-next-month { width: 44px; height: 40px; }
  .rtd-fecha3 select:nth-child(1) { flex-basis: 72px; }
  .rtd-fecha3 select:nth-child(3) { flex-basis: 96px; }
}

@media (max-width: 340px) {
  .rtd-fecha3 select:nth-child(1) { flex-basis: 66px; }
  .rtd-fecha3 select:nth-child(3) { flex-basis: 84px; }
}

/* Estado de error de una pagina que pinta .fg.err (transferir.php): su regla de fondo
   borra la flecha de los selectores, aqui se conserva. */
.fg.err .rtd-fecha3 select {
  border-color: #FC445F;
  background-color: #FFF5F6;
  background-image: var(--rf-chevron);
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px 8px;
}

/* Panel del organizador (WIDGETS-FECHA lote C): el campo visible no hereda la clase del original, asi que se le da aqui lo
   que esas clases le daban. 16px en todos (en iPhone, por debajo, la pantalla hace zoom). */
.contEntrada .rtd-fecha-alt,
.menuCierrePop .rtd-fecha-alt,
.contFechaDesact .rtd-fecha-alt { font-size: 16px; width: 100%; }
.ext-input.rtd-fecha-alt { min-height: var(--control-md, 46px); padding: 0 var(--space-3, 14px); background: var(--surface-raised, var(--rf-field)); border-radius: var(--radius-md, 12px); }
.menuCierrePop .rtd-fecha-alt { padding: 7px 8px; background: var(--surface-inset, var(--rf-field)); border-radius: var(--radius-sm, 8px); }
.contFechaDesact .rtd-fecha-alt { min-height: var(--control-md, 46px); padding: 0 var(--space-3, 14px); background: var(--surface-raised, var(--rf-field)); border-radius: var(--radius-md, 12px); }
.rtd-fecha-alt::placeholder { color: var(--rf-muted); }

/* Panel sin data-theme (modo Sistema): oscuro por omision y claro si el sistema es claro (tokens.css). */
html.rtd-tema:not([data-theme]) {
  --rf-hover: rgba(255, 255, 255, 0.08);
  --rf-accent-soft: rgba(0, 153, 255, 0.32);
  --rf-shadow: 0 12px 40px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4);
  --rf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%239A9AA9' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
@media (prefers-color-scheme: light) {
  html.rtd-tema:not([data-theme]) {
    --rf-hover: rgba(0, 0, 0, 0.05);
    --rf-accent-soft: rgba(0, 153, 255, 0.22);
    --rf-shadow: 0 12px 40px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
    --rf-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5l5 5 5-5' stroke='%236e6e73' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  }
}