/**
 * Tema claro/oscuro global (html.dark).
 * Claro: texto oscuro sobre fondos claros.
 * Oscuro: texto claro sobre fondos oscuros.
 */
:root {
    --app-bg: #f9fafb;
    --app-fg: #111827;
    --app-fg-muted: #4b5563;
    --app-fg-subtle: #6b7280;
    --app-surface: #ffffff;
    --app-surface-muted: #f3f4f6;
    --app-border: #e5e7eb;
    --app-border-strong: #d1d5db;
    --app-link: #2563eb;
    --app-input-bg: #ffffff;
    --app-input-fg: #111827;
}

html.dark {
    --app-bg: #0f172a;
    --app-fg: #f1f5f9;
    --app-fg-muted: #cbd5e1;
    --app-fg-subtle: #94a3b8;
    --app-surface: #1e293b;
    --app-surface-muted: #334155;
    --app-border: #334155;
    --app-border-strong: #475569;
    --app-link: #60a5fa;
    --app-input-bg: #1e293b;
    --app-input-fg: #e2e8f0;
}

body {
    color: var(--app-fg);
    background-color: var(--app-bg);
}

main {
    color: var(--app-fg);
}

/* —— Superficies —— */
html.dark .bg-white {
    background-color: var(--app-surface) !important;
    color: var(--app-fg);
}

html.dark .bg-gray-50 {
    background-color: var(--app-bg) !important;
}

html.dark .bg-gray-100 {
    background-color: var(--app-surface-muted) !important;
}

