/* ==================== DARK MODE - FORMULARIOS Y TABLAS ==================== */
/* Estilos específicos para formularios, inputs, selects, tablas y estados vacíos */
/* Usa SOLO variables CSS del sistema de diseño */

/* ==================== INPUTS Y CAMPOS DE FORMULARIO ==================== */

/* Labels - Background oscuro en dark mode */
.dark .form-field-label {
  background-color: #1f1f1f !important;
  color: #f4f4f4 !important;
}

/* Canon chip de labels en formularios unificados (evita bloque sólido) */
.dark .search-form .form-field-label,
.dark .forms-unified-scope .form-field-label,
.dark .compras-maestro-view .form-field-label,
.dark .modal-body .form-field-label,
.dark .search-form .form-textarea-label,
.dark .forms-unified-scope .form-textarea-label,
.dark .compras-maestro-view .form-textarea-label,
.dark .modal-body .form-textarea-label {
  background: transparent !important;
}

.dark .form-field-input,
.dark input[type="text"],
.dark input[type="number"],
.dark input[type="date"],
.dark input[type="email"],
.dark input[type="search"],
.dark input[type="datetime-local"],
.dark select,
.dark textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

.dark .form-field-input:focus,
.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark input[type="email"]:focus,
.dark input[type="search"]:focus,
.dark input[type="datetime-local"]:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #077e38 !important; /* 🔧 VERDE - Consistente con light mode */
  box-shadow: none !important; /* Eliminar doble borde */
  outline: none !important; /* Eliminar doble borde */
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
}

/* Hover canónico en dark mode: conservar contraste sin perder el campo */
.dark .form-field-input:hover:not(:focus):not(:disabled),
.dark input[type="text"]:hover:not(:focus):not(:disabled),
.dark input[type="number"]:hover:not(:focus):not(:disabled),
.dark input[type="date"]:hover:not(:focus):not(:disabled),
.dark input[type="email"]:hover:not(:focus):not(:disabled),
.dark input[type="search"]:hover:not(:focus):not(:disabled),
.dark input[type="datetime-local"]:hover:not(:focus):not(:disabled),
.dark select:hover:not(:focus):not(:disabled),
.dark textarea:hover:not(:focus):not(:disabled) {
  border-color: var(--text-muted) !important;
  box-shadow: none !important;
}

/* Labels en focus - VERDE de Omega en dark mode */
.dark .form-field-input:focus + .form-field-icon-outside + .form-field-label,
.dark .form-field-select:focus + .form-field-icon-outside + .form-field-label,
.dark .form-field-date:focus + .form-field-icon-outside + .form-field-label,
.dark .form-field-input:focus ~ .form-field-label,
.dark .form-field-select:focus ~ .form-field-label,
.dark .form-field-date:focus ~ .form-field-label {
  color: #077e38 !important; /* 🔧 VERDE - Consistente con light mode */
}

/* CRÍTICO: Asegurar que el texto de input date sea visible */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* Mostrar ano en 2 digitos (visual) en date fields de dark mode */
.dark input[type="date"].form-field-date::-webkit-datetime-edit-year-field {
  width: 2.2ch;
  min-width: 2.2ch;
  max-width: 2.2ch;
  overflow: hidden;
  text-align: right;
}

/* 🔧 CRÍTICO: Eliminar borde rojo del navegador en dark mode cuando el campo date está inválido */
.dark .form-field-date:invalid,
.dark .form-field-date:out-of-range {
  border-color: #4a4a4a; /* Mantener borde gris oscuro, NO rojo */
  box-shadow: none; /* Eliminar cualquier sombra roja del navegador */
}

/* Asegurar que tampoco aparezca el borde rojo en focus cuando está inválido en dark mode */
.dark .form-field-date:focus:invalid,
.dark .form-field-date:focus:out-of-range {
  border: 2px solid #077e38; /* Solo borde verde, NO rojo */
  border-color: #077e38 !important; /* Forzar verde */
  box-shadow: none; /* Eliminar cualquier sombra roja del navegador */
}

