/**
 * CERO — estilos globales de formularios (select / Tom Select).
 * Se carga en todas las páginas con layout CERO; no requiere rebuild de Tailwind.
 */

/* Select nativos: fondo sólido en todo el sistema (nunca transparente) */
body select:not([multiple]),
.cero-body select:not([multiple]),
#cero-app-shell select:not([multiple]),
.cero-auth-card select {
  box-sizing: border-box;
  background-color: #ffffff !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.55rem center !important;
  background-size: 0.65rem !important;
  color: #0f172a !important;
  font-size: clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem) !important;
  line-height: 1.35 !important;
  min-height: 2rem;
  padding: 0.35rem 1.75rem 0.35rem 0.5rem !important;
  border-radius: 0.375rem;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}

.dark body select:not([multiple]),
.dark .cero-body select:not([multiple]),
.dark #cero-app-shell select:not([multiple]),
.dark .cero-auth-card select {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394a3b8' d='M2 4l4 4 4-4'/%3E%3C/svg%3E") !important;
}

body select option,
.cero-body select option,
#cero-app-shell select option {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-size: clamp(0.6875rem, 0.62rem + 0.2vw, 0.8125rem) !important;
}

.dark body select option,
.dark .cero-body select option,
.dark #cero-app-shell select option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Clases estándar CERO */
.cero-ui-select,
.cero-fld-input.cero-ui-select,
select.cero-select-native {
  background-color: #ffffff !important;
}

.dark .cero-ui-select,
.dark .cero-fld-input.cero-ui-select,
.dark select.cero-select-native {
  background-color: #1e293b !important;
}

/* Tom Select (buscador en selects) */
.ts-wrapper .ts-control {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-size: clamp(0.6875rem, 0.62rem + 0.25vw, 0.8125rem) !important;
  line-height: 1.35 !important;
  min-height: 2rem !important;
}

.ts-wrapper .ts-control input {
  font-size: inherit !important;
  color: inherit !important;
}

.ts-wrapper .ts-control .item {
  background-color: #ffffff !important;
  color: #0f172a !important;
  font-size: inherit !important;
}

.ts-dropdown {
  font-size: clamp(0.6875rem, 0.62rem + 0.2vw, 0.8125rem) !important;
  background-color: #ffffff !important;
}

.ts-dropdown .option {
  background-color: #ffffff !important;
  color: #0f172a !important;
}

.dark .ts-wrapper .ts-control,
.dark .ts-wrapper .ts-control .item {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

.dark .ts-wrapper .ts-control input {
  color: #f1f5f9 !important;
}

.dark .ts-dropdown,
.dark .ts-dropdown .option {
  background-color: #1e293b !important;
  color: #f1f5f9 !important;
}

/* Pantallas anchas: un poco más legible sin desbordar */
@media (min-width: 1280px) {
  body select:not([multiple]),
  .ts-wrapper .ts-control {
    font-size: 0.8125rem !important;
  }
}

@media (max-width: 639px) {
  body select:not([multiple]),
  .ts-wrapper .ts-control {
    font-size: 0.75rem !important;
    min-height: 1.875rem;
  }
}