/* Reglas globales para inputs / combobox / textarea — un único punto para buscarlas/ajustarlas */

.ui-input,
input[type="text"],
input[type="search"],
select.ui-input,
.ui-combobox,
.ui-date,
.ui-time {
  width: 100%;
  box-sizing: border-box;
  height: var(--ui-control-height);
  padding: 0 .9rem;
  font-family: var(--font-stack);
  font-size: var(--font-size-base);
  line-height: var(--line-height-tight);
  font-weight: 400;
  border-radius: var(--ui-control-radius);
  border: 1px solid var(--ui-combo-border);
  background: var(--ui-combo-bg);
  color: var(--ui-combo-text);
  transition: box-shadow .18s var(--ease-standard), border-color .18s var(--ease-standard);
}

/* Selects de una sola opción: misma apariencia y flecha en toda la app */
select.ui-input,
select.ui-combobox {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23bfc8d6' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right .9rem center;
  padding-right: 2.6rem;
}
select.ui-input::-ms-expand,
select.ui-combobox::-ms-expand {
  display: none;
}
select.ui-input:disabled,
select.ui-combobox:disabled {
  opacity: .7;
}
/* Unificar apariencia de spinners numéricos (Duración) ocultando flechas nativas y usando aspecto plano */
input[type="number"].ui-input::-webkit-inner-spin-button,
input[type="number"].ui-input::-webkit-outer-spin-button { -webkit-appearance: none; margin:0; }
input[type="number"].ui-input { -moz-appearance: textfield; appearance:textfield; }
/* Fallback para navegadores que fuerzan el spinner: reducir opacidad */
input[type="number"].ui-input.show-spinner::-webkit-inner-spin-button,
input[type="number"].ui-input.show-spinner::-webkit-outer-spin-button { opacity:.35; }
textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 5.5rem;
  padding: .5rem .9rem;
  font-family: var(--font-stack);
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  font-weight: 400;
  border-radius: var(--ui-control-radius);
  border: 1px solid var(--ui-combo-border);
  background: var(--ui-combo-bg);
  color: var(--ui-combo-text);
  transition: box-shadow .18s var(--ease-standard), border-color .18s var(--ease-standard);
}

/* Inputs más compactos cuando se necesite */
.ui-input.compact,
.ui-combobox.compact,
.ui-date.compact { height:32px; padding:0 .7rem; }

/* Focus consistente (mismo token que los demás componentes) */
.ui-input:focus,
.ui-combobox:focus,
textarea:focus,
.ui-date:focus,
.ui-time:focus {
  outline: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent);
  border-color: color-mix(in srgb, var(--color-accent) 24%, var(--ui-combo-border));
}

/* Alineamiento en filas (compatibilidad con .form-row/.field) */
.field .ui-input,
.form-row .ui-input,
.content-asset-grid .grow .ui-input {
  width: 100%;
}

/* Ajuste para el search-input (hereda altura) */
.search-input input { height: var(--ui-control-height); padding: 0 .7rem; }

/* Small screens */
@media (max-width: 480px) {
  .ui-input, .ui-combobox, .ui-date { height: 32px; padding:0 .7rem; }
  .search-input input { height:32px; }
}

/* Advanced input/select rules migrated here from components/forms.css
   - Autofill / datalist background fixes
   - Chrome-specific caret/text-fill enforcement
   - select.ui-list rules and focus
   - time-split layout and behavior
   - hidden canonical inputs and flatpickr hiding used across forms
*/

/* When browser autofill/autocomplete places a suggestion, ensure visible text follows theme */
.ui-input.has-value { color: var(--ui-combo-text) !important; -webkit-text-fill-color: var(--ui-combo-text) !important; }

/* Ensure caret is visible and consistent when inputs have values (autocomplete/datalist)
   Some browsers change caret-color or text-fill when applying suggestions; make it explicit. */
.ui-input, .ui-input.has-value {
  caret-color: var(--ui-combo-text) !important;
  -webkit-text-fill-color: var(--ui-combo-text) !important;
}
.ui-input:focus, .ui-input.has-value:focus {
  caret-color: var(--ui-combo-text) !important;
}

/* Prevent datalist/autocomplete selection from clearing background in some browsers */
input.ui-input:-internal-autofill-selected, input.ui-input:-webkit-autofill, textarea.ui-input:-webkit-autofill {
  background: var(--ui-combo-bg) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--ui-combo-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--ui-combo-bg) inset !important;
  color: var(--ui-combo-text) !important;
  -webkit-text-fill-color: var(--ui-combo-text) !important;
  caret-color: var(--ui-combo-text) !important;
  transition: background-color 5000s ease-in-out 0s !important; /* mitiga parpadeo blanco */
}