/* 🔧 MEGA CRÍTICO: Anular TODOS los estilos nativos del navegador para date inputs en dark mode */
.dark input[type="date"].form-field-date:invalid,
.dark input[type="date"].form-field-date:out-of-range,
.dark input[type="date"].form-field-date:-moz-ui-invalid,
.dark input[type="date"].form-field-date:blank {
  border-color: #4a4a4a !important;
  box-shadow: none !important;
  outline: none !important;
}

.dark input[type="date"].form-field-date:focus:invalid,
.dark input[type="date"].form-field-date:focus:out-of-range,
.dark input[type="date"].form-field-date:focus:-moz-ui-invalid {
  border: 2px solid #077e38 !important;
  box-shadow: none !important;
  outline: none !important;
}

/* Anular estilos de validación del navegador en dark mode */
.dark input[type="date"].form-field-date {
  box-shadow: none !important;
}

.dark input[type="date"].form-field-date:not(:focus):not(:disabled) {
  border-color: #4a4a4a !important;
  box-shadow: none !important;
}

/* ==================== GRADIENTE INTERNO (OVERFLOW INDICATOR) ==================== */

/* Gradiente interno para indicar overflow en dark mode */
.dark .form-field-input::after,
.dark .form-field-date::after {
  background: linear-gradient(
    90deg,
    rgba(31, 31, 31, 0) 0%,
    rgba(31, 31, 31, 1) 100%
  ) !important;
}

/* Gradiente para campos disabled en dark mode */
.dark .form-field.is-disabled .form-field-input::after,
.dark .form-field.is-disabled .form-field-date::after,
.dark .form-field-input:disabled::after,
.dark .form-field-date:disabled::after {
  background: linear-gradient(
    90deg,
    rgba(42, 42, 42, 0) 0%,
    rgba(42, 42, 42, 1) 100%
  ) !important;
}

/* CRÍTICO: Selects en dark mode deben reemplazar el gradiente claro del canon base */
.dark .form-field-select {
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L3 6L3.7 5.3L8 9.6L12.3 5.3L13 6L8 11Z' fill='%23ACB4B9'/%3E%3C/svg%3E"),
    linear-gradient(
      90deg,
      rgba(31, 31, 31, 0) 0%,
      rgba(31, 31, 31, 1) 100%
    ) !important;
  background-repeat: no-repeat;
  background-position:
    right 2px center,
    right 2px top 0;
  background-size:
    16px 16px,
    24px 100%;
}

/* Select disabled en dark mode: gradiente adaptado al fondo disabled */
.dark .form-field.is-disabled .form-field-select,
.dark .form-field-select:disabled {
  background-image:
    url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L3 6L3.7 5.3L8 9.6L12.3 5.3L13 6L8 11Z' fill='%238D8D8D'/%3E%3C/svg%3E"),
    linear-gradient(
      90deg,
      rgba(42, 42, 42, 0) 0%,
      rgba(42, 42, 42, 1) 100%
    ) !important;
}

/* ==================== CAMPOS DESHABILITADOS ==================== */

/* Campos disabled - Background oscuro en dark mode */
.dark .form-field.is-disabled .form-field-input,
.dark .form-field.is-disabled .form-field-select,
.dark .form-field.is-disabled .form-field-date,
.dark .form-field.is-disabled input[type="date"],
.dark .form-field-input:disabled,
.dark .form-field-select:disabled,
.dark .form-field-date:disabled,
.dark input[type="date"]:disabled,
.dark input[type="date"].form-field-date:disabled,
.dark input[type="date"].omega-datepicker:disabled,
.dark input:disabled,
.dark select:disabled,
.dark textarea:disabled {
  opacity: 1 !important; /* Sin reducción de opacidad */
  cursor: not-allowed;
  background-color: #2a2a2a !important; /* Fondo oscuro sólido */
  color: #acb4b9 !important; /* Texto inactivo según nueva guía visual */
  border-color: #4a4a4a !important;
  -webkit-text-fill-color: #acb4b9 !important;
}

/* 🔧 UNIFICACIÓN: omega-datepicker disabled en dark mode */
.dark input.omega-datepicker:disabled,
.dark input.omega-datepicker.form-field-date:disabled,
.dark .form-field.is-disabled input.omega-datepicker {
  background-color: #2a2a2a !important; /* ✅ MISMO que input/select en dark mode */
  color: #8d8d8d !important;            /* ✅ MISMO que input/select en dark mode */
  border-color: #4a4a4a !important;     /* ✅ MISMO que input/select en dark mode */
  cursor: not-allowed;
  opacity: 1 !important;
  -webkit-text-fill-color: #8d8d8d !important; /* ✅ MISMO que input/select en dark mode */
}

