/*
 * Panel WEB2 By El NeNe - corrección global de tema claro/oscuro v0.6
 * Solo normaliza colores y contraste. No modifica lógica ni formularios.
 */

:root,
[data-bs-theme="dark"] {
  color-scheme: dark;
  --pw-surface: #111b2a;
  --pw-surface-2: #172235;
  --pw-surface-soft: rgba(255, 255, 255, 0.055);
  --pw-control-bg: #17202d;
  --pw-control-hover: #1d2939;
  --pw-text: #f4f7fb;
  --pw-muted: #a9b6cb;
  --pw-border: rgba(255, 255, 255, 0.16);
  --pw-row-hover: rgba(255, 255, 255, 0.055);
  --pw-shadow: 0 14px 35px rgba(0, 0, 0, 0.32);
  --pw-code-bg: #0c1420;
  --pw-code-text: #75f0ad;
}

[data-bs-theme="light"] {
  color-scheme: light;
  --pw-surface: #ffffff;
  --pw-surface-2: #f4f6f9;
  --pw-surface-soft: rgba(0, 0, 0, 0.035);
  --pw-control-bg: #ffffff;
  --pw-control-hover: #f8f9fb;
  --pw-text: #20252b;
  --pw-muted: #66717d;
  --pw-border: rgba(24, 35, 48, 0.2);
  --pw-row-hover: rgba(13, 110, 253, 0.055);
  --pw-shadow: 0 12px 28px rgba(16, 24, 40, 0.12);
  --pw-code-bg: #f7f8fa;
  --pw-code-text: #155d34;
}

html,
body,
.content,
.main-content-wrapper,
.header,
.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.input-group-text,
.table,
.swal2-popup {
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}

html,
body {
  color: var(--text, var(--pw-text));
}

/* Botón del sol/luna: visible y con contraste en los dos temas. */
#toggle-theme-btn {
  background-color: var(--pw-control-bg) !important;
  color: var(--pw-text) !important;
  border: 1px solid var(--pw-border) !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12) !important;
}

#toggle-theme-btn:hover,
#toggle-theme-btn:focus-visible {
  background-color: var(--pw-control-hover) !important;
  color: var(--accent, #0d6efd) !important;
  border-color: var(--accent, #0d6efd) !important;
}

.header > .d-flex > span.text-white {
  color: var(--text, var(--pw-text)) !important;
}

/* Controles: incluye selects, opciones, campos readonly y carga de archivos. */
.form-control,
.form-select,
.input-group-text,
.form-control-color,
textarea,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="date"],
input[type="datetime-local"],
input[type="file"] {
  background-color: var(--pw-control-bg) !important;
  color: var(--text, var(--pw-text)) !important;
  border-color: var(--panel-border, var(--pw-border)) !important;
}

.form-control:focus,
.form-select:focus,
textarea:focus,
input:focus {
  background-color: var(--pw-control-hover) !important;
  color: var(--text, var(--pw-text)) !important;
}

.form-control::placeholder,
textarea::placeholder,
input::placeholder {
  color: var(--muted, var(--pw-muted)) !important;
  opacity: 0.85;
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly],
input:disabled,
textarea:disabled,
select:disabled {
  background-color: var(--pw-surface-2) !important;
  color: var(--muted, var(--pw-muted)) !important;
  opacity: 1;
}

select,
option,
optgroup {
  background-color: var(--pw-control-bg) !important;
  color: var(--text, var(--pw-text)) !important;
}

input[type="file"]::file-selector-button {
  background-color: var(--pw-surface-2);
  color: var(--text, var(--pw-text));
  border: 0;
  border-right: 1px solid var(--pw-border);
}

.form-check-input {
  background-color: var(--pw-control-bg);
  border-color: var(--pw-border) !important;
}