/* Aplicar mismo fix de autofill de forma global a inputs comunes aunque no tengan clase .ui-input */
input[type="text"]:-internal-autofill-selected,
input[type="password"]:-internal-autofill-selected,
input[type="email"]:-internal-autofill-selected,
input[type="search"]:-internal-autofill-selected,
input[type="text"]:-webkit-autofill,
input[type="password"]:-webkit-autofill,
input[type="email"]:-webkit-autofill,
input[type="search"]:-webkit-autofill {
  background: var(--ui-combo-bg) !important;
  -webkit-box-shadow: 0 0 0px 1000px var(--ui-combo-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--ui-combo-bg) inset !important;
  color: var(--ui-combo-text) !important;
  -webkit-text-fill-color: var(--ui-combo-text) !important;
  caret-color: var(--ui-combo-text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Chrome-specific tweaks: target when we detect Chrome via JS (document.documentElement.is-chrome) */
.is-chrome input.ui-input, .is-chrome textarea.ui-input {
  -webkit-appearance: textfield;
  appearance: textfield;
  -webkit-text-fill-color: var(--ui-combo-text) !important;
}
.is-chrome input.ui-input:-webkit-autofill, .is-chrome textarea.ui-input:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px var(--ui-combo-bg) inset !important;
  box-shadow: 0 0 0px 1000px var(--ui-combo-bg) inset !important;
  -webkit-text-fill-color: var(--ui-combo-text) !important;
  transition: background-color 5000s ease-in-out 0s !important;
}

/* Extra Chrome-specific caret/text-fill enforcement for inputs which receive
   browser suggestion via datalist/autocomplete. This attempts to override
   Chromium's tendency to hide the caret or change text-fill when a suggestion
   is applied. */
.is-chrome input.ui-input, .is-chrome input.ui-input.has-value {
  -webkit-text-fill-color: var(--ui-combo-text) !important;
  caret-color: auto !important;
}
.is-chrome input.ui-input:focus, .is-chrome input.ui-input.has-value:focus {
  caret-color: auto !important;
}

/* Ensure the split selects behave consistently on Chrome (appearance and forcing a compositor layer to avoid z-index/overflow issues) */
.is-chrome .time-split { -webkit-transform: translateZ(0); transform: translateZ(0); }
.is-chrome .time-split select { -webkit-appearance: menulist-button; appearance: menulist-button; }

/* datalist dropdown - attempt to make it visually consistent (limited control) */
input.ui-input::-webkit-calendar-picker-indicator { filter: none; }

/* Detect autofill start to trigger JS repaint of caret color (Chrome bug workaround) */
@keyframes autofill-start { from { opacity:1; } to { opacity:1; } }
input:-webkit-autofill { animation: autofill-start 10ms both; }

/* Lista múltiple estilizada */
select.ui-list { background: var(--ui-combo-bg); color: var(--ui-combo-text); border:1px solid var(--ui-combo-border); border-radius: .6rem; padding:.4rem; font-family: var(--font-stack); font-size: var(--font-size-base); line-height: var(--line-height-tight); }
select.ui-list:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* Time input redondeado */
.ui-time { background: var(--ui-combo-bg); color: var(--ui-combo-text); border:1px solid var(--ui-combo-border); border-radius: 999px; padding:.35rem .7rem; font-family: var(--font-stack); font-size: var(--font-size-base); line-height: var(--line-height-tight); }
.ui-time::-webkit-calendar-picker-indicator { filter: invert(0.8); opacity:.85; }
.ui-time:focus { outline: none; box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 35%, transparent); }

/* Split time selector */
.time-split {
  display:inline-flex;
  gap:.35rem;
  align-items:center;
  background: var(--ui-combo-bg);
  border:1px solid var(--ui-combo-border);
  border-radius: 999px;
  /* allow overflow visible where needed */
  padding:.18rem .6rem;
  position:relative;
  z-index: var(--z-widget); /* centralized z-index */
  pointer-events:auto;
}
.time-split select {
  display:inline-block;
  background: transparent;
  color: var(--ui-combo-text);
  border: none;
  border-radius: 6px;
  padding:.25rem .35rem;
  font:inherit;
  min-width:3ch;
  text-align:center;
  pointer-events:auto;
  cursor:default;
}
.time-split select:focus { outline:none; box-shadow: none; }
.time-split .sep { color: var(--color-muted); padding:0 .18rem; }
.time-split:focus-within { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 12%, transparent); }

/* Highlight active part (hour/min/sec) */
.time-split select:focus, .time-split select:active { background: color-mix(in srgb, var(--ui-combo-bg) 65%, var(--color-accent) 20%); color: var(--ui-combo-text); border-radius:6px; }
.time-split select:focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* hidden canonical input used for form submission */
input.ui-time[type="hidden"]{ display:none !important; visibility:hidden !important; height:0 !important; margin:0 !important; padding:0 !important; border:0 !important; }
/* IMPORTANTE: Antes ocultábamos cualquier .flatpickr-input dentro de .content-asset-form.
  Eso escondía también los timepickers (clase añadida por flatpickr) rompiendo los campos de hora.
  Ahora delegamos el ocultamiento del input ORIGINAL de fecha al propio script (date_input.js) que ya
  reposiciona el input fuera de pantalla cuando usa altInput. No forzamos display:none global. */