/* 🔧 NUEVO: Pseudo-elementos de campos de fecha DISABLED en dark mode */
.dark input[type="date"]:disabled::-webkit-datetime-edit,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit,
.dark .form-field-date:disabled::-webkit-datetime-edit,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
}

.dark input[type="date"]:disabled::-webkit-datetime-edit-year-field,
.dark input[type="date"]:disabled::-webkit-datetime-edit-month-field,
.dark input[type="date"]:disabled::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-day-field,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-year-field,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-month-field,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-day-field,
.dark .form-field-date:disabled::-webkit-datetime-edit-year-field,
.dark .form-field-date:disabled::-webkit-datetime-edit-month-field,
.dark .form-field-date:disabled::-webkit-datetime-edit-day-field,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-year-field,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-month-field,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-day-field,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-year-field,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-month-field,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-day-field {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
}

.dark input[type="date"]:disabled::-webkit-datetime-edit-text,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-text,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-text,
.dark .form-field-date:disabled::-webkit-datetime-edit-text,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-text,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-text {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
}

.dark input[type="date"]:disabled::-webkit-datetime-edit-fields-wrapper,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-fields-wrapper,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-fields-wrapper,
.dark .form-field-date:disabled::-webkit-datetime-edit-fields-wrapper,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-fields-wrapper {
  color: #8d8d8d !important;
  background-color: transparent !important;
}

/* 🔧 NUEVO: Icono del calendario también debe verse en campos disabled */
.dark input[type="date"]:disabled::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]:disabled::-webkit-calendar-picker-indicator,
.dark input.omega-datepicker:disabled::-webkit-calendar-picker-indicator,
.dark .form-field.is-disabled input[type="date"]::-webkit-calendar-picker-indicator,
.dark .form-field.is-disabled .omega-datepicker::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.6);
  opacity: 0.5;
  cursor: not-allowed;
}

/* Labels de campos disabled - Background oscuro en dark mode */
.dark .form-field.is-disabled .form-field-label {
  background-color: #1f1f1f !important;
  color: #595d62 !important;
}

/* Candados en dark mode - Color claro para ser visibles */
.dark .form-field.is-disabled .icon-locked,
.dark .notas-field.is-disabled .icon-locked {
  background-image: url('data:image/svg+xml;utf8,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 7H11V4C11 3.20435 10.6839 2.44129 10.1213 1.87868C9.55871 1.31607 8.79565 1 8 1C7.20435 1 6.44129 1.31607 5.87868 1.87868C5.31607 2.44129 5 3.20435 5 4V7H4C3.73478 7 3.48043 7.10536 3.29289 7.29289C3.10536 7.48043 3 7.73478 3 8V14C3 14.2652 3.10536 14.5196 3.29289 14.7071C3.48043 14.8946 3.73478 15 4 15H12C12.2652 15 12.5196 14.8946 12.7071 14.7071C12.8946 14.5196 13 14.2652 13 14V8C13 7.73478 12.8946 7.48043 12.7071 7.29289C12.5196 7.10536 12.2652 7 12 7ZM6 4C6 3.46957 6.21071 2.96086 6.58579 2.58579C6.96086 2.21071 7.46957 2 8 2C8.53043 2 9.03914 2.21071 9.41421 2.58579C9.78929 2.96086 10 3.46957 10 4V7H6V4ZM12 14H4V8H12V14Z" fill="%23f4f4f4"/></svg>') !important;
}

/* ==================== TABLAS - DARK MODE ==================== */

.dark table {
  border-color: var(--table-border) !important;
  background-color: var(--bg-secondary) !important;
}

.dark thead {
  background-color: var(--table-header-bg) !important; /* #2c2c2c */
}

.dark th {
  background-color: var(--table-header-bg) !important;
  color: var(--text-primary) !important;
  border-color: var(--table-border) !important; /* #3a3a3a */
}

