/*
 * Modo oscuro del panel de la empresa (html.dark): selectores, listas desplegables,
 * calendarios y ventanas emergentes legibles en TODAS las pantallas.
 *
 * Antes: al abrir un selector la lista salía con fondo blanco y letras casi blancas
 * (el <select> hereda el color claro del texto, pero su lista usaba el fondo claro del
 * sistema; algunas listas de Element UI tampoco tenían fondo oscuro sin skin).
 *
 * - Se carga DESPUÉS de theme.css, custom.css y la skin de la empresa (storage/skins/*.css),
 *   y ANTES de los estilos de cada pantalla (@stack('styles')): una pantalla puede afinar.
 * - Todo va bajo html.dark: en modo claro no cambia nada.
 * - Los colores salen de las variables de la skin de la empresa (--contents-dark,
 *   --inputs-dark, --borders-dark, --button-second, --light-color; o las de las skins
 *   «black» y «modern») y, sin skin, de los del tema oscuro V2 (tarjetas #283046,
 *   bordes #3b4253, texto #e5e7eb: los mismos de tenant-topbar-v2.css).
 * - Sin !important: lo que una skin marca como !important se respeta.
 */

html.dark {
    color-scheme: dark;
    --sfp-dk-surface: var(--contents-dark, var(--black-content-dark, var(--md-content-dark, #283046)));
    --sfp-dk-input: var(--inputs-dark, var(--black-input-dark, var(--md-input-dark, #283046)));
    --sfp-dk-border: var(--borders-dark, var(--black-border-dark, var(--md-border-dark, #3b4253)));
    --sfp-dk-hover: var(--button-second, var(--black-button-second, var(--md-button-second, #323b55)));
    --sfp-dk-text: var(--light-color, #e5e7eb);
    --sfp-dk-muted: #a3aab8;
    --sfp-dk-disabled: #6b7280;
    --sfp-dk-primary: #60a5fa;
    --sfp-dk-primary-soft: rgba(59, 130, 246, .2);
    --sfp-dk-shadow: 0 12px 32px rgba(0, 0, 0, .45);
}

/* ------------------------------------------------------------------------
 * <select> nativos: el control y su lista (option / optgroup)
 * ------------------------------------------------------------------------ */
html.dark select {
    background-color: var(--sfp-dk-input);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark select option,
html.dark select optgroup {
    background-color: var(--sfp-dk-surface);
    color: var(--sfp-dk-text);
}

/* El rótulo del grupo («Inicio», «Ventas»…) se distingue de sus opciones. */
html.dark select optgroup {
    color: var(--sfp-dk-muted);
    font-style: normal;
    font-weight: 700;
}

html.dark select option:checked {
    background-color: var(--sfp-dk-hover);
    color: var(--sfp-dk-text);
}

html.dark select option:disabled,
html.dark select:disabled {
    color: var(--sfp-dk-disabled);
}

/* ------------------------------------------------------------------------
 * Element UI: campos (la caja cerrada del selector)
 * ------------------------------------------------------------------------ */
html.dark .el-input__inner,
html.dark .el-textarea__inner {
    background-color: var(--sfp-dk-input);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .el-input__inner::placeholder,
html.dark .el-textarea__inner::placeholder {
    color: var(--sfp-dk-muted);
}

/* Borde al pasar el mouse y de foco. :where() no suma especificidad: el borde rojo de un campo con error se queda. */
html.dark .el-input__inner:where(:hover),
html.dark .el-textarea__inner:where(:hover) {
    border-color: var(--sfp-dk-muted);
}

html.dark .el-input__inner:where(:focus),
html.dark .el-textarea__inner:where(:focus) {
    border-color: var(--primary-color, #409eff);
}

/* El botón dentro del campo («Enviar» junto al correo): sin fondo ni borde propios, del mismo alto que el campo. */
html.dark .el-input-group__append .el-button,
html.dark .el-input-group__prepend .el-button {
    background-color: transparent;
    border-color: transparent;
    color: var(--sfp-dk-text);
    box-shadow: none;
}

html.dark .el-input-group__append .el-button:hover,
html.dark .el-input-group__prepend .el-button:hover {
    color: var(--sfp-dk-primary);
}

/* Contador de caracteres («0/600») de show-word-limit: Element lo pinta con fondo blanco.
 * Con el fondo del campo (no transparente) para que el texto escrito no se vea detrás. */
html.dark .el-textarea .el-input__count,
html.dark .el-input .el-input__count .el-input__count-inner {
    background-color: var(--sfp-dk-input);
    color: var(--sfp-dk-muted);
}

html.dark .el-textarea.is-disabled .el-input__count {
    background-color: var(--sfp-dk-surface);
}

html.dark .el-textarea.is-exceed .el-input__count,
html.dark .el-input.is-exceed .el-input__count .el-input__count-inner {
    color: #f87171;
}

html.dark .el-input-group__append,
html.dark .el-input-group__prepend {
    background-color: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-muted);
}

html.dark .el-input.is-disabled .el-input__inner,
html.dark .el-textarea.is-disabled .el-textarea__inner {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-disabled);
}

html.dark .el-select .el-tag,
html.dark .el-cascader__tags .el-tag {
    background-color: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .el-select .el-tag__close.el-icon-close,
html.dark .el-cascader__tags .el-tag .el-icon-close {
    background-color: transparent;
    color: var(--sfp-dk-muted);
}

html.dark .el-input-number__decrease,
html.dark .el-input-number__increase {
    background-color: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

/* ------------------------------------------------------------------------
 * Element UI: ventanas flotantes (fondo, borde y flecha)
 * ------------------------------------------------------------------------ */
html.dark .el-select-dropdown,
html.dark .el-autocomplete-suggestion,
html.dark .el-cascader__dropdown,
html.dark .el-picker-panel,
html.dark .el-time-panel,
html.dark .el-dropdown-menu,
html.dark .el-popover,
html.dark .el-color-dropdown,
html.dark .el-tooltip__popper.is-light {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
    box-shadow: var(--sfp-dk-shadow);
}

/* Flecha de la ventana. Los globos oscuros (.el-tooltip__popper.is-dark) no llevan .el-popper: se quedan como están. */
html.dark .el-popper[x-placement^="bottom"] .popper__arrow,
html.dark .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow { border-bottom-color: var(--sfp-dk-border); }
html.dark .el-popper[x-placement^="bottom"] .popper__arrow::after,
html.dark .el-tooltip__popper.is-light[x-placement^="bottom"] .popper__arrow::after { border-bottom-color: var(--sfp-dk-surface); }
html.dark .el-popper[x-placement^="top"] .popper__arrow,
html.dark .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow { border-top-color: var(--sfp-dk-border); }
html.dark .el-popper[x-placement^="top"] .popper__arrow::after,
html.dark .el-tooltip__popper.is-light[x-placement^="top"] .popper__arrow::after { border-top-color: var(--sfp-dk-surface); }
html.dark .el-popper[x-placement^="left"] .popper__arrow,
html.dark .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow { border-left-color: var(--sfp-dk-border); }
html.dark .el-popper[x-placement^="left"] .popper__arrow::after,
html.dark .el-tooltip__popper.is-light[x-placement^="left"] .popper__arrow::after { border-left-color: var(--sfp-dk-surface); }
html.dark .el-popper[x-placement^="right"] .popper__arrow,
html.dark .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow { border-right-color: var(--sfp-dk-border); }
html.dark .el-popper[x-placement^="right"] .popper__arrow::after,
html.dark .el-tooltip__popper.is-light[x-placement^="right"] .popper__arrow::after { border-right-color: var(--sfp-dk-surface); }

/* ------------------------------------------------------------------------
 * Element UI: el-select (opciones, grupos, vacío)
 * ------------------------------------------------------------------------ */
html.dark .el-select-dropdown__item {
    color: var(--sfp-dk-text);
}

html.dark .el-select-dropdown__item.hover,
html.dark .el-select-dropdown__item:hover {
    background-color: var(--sfp-dk-hover);
    color: var(--sfp-dk-text);
}

html.dark .el-select-dropdown__item.selected {
    color: var(--sfp-dk-primary);
}

html.dark .el-select-dropdown.is-multiple .el-select-dropdown__item.selected {
    background-color: transparent;
    color: var(--sfp-dk-primary);
}

html.dark .el-select-dropdown.is-multiple .el-select-dropdown__item.selected.hover {
    background-color: var(--sfp-dk-hover);
}

html.dark .el-select-dropdown__item.is-disabled,
html.dark .el-select-dropdown__item.is-disabled:hover {
    background-color: transparent;
    color: var(--sfp-dk-disabled);
}

html.dark .el-select-group__title,
html.dark .el-select-dropdown__empty {
    color: var(--sfp-dk-muted);
}

html.dark .el-select-group__wrap:not(:last-of-type)::after {
    background-color: var(--sfp-dk-border);
}

/* ------------------------------------------------------------------------
 * Element UI: autocompletar
 * ------------------------------------------------------------------------ */
html.dark .el-autocomplete-suggestion li {
    color: var(--sfp-dk-text);
}

html.dark .el-autocomplete-suggestion li:hover,
html.dark .el-autocomplete-suggestion li.highlighted {
    background-color: var(--sfp-dk-hover);
}

html.dark .el-autocomplete-suggestion li.divider {
    border-top-color: var(--sfp-dk-border);
}

html.dark .el-autocomplete-suggestion.is-loading li:hover {
    background-color: var(--sfp-dk-surface);
}

/* ------------------------------------------------------------------------
 * Element UI: cascader
 * ------------------------------------------------------------------------ */
html.dark .el-cascader-menu {
    border-right-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .el-cascader-node:not(.is-disabled):hover,
html.dark .el-cascader-node:not(.is-disabled):focus {
    background-color: var(--sfp-dk-hover);
}

html.dark .el-cascader-node.in-active-path,
html.dark .el-cascader-node.is-active,
html.dark .el-cascader-node.is-selectable.in-checked-path {
    color: var(--sfp-dk-primary);
}

html.dark .el-cascader-node.is-disabled {
    color: var(--sfp-dk-disabled);
}

html.dark .el-cascader__suggestion-panel,
html.dark .el-cascader__suggestion-list {
    color: var(--sfp-dk-text);
}

html.dark .el-cascader__suggestion-item:hover,
html.dark .el-cascader__suggestion-item:focus {
    background-color: var(--sfp-dk-hover);
}

html.dark .el-cascader__suggestion-item.is-checked {
    color: var(--sfp-dk-primary);
}

html.dark .el-cascader__empty-text,
html.dark .el-cascader-menu__empty-text {
    color: var(--sfp-dk-muted);
}

/* ------------------------------------------------------------------------
 * Element UI: calendarios (fecha, rango, mes, año)
 * ------------------------------------------------------------------------ */
html.dark .el-picker-panel__body,
html.dark .el-picker-panel__content,
html.dark .el-date-picker__header-label,
html.dark .el-picker-panel__icon-btn,
html.dark .el-date-range-picker__header,
html.dark .el-date-range-picker__time-header > .el-icon-arrow-right,
html.dark .el-month-table td .cell,
html.dark .el-year-table td .cell,
html.dark .el-picker-panel__shortcut {
    color: var(--sfp-dk-text);
}

html.dark .el-date-picker__header-label:hover,
html.dark .el-picker-panel__icon-btn:hover,
html.dark .el-picker-panel__shortcut:hover,
html.dark .el-month-table td .cell:hover,
html.dark .el-year-table td .cell:hover {
    color: var(--sfp-dk-primary);
}

html.dark .el-picker-panel__sidebar,
html.dark .el-picker-panel__footer,
html.dark .el-date-range-picker__time-picker-wrap .el-picker-panel {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
}

html.dark .el-date-table th,
html.dark .el-date-picker__header--bordered,
html.dark .el-date-picker__time-header,
html.dark .el-date-range-picker__time-header,
html.dark .el-date-range-picker__content.is-left {
    border-color: var(--sfp-dk-border);
}

html.dark .el-date-table th {
    color: var(--sfp-dk-muted);
}

html.dark .el-date-table td.prev-month,
html.dark .el-date-table td.next-month {
    color: var(--sfp-dk-disabled);
}

html.dark .el-date-table td.today span {
    color: var(--sfp-dk-primary);
}

html.dark .el-date-table td.in-range div,
html.dark .el-date-table td.in-range div:hover,
html.dark .el-date-table.is-week-mode .el-date-table__row.current div,
html.dark .el-date-table.is-week-mode .el-date-table__row:hover div,
html.dark .el-month-table td.in-range div,
html.dark .el-month-table td.in-range div:hover {
    background-color: var(--sfp-dk-primary-soft);
}

html.dark .el-date-table td.disabled div,
html.dark .el-month-table td.disabled .cell,
html.dark .el-year-table td.disabled .cell {
    background-color: var(--sfp-dk-input);
    color: var(--sfp-dk-disabled);
}

html.dark .el-picker-panel__footer .el-button--default,
html.dark .el-picker-panel__link-btn.el-button--default {
    background-color: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .el-picker-panel__link-btn.is-plain:hover {
    color: var(--sfp-dk-primary);
}

/* el-time-select (lista de horas) */
html.dark .time-select-item {
    color: var(--sfp-dk-text);
}

html.dark .time-select-item:hover {
    background-color: var(--sfp-dk-hover);
}

html.dark .time-select-item.selected:not(.disabled) {
    color: var(--sfp-dk-primary);
}

html.dark .time-select-item.disabled {
    color: var(--sfp-dk-disabled);
}

/* ------------------------------------------------------------------------
 * Element UI: hora (el-time-picker)
 * ------------------------------------------------------------------------ */
html.dark .el-time-panel__content::before,
html.dark .el-time-panel__content::after {
    border-color: var(--sfp-dk-border);
}

html.dark .el-time-panel__footer,
html.dark .el-time-range-picker__body {
    border-color: var(--sfp-dk-border);
}

html.dark .el-time-panel__btn,
html.dark .el-time-range-picker__header,
html.dark .el-time-spinner__item {
    color: var(--sfp-dk-text);
}

html.dark .el-time-panel__btn.confirm,
html.dark .el-time-spinner__item.active:not(.disabled) {
    color: var(--sfp-dk-primary);
}

html.dark .el-time-spinner__item:hover:not(.disabled):not(.active) {
    background-color: var(--sfp-dk-hover);
}

html.dark .el-time-spinner__item.disabled {
    color: var(--sfp-dk-disabled);
}

/* ------------------------------------------------------------------------
 * Element UI: menús desplegables (el-dropdown)
 * ------------------------------------------------------------------------ */
html.dark .el-dropdown-menu__item {
    color: var(--sfp-dk-text);
}

html.dark .el-dropdown-menu__item:not(.is-disabled):hover,
html.dark .el-dropdown-menu__item:focus {
    background-color: var(--sfp-dk-hover);
    color: var(--sfp-dk-text);
}

html.dark .el-dropdown-menu__item.is-disabled {
    color: var(--sfp-dk-disabled);
}

html.dark .el-dropdown-menu__item--divided {
    border-top-color: var(--sfp-dk-border);
}

html.dark .el-dropdown-menu__item--divided::before {
    background-color: var(--sfp-dk-surface);
}

/* ------------------------------------------------------------------------
 * Element UI: globos y popovers
 * ------------------------------------------------------------------------ */
html.dark .el-popover__title {
    color: var(--sfp-dk-text);
}

/* ------------------------------------------------------------------------
 * Element UI: confirmaciones y diálogos
 * ------------------------------------------------------------------------ */
html.dark .el-message-box {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    box-shadow: var(--sfp-dk-shadow);
}

html.dark .el-message-box__title,
html.dark .el-dialog__title {
    color: var(--sfp-dk-text);
}

html.dark .el-message-box__content,
html.dark .el-message-box__message,
html.dark .el-dialog__body {
    color: var(--sfp-dk-text);
}

html.dark .el-message-box__headerbtn .el-message-box__close,
html.dark .el-dialog__headerbtn .el-dialog__close {
    color: var(--sfp-dk-muted);
}

html.dark .el-message-box__btns .el-button--default:not(.el-button--primary) {
    background-color: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .el-dialog {
    background-color: var(--sfp-dk-surface);
}

/* ------------------------------------------------------------------------
 * select2 (tema por defecto y tema bootstrap)
 * ------------------------------------------------------------------------ */
html.dark .select2-container--default .select2-selection--single,
html.dark .select2-container--default .select2-selection--multiple {
    background-color: var(--sfp-dk-input);
    border-color: var(--sfp-dk-border);
}

html.dark .select2-container--default .select2-selection--single .select2-selection__rendered,
html.dark .select2-container--bootstrap .select2-selection--single .select2-selection__rendered {
    color: var(--sfp-dk-text);
}

html.dark .select2-container .select2-selection__placeholder {
    color: var(--sfp-dk-muted);
}

html.dark .select2-dropdown {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .select2-results__option {
    color: var(--sfp-dk-text);
}

html.dark .select2-container--default .select2-results__option[aria-selected="true"],
html.dark .select2-container--bootstrap .select2-results__option[aria-selected="true"] {
    background-color: var(--sfp-dk-hover);
    color: var(--sfp-dk-text);
}

html.dark .select2-container--default .select2-results__option--highlighted[aria-selected],
html.dark .select2-container--bootstrap .select2-results__option--highlighted[aria-selected] {
    background-color: var(--primary-color, #2563eb);
    color: #fff;
}

html.dark .select2-container--default .select2-results__option[aria-disabled="true"],
html.dark .select2-container--bootstrap .select2-results__option[aria-disabled="true"] {
    color: var(--sfp-dk-disabled);
}

html.dark .select2-results__group {
    color: var(--sfp-dk-muted);
}

html.dark .select2-search__field,
html.dark .select2-container--default .select2-search--dropdown .select2-search__field {
    background-color: var(--sfp-dk-input);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .select2-container--default .select2-selection--multiple .select2-selection__choice {
    background-color: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

/* ------------------------------------------------------------------------
 * bootstrap-select (si alguna pantalla lo usa)
 * ------------------------------------------------------------------------ */
html.dark .bootstrap-select .dropdown-menu {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
}

html.dark .bootstrap-select .dropdown-menu li a,
html.dark .bootstrap-select .dropdown-menu .dropdown-item {
    color: var(--sfp-dk-text);
}

html.dark .bootstrap-select .dropdown-menu li a:hover,
html.dark .bootstrap-select .dropdown-menu .dropdown-item:hover,
html.dark .bootstrap-select .dropdown-menu .dropdown-item.active {
    background-color: var(--sfp-dk-hover);
    color: var(--sfp-dk-text);
}

html.dark .bootstrap-select .dropdown-header {
    color: var(--sfp-dk-muted);
}

/* ------------------------------------------------------------------------
 * Calendarios de jQuery (bootstrap-datepicker, daterangepicker, jQuery UI)
 * ------------------------------------------------------------------------ */
html.dark .datepicker-dropdown {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .datepicker table tr td.day:hover,
html.dark .datepicker table tr td.focused,
html.dark .datepicker .datepicker-switch:hover,
html.dark .datepicker .prev:hover,
html.dark .datepicker .next:hover,
html.dark .datepicker tfoot tr th:hover {
    background-color: var(--sfp-dk-hover);
}

html.dark .datepicker table tr td.old,
html.dark .datepicker table tr td.new,
html.dark .datepicker table tr td.disabled {
    color: var(--sfp-dk-disabled);
}

html.dark .daterangepicker {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .daterangepicker::before { border-bottom-color: var(--sfp-dk-border); }
html.dark .daterangepicker::after { border-bottom-color: var(--sfp-dk-surface); }
html.dark .daterangepicker.drop-up::before { border-top-color: var(--sfp-dk-border); }
html.dark .daterangepicker.drop-up::after { border-top-color: var(--sfp-dk-surface); }

html.dark .daterangepicker .calendar-table {
    background-color: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-surface);
}

html.dark .daterangepicker td.off,
html.dark .daterangepicker td.off.in-range,
html.dark .daterangepicker td.off.start-date,
html.dark .daterangepicker td.off.end-date {
    background-color: transparent;
    color: var(--sfp-dk-disabled);
}

html.dark .daterangepicker td.available:hover,
html.dark .daterangepicker th.available:hover,
html.dark .daterangepicker .ranges li:hover {
    background-color: var(--sfp-dk-hover);
}

html.dark .daterangepicker td.in-range {
    background-color: var(--sfp-dk-primary-soft);
    color: var(--sfp-dk-text);
}

html.dark .daterangepicker .calendar-table .next span,
html.dark .daterangepicker .calendar-table .prev span {
    border-color: var(--sfp-dk-text);
}

html.dark .daterangepicker .drp-buttons,
html.dark .daterangepicker.show-ranges .drp-calendar.left,
html.dark .daterangepicker .ranges {
    border-color: var(--sfp-dk-border);
}

html.dark .ui-datepicker,
html.dark .ui-menu.ui-autocomplete {
    background: var(--sfp-dk-surface);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .ui-datepicker .ui-widget-header {
    background: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .ui-datepicker .ui-state-default,
html.dark .ui-menu.ui-autocomplete .ui-menu-item-wrapper {
    background: var(--sfp-dk-input);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .ui-datepicker .ui-state-hover,
html.dark .ui-datepicker .ui-state-active,
html.dark .ui-menu.ui-autocomplete .ui-state-active {
    background: var(--sfp-dk-hover);
    border-color: var(--sfp-dk-border);
    color: var(--sfp-dk-text);
}

html.dark .ui-datepicker .ui-state-highlight {
    border-color: var(--sfp-dk-primary);
    color: var(--sfp-dk-primary);
}