html.dark .bg-blue-50 { background-color: #172554 !important; }
html.dark .bg-green-50 { background-color: #14532d !important; }
html.dark .bg-purple-50 { background-color: #581c87 !important; }
html.dark .bg-indigo-50 { background-color: #312e81 !important; }
html.dark .bg-yellow-50 { background-color: #713f12 !important; }
html.dark .bg-teal-50 { background-color: #134e4a !important; }
html.dark .bg-amber-50 { background-color: #78350f !important; }
html.dark .bg-red-50 { background-color: #7f1d1d !important; }
html.dark .bg-sky-50 { background-color: #0c4a6e !important; }
html.dark .bg-orange-50 { background-color: #7c2d12 !important; }

html.dark .hover\:bg-gray-50:hover,
html.dark tr.hover\:bg-gray-50:hover {
    background-color: #334155 !important;
}

html.dark .hover\:bg-gray-100:hover {
    background-color: #475569 !important;
}

html.dark .hover\:bg-blue-100:hover { background-color: #1e3a8a !important; }
html.dark .hover\:bg-green-100:hover { background-color: #166534 !important; }
html.dark .hover\:bg-teal-100:hover { background-color: #115e59 !important; }
html.dark .hover\:bg-amber-100:hover { background-color: #92400e !important; }

/* —— Texto (grises) —— */
html.dark .text-gray-900 { color: #f8fafc !important; }
html.dark .text-gray-800 { color: #f1f5f9 !important; }
html.dark .text-gray-700 { color: #e2e8f0 !important; }
html.dark .text-gray-600 { color: #cbd5e1 !important; }
html.dark .text-gray-500 { color: #94a3b8 !important; }
html.dark .text-gray-400 { color: #94a3b8 !important; }
html.dark .text-gray-300 { color: #cbd5e1 !important; }
html.dark .text-gray-200 { color: #e2e8f0 !important; }
html.dark .text-gray-100 { color: #f1f5f9 !important; }
html.dark .text-black { color: #f8fafc !important; }

html.dark .text-slate-600,
html.dark .text-slate-700,
html.dark .text-slate-800,
html.dark .text-slate-900 { color: var(--app-fg) !important; }

/* —— Acentos —— */
html.dark .text-blue-600 { color: #60a5fa !important; }
html.dark .text-blue-700,
html.dark .text-blue-800,
html.dark .text-blue-900 { color: #93c5fd !important; }
html.dark .text-green-600 { color: #4ade80 !important; }
html.dark .text-green-700,
html.dark .text-green-800 { color: #86efac !important; }
html.dark .text-red-600 { color: #f87171 !important; }
html.dark .text-red-700,
html.dark .text-red-800 { color: #fca5a5 !important; }
html.dark .text-orange-600 { color: #fb923c !important; }
html.dark .text-amber-600,
html.dark .text-amber-700,
html.dark .text-amber-800,
html.dark .text-amber-900 { color: #fcd34d !important; }
html.dark .text-teal-600,
html.dark .text-teal-700,
html.dark .text-teal-800 { color: #5eead4 !important; }
html.dark .text-purple-600 { color: #c084fc !important; }
html.dark .text-sky-900 { color: #7dd3fc !important; }

/* —— Badges / pills —— */
html.dark .bg-green-100 { background-color: #14532d !important; }
html.dark .bg-amber-100 { background-color: #78350f !important; }
html.dark .bg-gray-100.badge,
html.dark span.bg-gray-100 { background-color: #374151 !important; }
html.dark .bg-sky-100 { background-color: #0c4a6e !important; }
html.dark .bg-red-50 { color: #fecaca; }
html.dark .text-red-800 { color: #fecaca !important; }
html.dark .bg-green-50.text-green-800,
html.dark #usuarios-admin-msg.bg-green-50 { color: #86efac !important; }

/* —— Tablas —— */
html.dark td,
html.dark th {
    color: var(--app-fg);
}

html.dark thead.bg-gray-50,
html.dark thead.bg-gray-50 th {
    background-color: var(--app-surface-muted) !important;
    color: var(--app-fg-muted) !important;
}

html.dark tbody.bg-white,
html.dark tbody.divide-y {
    background-color: var(--app-surface) !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]),
html.dark .divide-gray-200 > :not([hidden]) ~ :not([hidden]) {
    border-color: var(--app-border);
}

html.dark .border-gray-100,
html.dark .border-gray-200,
html.dark .border-gray-300 {
    border-color: var(--app-border) !important;
}

/* —— Formularios —— */
html.dark input,
html.dark textarea,
html.dark select {
    background-color: var(--app-input-bg);
    border-color: var(--app-border-strong);
    color: var(--app-input-fg);
}

html.dark input::placeholder,
html.dark textarea::placeholder {
    color: #64748b;
}

html.dark label,
html.dark .font-medium.text-gray-700 {
    color: var(--app-fg-muted);
}

/* —— Dropdown / menú usuario —— */
html.dark #user-dropdown {
    background-color: var(--app-surface);
    color: var(--app-fg);
}

html.dark #user-dropdown button:hover {
    background-color: var(--app-surface-muted);
}

/* —— FAB móvil —— */
html.dark .fab-menu {
    background: var(--app-surface);
    border: 1px solid var(--app-border);
}

html.dark .fab-menu a,
html.dark .fab-menu button {
    color: var(--app-fg);
}

html.dark .fab-menu a:hover,
html.dark .fab-menu button:hover {
    background: var(--app-surface-muted);
}

/* —— Pestañas (Analizador IA y similares) —— */
.nav-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem;
    border-bottom: 2px solid var(--app-border);
    margin: 0;
    padding: 0;
    list-style: none;
}

.nav-tabs .nav-item {
    list-style: none;
}

.nav-tabs .nav-link {
    display: inline-flex;
    align-items: center;
    padding: 0.65rem 1rem;
    margin-bottom: -2px;
    border: none;
    border-bottom: 2px solid transparent;
    background: transparent;
    color: var(--app-fg-muted);
    font-weight: 500;
    font-size: 0.95rem;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s;
}

.nav-tabs .nav-link:hover {
    color: var(--app-fg);
}

.nav-tabs .nav-link.active {
    color: var(--app-link);
    border-bottom-color: var(--app-link);
}

html.dark .nav-tabs .nav-link {
    color: var(--app-fg-subtle);
}

html.dark .nav-tabs .nav-link:hover {
    color: var(--app-fg);
}

html.dark .nav-tabs .nav-link.active {
    color: #93c5fd;
    border-bottom-color: #60a5fa;
}

.tab-content {
    color: var(--app-fg);
}

/* —— Utilidad: texto legible forzado en tablas/listados —— */
.app-readable {
    color: var(--app-fg);
}

html:not(.dark) .app-readable-muted {
    color: #4b5563;
}

html.dark .app-readable-muted {
    color: #94a3b8;
}

/* —— Analizador IA / utilidades tipo Bootstrap —— */
.ollama-container h1,
.ollama-container .h2,
.ollama-container .tab-content {
    color: var(--app-fg);
}

.text-muted {
    color: var(--app-fg-subtle) !important;
}

.form-label {
    color: var(--app-fg-muted);
}

.form-select,
.form-control {
    background-color: var(--app-input-bg);
    border: 1px solid var(--app-border-strong);
    color: var(--app-input-fg);
}

.form-check-label {
    color: var(--app-fg);
}

.form-text {
    color: var(--app-fg-subtle);
}

.bg-light {
    background-color: var(--app-surface-muted) !important;
}

.btn-outline-secondary {
    color: var(--app-fg-muted);
    border: 1px solid var(--app-border-strong);
    background: transparent;
}

.btn-outline-secondary:hover {
    background: var(--app-surface-muted);
    color: var(--app-fg);
}

.btn-outline-primary {
    color: var(--app-link);
    border: 1px solid var(--app-link);
    background: transparent;
}

.btn-light {
    background: var(--app-surface-muted);
    color: var(--app-fg);
    border: 1px solid var(--app-border);
}

.btn-link {
    color: var(--app-link);
}

html.dark .btn-outline-primary:hover {
    background: #1e3a8a;
    color: #e2e8f0;
}

/* —— Modales dashboard —— */
html.dark .modal-cancel:hover {
    background-color: var(--app-surface-muted) !important;
}

html.dark #usuarios-admin-msg.bg-red-50 {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}

/* —— Mapas de lugar (Leaflet): redimensionar desde esquina inferior derecha —— */
.mapa-lugar-wrap {
    position: relative;
    display: block;
    min-height: 9rem;
    min-width: 12rem;
    max-width: 100%;
    box-sizing: border-box;
    overflow: visible;
}

/* Menú organismo/dependencia: por encima de la barra sticky del wizard (z-40). */
.inf-org-dep-panel {
    z-index: 50;
}
.inf-org-dep-panel.inf-org-dep-panel-up {
    top: auto;
    bottom: 100%;
    margin-top: 0;
    margin-bottom: 0.25rem;
}

.mapa-lugar-wrap > .leaflet-container,
.mapa-lugar-wrap > .evt-map,
.mapa-lugar-wrap > .ident-mapa-view,
.mapa-lugar-wrap > #importMapa {
    width: 100% !important;
    height: 100% !important;
    min-height: 9rem;
}

/* Control Leaflet (esquina inferior derecha, encima de atribución OSM) */
.leaflet-bottom.leaflet-right .mapa-lugar-resize-handle {
    margin: 0 4px 4px 0 !important;
    clear: both;
}

.mapa-lugar-resize-handle {
    width: 32px !important;
    height: 32px !important;
    padding: 0 !important;
    margin: 0;
    cursor: nwse-resize;
    touch-action: none;
    pointer-events: auto;
    display: flex !important;
    align-items: center;
    justify-content: center;
    border-radius: 6px !important;
    background: #ffffff !important;
    border: 2px solid #2563eb !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.35);
    line-height: 1;
}

.mapa-lugar-resize-grip {
    display: block;
    width: 12px;
    height: 12px;
    border-right: 3px solid #2563eb;
    border-bottom: 3px solid #2563eb;
}

.mapa-lugar-resize-handle:hover,
.mapa-lugar-resize-handle--active {
    background: #eff6ff !important;
    border-color: #1d4ed8 !important;
    box-shadow: 0 2px 10px rgba(29, 78, 216, 0.45);
}

html.dark .mapa-lugar-resize-handle {
    background: #1e293b !important;
    border-color: #60a5fa !important;
}

html.dark .mapa-lugar-resize-grip {
    border-color: #60a5fa;
}

/* Tamaño inicial del mapa en import conste: 50% ancho, proporción 2:1 (solo antes de Leaflet) */
#importMapa.mapa-lugar-medio:not(.leaflet-container) {
    width: 50%;
    max-width: 100%;
    aspect-ratio: 2 / 1;
    min-height: 10rem;
}