.dark tbody tr {
  border-color: var(--table-border) !important;
}

.dark tbody tr:nth-child(odd) {
  background-color: var(--table-zebra-odd) !important; /* #242424 */
}

.dark tbody tr:nth-child(even) {
  background-color: var(--table-zebra-even) !important; /* #1e1e1e */
}

.dark tbody tr:hover {
  background-color: var(--bg-hover) !important;
}

.dark td {
  color: var(--text-primary) !important;
  border-color: var(--table-border) !important;
}

/* Todos los textos en tablas */
.dark table td,
.dark table th,
.dark table span,
.dark table p {
  color: var(--text-primary) !important;
}

/* Filas inactivas deben conservar el rojo canónico también en dark mode */
.dark .catalogos-brand-list tr[data-inactive="true"]:not(.selected):not(.is-selected) td,
.dark .catalogos-guarantee-supplier-list tr[data-inactive="true"]:not(.selected):not(.is-selected) td,
.dark .catalogos-otros-table tr[data-inactive="true"]:not(.selected):not(.is-selected) td,
.dark #categories-table-body tr[data-inactive="true"]:not(.selected):not(.is-selected) td {
  color: var(--red-status) !important;
}

/* ==================== ESTADOS VACÍOS (EMPTY STATES) ==================== */

.dark .empty-state {
  background-color: var(--bg-secondary) !important;
  color: var(--text-primary) !important;
  border-color: var(--border-secondary) !important;
}

.dark .empty-state-icon {
  color: var(--text-muted) !important;
}

.dark .empty-state-icon svg {
  fill: var(--text-muted) !important;
}

.dark .empty-state-title,
.dark .empty-state h3,
.dark .empty-state h4 {
  color: var(--text-primary) !important;
}

.dark .empty-state-description,
.dark .empty-state p {
  color: var(--text-secondary) !important;
}

/* Mensajes de error legibles en dark mode */
.dark .form-field-error-message,
.dark .form-field.has-error .form-field-error-message {
  color: var(--red-status) !important;
}

/* ==================== INDICADORES DE ESTADO ==================== */

.dark .status-indicator.status-active,
.dark .status-active {
  background-color: var(--green-status) !important; /* #0ABF5B */
}

.dark .status-indicator.status-inactive,
.dark .status-inactive {
  background-color: var(--red-status) !important; /* #FF6B6B */
}

/* ==================== SELECT Y DROPDOWN ARROWS ==================== */

.dark select {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M8 11L3 6L3.7 5.3L8 9.6L12.3 5.3L13 6L8 11Z' fill='%23f4f4f4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  padding-right: 32px;
}

/* ==================== PLACEHOLDERS ==================== */

.dark input::placeholder,
.dark textarea::placeholder {
  color: var(--text-muted) !important;
  opacity: 0.7;
}

/* ==================== CALENDARIO DEL SISTEMA - DARK MODE ==================== */

/* Adaptar el calendario nativo al dark mode con colores Omega */
.dark input[type="date"]::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.9);
  cursor: pointer;
}

/* Color scheme para el calendario */
.dark input[type="date"],
.dark input[type="datetime-local"] {
  color-scheme: dark;
}

/* Pseudo-elementos del calendario en dark mode */
.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
}

.dark input[type="date"]::-webkit-datetime-edit-text,
.dark input[type="datetime-local"]::-webkit-datetime-edit-text {
  color: var(--input-text) !important;
}

/* 🔧 NUEVO: Forzar color blanco en TODOS los pseudo-elementos de fecha en dark mode */
.dark input[type="date"]::-webkit-datetime-edit,
.dark input[type="datetime-local"]::-webkit-datetime-edit,
.dark .omega-datepicker::-webkit-datetime-edit,
.dark .form-field-date::-webkit-datetime-edit {
  color: #f4f4f4 !important;
  -webkit-text-fill-color: #f4f4f4 !important;
}

.dark input[type="date"]::-webkit-datetime-edit-year-field,
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-minute-field,
.dark .omega-datepicker::-webkit-datetime-edit-year-field,
.dark .omega-datepicker::-webkit-datetime-edit-month-field,
.dark .omega-datepicker::-webkit-datetime-edit-day-field,
.dark .form-field-date::-webkit-datetime-edit-year-field,
.dark .form-field-date::-webkit-datetime-edit-month-field,
.dark .form-field-date::-webkit-datetime-edit-day-field {
  color: #f4f4f4 !important;
  -webkit-text-fill-color: #f4f4f4 !important;
}