.form-check-input:checked {
  background-color: var(--accent, #0d6efd) !important;
  border-color: var(--accent, #0d6efd) !important;
}

.form-label,
.form-text,
.text-muted,
.text-secondary {
  color: var(--muted, var(--pw-muted)) !important;
}

/* Corrige clases oscuras fijas que impedían ver campos en tema claro. */
[data-bs-theme="light"] .form-control.bg-dark,
[data-bs-theme="light"] .form-select.bg-dark,
[data-bs-theme="light"] .input-group-text.bg-dark,
[data-bs-theme="light"] .modal-content.bg-dark,
[data-bs-theme="light"] .card.bg-dark {
  background-color: var(--pw-surface) !important;
  color: var(--pw-text) !important;
  border-color: var(--pw-border) !important;
}

[data-bs-theme="light"] .form-control.text-white,
[data-bs-theme="light"] .form-select.text-white,
[data-bs-theme="light"] .input-group-text.text-white,
[data-bs-theme="light"] .modal-content.text-white,
[data-bs-theme="light"] .modal-content .text-white:not(.btn):not(.badge),
[data-bs-theme="light"] .card .text-white:not(.btn):not(.badge),
[data-bs-theme="light"] .table .text-white:not(.btn):not(.badge) {
  color: var(--pw-text) !important;
}

/* Tarjetas, modales y menús desplegables. */
.modal-content,
.modal-content.premium-modal,
.modal-content.modal-content-glass,
.dropdown-menu,
.popover,
.offcanvas,
.list-group-item,
.accordion-item,
.toast {
  background: var(--pw-surface) !important;
  color: var(--text, var(--pw-text)) !important;
  border-color: var(--panel-border, var(--pw-border)) !important;
}

.modal-header,
.modal-footer,
.dropdown-divider,
.accordion-button,
.list-group-item {
  border-color: var(--panel-border, var(--pw-border)) !important;
}

.modal-header,
.modal-body,
.modal-footer,
.modal-title,
.dropdown-item,
.popover-body,
.popover-header,
.offcanvas-title,
.accordion-button,
.accordion-body {
  color: var(--text, var(--pw-text)) !important;
}

.modal-footer[style*="background"] {
  background: var(--pw-surface-2) !important;
}

.dropdown-item:hover,
.dropdown-item:focus,
.list-group-item-action:hover,
.list-group-item-action:focus,
.accordion-button:not(.collapsed) {
  background-color: var(--pw-row-hover) !important;
  color: var(--text, var(--pw-text)) !important;
}

.btn-close {
  filter: none;
  opacity: 0.75;
}

[data-bs-theme="dark"] .btn-close,
[data-bs-theme="dark"] .btn-close-white {
  filter: invert(1) grayscale(100%) brightness(200%);
}

[data-bs-theme="light"] .btn-outline-light {
  --bs-btn-color: #343a40;
  --bs-btn-border-color: #6c757d;
  --bs-btn-hover-color: #ffffff;
  --bs-btn-hover-bg: #343a40;
  --bs-btn-hover-border-color: #343a40;
}

[data-bs-theme="light"] .btn-custom-outline-dark {
  color: #343a40 !important;
  border-color: #6c757d !important;
}

/* Tablas: textos, filas alternadas, hover y paginación coherentes. */
.table {
  --bs-table-bg: transparent;
  --bs-table-color: var(--text, var(--pw-text));
  --bs-table-border-color: var(--panel-border, var(--pw-border));
  --bs-table-striped-bg: var(--pw-surface-soft);
  --bs-table-striped-color: var(--text, var(--pw-text));
  --bs-table-hover-bg: var(--pw-row-hover);
  --bs-table-hover-color: var(--text, var(--pw-text));
  color: var(--text, var(--pw-text)) !important;
}

.table > :not(caption) > * > * {
  color: var(--text, var(--pw-text));
  border-color: var(--panel-border, var(--pw-border));
}

.table thead th {
  color: var(--muted, var(--pw-muted)) !important;
}

.page-link {
  background-color: var(--pw-control-bg);
  color: var(--text, var(--pw-text));
  border-color: var(--pw-border);
}

.page-link:hover,
.page-link:focus {
  background-color: var(--pw-control-hover);
  color: var(--accent, #0d6efd);
  border-color: var(--accent, #0d6efd);
}

.page-item.disabled .page-link {
  background-color: var(--pw-surface-2);
  color: var(--pw-muted);
}

/* Navegación y pestañas. */
.nav-tabs {
  border-color: var(--pw-border);
}

.nav-tabs .nav-link,
.nav-pills .nav-link:not(.active) {
  color: var(--muted, var(--pw-muted));
}

.nav-tabs .nav-link.active {
  background-color: var(--pw-surface);
  color: var(--text, var(--pw-text));
  border-color: var(--pw-border) var(--pw-border) var(--pw-surface);
}

/* SweetAlert, Toastr y ventanas generadas por JavaScript. */
.swal2-popup,
.swal2-title,
.swal2-html-container,
.swal2-input,
.swal2-select,
.swal2-textarea {
  color: var(--text, var(--pw-text)) !important;
}

.swal2-popup {
  background: var(--pw-surface) !important;
  border: 1px solid var(--pw-border) !important;
}

.swal2-input,
.swal2-select,
.swal2-textarea {
  background: var(--pw-control-bg) !important;
  border-color: var(--pw-border) !important;
}

#toast-container > div,
.toastify {
  color: #fff !important;
}

/* Editores y bloques técnicos. */
.json-editor-textarea,
.CodeMirror,
pre,
pre code {
  background-color: var(--pw-code-bg) !important;
  color: var(--pw-code-text) !important;
  border-color: var(--pw-border) !important;
}

.CodeMirror-gutters {
  background-color: var(--pw-surface-2) !important;
  border-color: var(--pw-border) !important;
}

.CodeMirror-linenumber {
  color: var(--pw-muted) !important;
}

code:not(pre code) {
  color: var(--accent, #0d6efd);
}

/* No cambia el fondo negro de las previsualizaciones de celulares/APK. */
.preview-frame-container,
.modal-body.bg-black,
.theme-preserve-dark {
  color-scheme: dark;
}

/* En móvil evita que los selectores nativos oculten texto por falta de contraste. */
@media (max-width: 767px) {
  .form-select,
  .form-control,
  select,
  option {
    font-size: 16px;
  }
}

/* Textos fijados como oscuros dentro de diálogos: en modo oscuro recuperan contraste. */
[data-bs-theme="dark"] .content .text-dark:not(.btn):not(.badge):not([class*="bg-"]),
[data-bs-theme="dark"] .modal-content .text-dark:not(.btn):not(.badge):not([class*="bg-"]),
[data-bs-theme="dark"] .swal2-popup .text-dark:not(.btn):not(.badge):not([class*="bg-"]) {
  color: var(--text, var(--pw-text)) !important;
}