/* 🔧 NUEVO: Forzar color del texto separador "/" */
.dark input[type="date"]::-webkit-datetime-edit-text,
.dark input[type="datetime-local"]::-webkit-datetime-edit-text,
.dark .omega-datepicker::-webkit-datetime-edit-text,
.dark .form-field-date::-webkit-datetime-edit-text {
  color: #f4f4f4 !important;
  -webkit-text-fill-color: #f4f4f4 !important;
}

/* 🔧 NUEVO: Asegurar que el wrapper de campos también tenga el color correcto */
.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark input[type="datetime-local"]::-webkit-datetime-edit-fields-wrapper,
.dark .omega-datepicker::-webkit-datetime-edit-fields-wrapper,
.dark .form-field-date::-webkit-datetime-edit-fields-wrapper {
  color: #f4f4f4 !important;
  background-color: transparent !important;
}

/* ==================== TRANSICIONES ==================== */

.dark input,
.dark select,
.dark textarea,
.dark table,
.dark th,
.dark td,
.dark .empty-state {
  transition:
    background-color 0.3s ease,
    color 0.3s ease,
    border-color 0.3s ease;
}

/* ==================== SERIALES - DARK MODE ==================== */

/* Iconos verdes (agregar) en dark mode - Verde claro #0ABF5B */
.dark .serial-icon-add {
  color: var(--green-status) !important; /* #0ABF5B */
}

.dark .serial-icon-add svg path,
.dark .serial-icon-add svg circle {
  fill: var(--green-status) !important; /* #0ABF5B */
  stroke: var(--green-status) !important;
}

/* Iconos rojos (quitar) en dark mode - Rojo claro #FF6B6B */
.dark .serial-icon-remove {
  color: var(--red-status) !important; /* #FF6B6B */
}

.dark .serial-icon-remove svg path,
.dark .serial-icon-remove svg circle {
  fill: var(--red-status) !important; /* #FF6B6B */
  stroke: var(--red-status) !important;
}

/* Texto de seriales en dark mode */
.dark .serial-text {
  color: var(--text-primary) !important;
}

/* Títulos de sección de seriales */
.dark .seriales-section-title,
.dark .seriales-title {
  color: var(--text-primary) !important;
}

/* ==================== CHECKBOXES - DARK MODE ==================== */

.dark input[type="checkbox"] {
  border-color: #c6c6c6 !important;
  background: transparent !important;
}

.dark input[type="checkbox"]:checked {
  border-color: #f4f4f4 !important;
  background: #f4f4f4 !important;
}

.dark input[type="checkbox"]:checked::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M8.91 1.63L3.75 6.79 1.09 4.14l-.7.7 3.36 3.36 5.86-5.86-.7-.71Z' fill='%23161616'/%3E%3C/svg%3E") !important;
}

/* Checkboxes personalizados desmarcados - Color claro en dark mode */
.dark .checkbox-custom.unchecked {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2.5' y='2.5' width='11' height='11' rx='1.5' stroke='%23F4F4F4'/%3E%3C/svg%3E") !important;
}

/* Checkboxes personalizados marcados - Color claro en dark mode */
.dark .checkbox-custom.checked {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='2' y='2' width='12' height='12' rx='2' fill='%23F4F4F4'/%3E%3Cpath d='M10.41 5.61L6.53 9.49L4.59 7.55L3.9 8.24L6.53 10.87L11.1 6.3L10.41 5.61Z' fill='%23161616'/%3E%3C/svg%3E") !important;
}

/* Labels de checkboxes - Color claro en dark mode */
.dark .checkbox-custom + label,
.dark label[for*="SearchProduct_Exists"],
.dark label[for*="_Exists"] {
  color: var(--text-primary) !important; /* #f4f4f4 - blanco en dark mode */
}

/* Checkbox del header - Dark mode mantiene colores blancos ya que el header es gris oscuro */
.dark .checkbox-header-all {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2V2ZM3 13V3H13V13H3Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}

.dark .checkbox-header-all.checked {
  background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 2H3C2.73478 2 2.48043 2.10536 2.29289 2.29289C2.10536 2.48043 2 2.73478 2 3V13C2 13.2652 2.10536 13.5196 2.29289 13.7071C2.48043 13.8946 2.73478 14 3 14H13C13.2652 14 13.5196 13.8946 13.7071 13.7071C13.8946 13.5196 14 13.2652 14 13V3C14 2.73478 13.8946 2.48043 13.7071 2.29289C13.5196 2.10536 13.2652 2 13 2V2ZM7 10.75L4.5 8.27135L5.2954 7.5L7 9.1728L10.7044 5.5L11.5002 6.2886L7 10.75Z' fill='%23FFFFFF'/%3E%3C/svg%3E") !important;
}

/* Mantener estilo negativo consistente en headers también en dark mode */
.dark th input[type="checkbox"],
.dark .no-sort input[type="checkbox"] {
  border-color: #f4f4f4 !important;
  background: transparent !important;
}

/* ==================== TEXTAREA Y NOTAS - DARK MODE ==================== */

/* Textarea en dark mode */
.dark .form-textarea {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
}

.dark .form-textarea:focus {
  border-color: #077e38 !important; /* 🔧 VERDE - Consistente con inputs */
}

/* Label del textarea en dark mode */
.dark .form-textarea-label {
  background-color: #1f1f1f !important;
  color: var(--text-secondary) !important;
}

.dark .form-textarea:focus ~ .form-textarea-label {
  color: #077e38 !important; /* 🔧 VERDE - Consistente con inputs */
}

/* Textarea disabled en dark mode */
.dark .form-textarea:disabled {
  background-color: #2a2a2a !important;
  color: #acb4b9 !important;
  border-color: #4a4a4a !important;
}

/* ==================== TOTALES - DARK MODE ==================== */

/* Filas de totales en dark mode */
.dark .total-row {
  color: var(--text-primary) !important;
  border-bottom-color: var(--border-secondary) !important;
}

/* Labels de totales */
.dark .total-label {
  color: var(--text-primary) !important;
}

/* Valores de totales */
.dark .total-value,
.dark .total-value-final {
  color: var(--text-primary) !important;
}

/* Fila final del total */
.dark .total-final {
  border-bottom-color: var(--border-secondary) !important;
}

/* ==================== FILAS NULAS - TEXTO ROJO/AMARILLO ==================== */

/* Filas nulas - Texto rojo claro visible en dark mode */
.dark .row-nula,
.dark .row-nula td,
.dark .tabla-maestro tbody tr.row-nula td {
  color: var(--red-status) !important; /* #FF6B6B - Rojo claro visible */
}

/* ==================== CAMPOS DE FECHA - DARK MODE MEJORADO ==================== */

/* 🔧 CRÍTICO: Forzar estilos dark mode en todos los campos de fecha */
.dark input[type="date"],
.dark input[type="datetime-local"],
.dark .form-field-date,
.dark .omega-datepicker {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
  -webkit-text-fill-color: var(--input-text) !important;
}

/* 🔧 MEGA ESPECIFICIDAD: Campos de fecha con clases combinadas */
.dark input[type="date"].form-field-date,
.dark input[type="date"].omega-datepicker,
.dark input[type="date"].form-field-date.omega-datepicker,
.dark .form-field input[type="date"],
.dark .form-field .form-field-date,
.dark .form-field .omega-datepicker {
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
  border-color: var(--input-border) !important;
  -webkit-text-fill-color: var(--input-text) !important;
}

/* Campos de fecha en focus - Verde Omega */
.dark input[type="date"]:focus,
.dark input[type="datetime-local"]:focus,
.dark .form-field-date:focus,
.dark .omega-datepicker:focus {
  border-color: #077e38 !important;
  background-color: var(--input-bg) !important;
  color: var(--input-text) !important;
}

/* Partes internas del campo de fecha */
.dark input[type="date"]::-webkit-datetime-edit,
.dark input[type="datetime-local"]::-webkit-datetime-edit {
  color: var(--input-text) !important;
}

.dark input[type="date"]::-webkit-datetime-edit-year-field,
.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-hour-field,
.dark input[type="datetime-local"]::-webkit-datetime-edit-minute-field {
  color: var(--input-text) !important;
}

/* ==================== BOTONES DE SUPERSCROLL - DARK MODE ==================== */

/* Botón circular de scroll to bottom */
.dark .table-scroll-button {
  background-color: #2a2a2a !important;
  border-color: #4a4a4a !important;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.5) !important;
}

.dark .table-scroll-button:hover {
  background-color: #3d3d3d !important;
  border-color: #077e38 !important;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.6) !important;
}

.dark .table-scroll-button svg path {
  fill: #f4f4f4 !important;
  stroke: #f4f4f4 !important;
}

/* ==================== FOOTER DE TABLAS - DARK MODE ==================== */

/* Fondo y bordes del footer en dark mode */
.dark .table-footer {
  background-color: #1e1e1e !important;
  border-left-color: var(--table-border) !important; /* #3a3a3a */
  border-right-color: var(--table-border) !important;
  border-bottom-color: var(--table-border) !important;
  color: var(--text-primary) !important;
}

/* Texto de resultados "1-16 de 27 resultados" */
.dark .table-results-info {
  color: var(--text-primary) !important; /* #f4f4f4 */
}

/* ==================== COMPRAS - TABLAS DE ORDENES ==================== */

/* Los wrappers locales de compras-ordenes.html traen borde/fondo claros,
   así que en dark mode los llevamos al borde canónico del sistema. */
.dark .order-detail-table-wrap,
.dark .order-quotation-table-wrap {
  background-color: var(--card-background) !important;
  border-color: var(--table-border) !important;
}

.dark .order-detail-table,
.dark .order-quotation-table {
  background-color: var(--card-background) !important;
}

.dark .order-detail-table-footer,
.dark .order-quotation-table-footer {
  background-color: var(--bg-secondary) !important;
  border-top-color: var(--table-border) !important;
  color: var(--text-primary) !important;
}

.dark .order-detail-table-footer .table-results-info,
.dark .order-quotation-table-footer .table-results-info {
  color: var(--text-primary) !important;
}

.dark .order-detail-table-footer .table-legend-text,
.dark .order-quotation-table-footer .table-legend-text {
  color: var(--text-secondary) !important;
}

/* ==================== PAGINACIÓN - DARK MODE ==================== */

/* SVG de botones de navegación (flechas) */
.dark .pagination-nav-btn svg,
.dark .pagination-nav-btn svg path {
  fill: #f4f4f4 !important;
  stroke: #f4f4f4 !important;
}

/* SVG disabled */
.dark .pagination-nav-btn:disabled svg,
.dark .pagination-nav-btn:disabled svg path {
  fill: #6e6e6e !important;
  stroke: #6e6e6e !important;
}

/* ==================== CAMPOS DE FECHA DISABLED - MÁXIMA PRIORIDAD ==================== */
/* 🔧 CRÍTICO: Esta sección debe estar AL FINAL para sobrescribir las reglas generales */
/* Los campos disabled tienen color gris claro visible (#8d8d8d) en dark mode */

/* Campo disabled completo */
.dark input[type="date"]:disabled,
.dark input[type="datetime-local"]:disabled,
.dark input.omega-datepicker:disabled,
.dark .form-field-date:disabled,
.dark .form-field.is-disabled input[type="date"],
.dark .form-field.is-disabled .omega-datepicker,
.dark .form-field.is-disabled .form-field-date {
  background-color: #2a2a2a !important;
  color: #8d8d8d !important;
  border-color: #4a4a4a !important;
  -webkit-text-fill-color: #8d8d8d !important;
  cursor: not-allowed !important;
  opacity: 1 !important;
}

/* Pseudo-elemento: wrapper principal del datetime-edit */
.dark input[type="date"]:disabled::-webkit-datetime-edit,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit,
.dark .form-field-date:disabled::-webkit-datetime-edit,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit,
.dark .form-field.is-disabled .form-field-date::-webkit-datetime-edit {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
}

/* Pseudo-elementos: campos individuales (año, mes, día) */
.dark input[type="date"]:disabled::-webkit-datetime-edit-year-field,
.dark input[type="date"]:disabled::-webkit-datetime-edit-month-field,
.dark input[type="date"]:disabled::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-year-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-month-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-day-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-hour-field,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-minute-field,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-year-field,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-month-field,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-day-field,
.dark .form-field-date:disabled::-webkit-datetime-edit-year-field,
.dark .form-field-date:disabled::-webkit-datetime-edit-month-field,
.dark .form-field-date:disabled::-webkit-datetime-edit-day-field,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-year-field,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-month-field,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-day-field,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-year-field,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-month-field,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-day-field,
.dark .form-field.is-disabled .form-field-date::-webkit-datetime-edit-year-field,
.dark .form-field.is-disabled .form-field-date::-webkit-datetime-edit-month-field,
.dark .form-field.is-disabled .form-field-date::-webkit-datetime-edit-day-field {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
}

/* Pseudo-elemento: separadores "/" */
.dark input[type="date"]:disabled::-webkit-datetime-edit-text,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-text,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-text,
.dark .form-field-date:disabled::-webkit-datetime-edit-text,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-text,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-text,
.dark .form-field.is-disabled .form-field-date::-webkit-datetime-edit-text {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
}

/* Pseudo-elemento: wrapper de todos los campos */
.dark input[type="date"]:disabled::-webkit-datetime-edit-fields-wrapper,
.dark input[type="datetime-local"]:disabled::-webkit-datetime-edit-fields-wrapper,
.dark input.omega-datepicker:disabled::-webkit-datetime-edit-fields-wrapper,
.dark .form-field-date:disabled::-webkit-datetime-edit-fields-wrapper,
.dark .form-field.is-disabled input[type="date"]::-webkit-datetime-edit-fields-wrapper,
.dark .form-field.is-disabled .omega-datepicker::-webkit-datetime-edit-fields-wrapper,
.dark .form-field.is-disabled .form-field-date::-webkit-datetime-edit-fields-wrapper {
  color: #8d8d8d !important;
  -webkit-text-fill-color: #8d8d8d !important;
  background-color: transparent !important;
}

/* Pseudo-elemento: icono del calendario disabled */
.dark input[type="date"]:disabled::-webkit-calendar-picker-indicator,
.dark input[type="datetime-local"]:disabled::-webkit-calendar-picker-indicator,
.dark input.omega-datepicker:disabled::-webkit-calendar-picker-indicator,
.dark .form-field-date:disabled::-webkit-calendar-picker-indicator,
.dark .form-field.is-disabled input[type="date"]::-webkit-calendar-picker-indicator,
.dark .form-field.is-disabled .omega-datepicker::-webkit-calendar-picker-indicator,
.dark .form-field.is-disabled .form-field-date::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(0.6) !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
}

/* ========================================
   UNIFORMIDAD GLOBAL DISABLED (DARK)
   ======================================== */

/* Quitar candados globalmente en dark */
.dark .form-field.is-disabled .icon-locked,
.dark .notas-field.is-disabled .icon-locked,
.dark .buscar-tag-lock {
  display: none !important;
}

/* Quitar pseudo-candados por ::after */
.dark .form-field.is-disabled::after,
.dark .mensaje-field.is-disabled::after,
.dark .notas-field.is-disabled::after {
  content: none !important;
  display: none !important;
}

/* Skin disabled global (dark) */
.dark .form-field.is-disabled .form-field-input,
.dark .form-field.is-disabled .form-field-select,
.dark .form-field.is-disabled .form-field-date,
.dark .form-field.is-disabled .form-textarea,
.dark .form-field-input:disabled,
.dark .form-field-select:disabled,
.dark .form-field-date:disabled,
.dark .form-textarea:disabled,
.dark textarea.form-field-input:disabled {
  background-color: #2a2a2a !important;
  color: #acb4b9 !important;
  border-color: #4a4a4a !important;
  -webkit-text-fill-color: #acb4b9 !important;
  opacity: 1 !important;
}

.dark .form-field.is-disabled .form-field-label,
.dark .form-field.is-disabled .form-textarea-label,
.dark .notas-field.is-disabled .form-textarea-label {
  color: #595d62 !important;
  background-color: #1f1f1f !important;
}