/*!
 * tramitaZero v2 — SPDX-License-Identifier: Apache-2.0
 * Copyright 2025-2026 Roberto García Paradela and tramitaZero contributors.
 * Overrides on top of MAQINT 3.0.2 (© Xunta de Galicia, Apache-2.0 / EUPL-1.2).
 * See LICENSE and NOTICE at the repository root.
 */
/*
 * tramitaZero — Tema oscuro
 * Overrides sobre MAQINT 3.0.2. Se carga DESPUÉS de maqint/maqint.css.
 *
 * Paleta (GitHub Dark Dimmed-ish, calmada para uso prolongado):
 *   bg0  #0f1419  body profundo
 *   bg1  #171b21  cabecera, menús, pie
 *   bg2  #1c2128  paneles/cards
 *   bg3  #242a32  elevado / hover
 *   line #30363d  bordes sutiles
 *   text #e6edf3  texto principal
 *   dim  #8b949e  texto secundario
 *   acc1 #58a6ff  acento principal (azul suave)
 *   acc2 #7ee787  acento secundario (verde)
 *   warn #d29922  avisos
 *   dang #f85149  errores
 *   succ #3fb950  ok
 *   info #58a6ff  info
 */

:root {
  --tz-bg0: #0f1419;
  --tz-bg1: #171b21;
  --tz-bg2: #1c2128;
  --tz-bg3: #242a32;
  --tz-line: #30363d;
  --tz-text: #e6edf3;
  --tz-dim:  #8b949e;
  --tz-acc1: #58a6ff;
  --tz-acc1-dark: #1f6feb;
  --tz-acc2: #7ee787;
  --tz-warn: #d29922;
  --tz-dang: #f85149;
  --tz-succ: #3fb950;
  --tz-info: #58a6ff;
  color-scheme: dark;
}

html, body {
  background-color: var(--tz-bg0) !important;
  color: var(--tz-text) !important;
}

/* ===== Cabecera ===== */
#main-header {
  background-color: var(--tz-bg1) !important;
  border-bottom: 1px solid var(--tz-line);
  color: var(--tz-text);
}
#main-header a, #main-header button { color: var(--tz-text); }
#main-header .header-menu-option a:hover,
#main-header .header-menu-option a:focus { color: var(--tz-acc1); }

#header-left-menu-toggler,
#header-right-menu-toggler {
  color: var(--tz-text) !important;
  background: transparent !important;
}
#header-left-menu-toggler:hover,
#header-right-menu-toggler:hover { color: var(--tz-acc1) !important; }

/* Buscador en cabecera */
#header-search .form-control,
#header-search .form-control.has-feedback {
  background-color: var(--tz-bg2) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
  box-shadow: none !important;
}
#header-search .form-control::placeholder { color: var(--tz-dim); }

/* Marca */
#header-brand a { color: var(--tz-text) !important; text-decoration: none; }
.brand-color-second { color: var(--tz-acc2) !important; }
.brand-color-main   { color: var(--tz-acc1) !important; }
.brand-color-main-bg { background-color: var(--tz-acc1) !important; color: #0b1217 !important; }
.brand-color-second-bg { background-color: var(--tz-acc2) !important; color: #0b1217 !important; }
.brand-color-main-dark { color: var(--tz-text) !important; }
.brand-color-danger-bg { background-color: var(--tz-dang) !important; color: #fff !important; }
.brand-color-warning-bg { background-color: var(--tz-warn) !important; color: #0b1217 !important; }
.brand-color-success-bg { background-color: var(--tz-succ) !important; color: #0b1217 !important; }
.brand-color-info-bg { background-color: var(--tz-info) !important; color: #0b1217 !important; }

.lightest-grey-bg { background-color: var(--tz-bg2) !important; color: var(--tz-text) !important; }

/* ===== Menú lateral izquierdo ===== */
#left-menu {
  background-color: var(--tz-bg1) !important;
  border-right: 1px solid var(--tz-line);
}
#left-menu a {
  color: var(--tz-text) !important;
  border-left: 3px solid transparent;
}
#left-menu a:hover,
#left-menu a:focus {
  background-color: var(--tz-bg3) !important;
  color: var(--tz-acc1) !important;
  border-left-color: var(--tz-acc1);
}
#left-menu .left-submenu {
  background-color: var(--tz-bg0) !important;
}
/* Submenú Plantillas: un li con ul interno (só 3 entradas; JS/API/Probas quedan fóra) */
#left-menu .tz-plantillas-wrap {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--tz-line);
}
#left-menu .tz-plantillas-wrap .tz-submenu-heading-inner {
  padding: 0.85em 1em 0.35em 1.15em;
  font-size: 0.78em;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--tz-dim) !important;
  cursor: default;
  border-left: 3px solid transparent;
}
#left-menu .tz-plantillas-list {
  margin: 0 0 0.35em 0;
  padding: 0 0 0.4em 0;
  border-left: 1px solid var(--tz-line);
  margin-left: 0.65rem;
  background-color: transparent !important;
}
#left-menu .tz-plantillas-list > li > a {
  padding-left: 1.85rem !important;
  font-size: 0.95em;
}
#left-menu li.active > a,
#left-menu a.active {
  background-color: var(--tz-bg3) !important;
  color: var(--tz-acc2) !important;
  border-left-color: var(--tz-acc2);
}

/* Encabezados de grupo dentro del menú (tramitaZero pattern) */
#left-menu .nav-group-header {
  text-transform: uppercase;
  font-size: 0.75em;
  letter-spacing: 0.1em;
  color: var(--tz-dim);
  padding: 1em 1.25em 0.5em;
  font-weight: 600;
}

/* ===== Móvil/Tablet: MAQINT oculta el menú izquierdo por defecto =====
   En MAQINT 3.0.2, para <= 991px se aplica:
   - `#left-menu { display:none }`
   - `#header-left-menu-toggler { display:none }`
   Esto impide usar el menú izquierdo en móvil. Lo reactivamos como off-canvas. */
@media all and (max-width: 991px) {
  /* Asegurar layout del header-left en móvil (logo + toggler) */
  #main-header #header-left {
    display: flex !important;
    align-items: center;
    gap: 10px;
  }

  /* Rehabilitar el botón del menú izquierdo */
  /* MAQINT también lo colapsa vía `body[data-site-structure=nlm|nom|full] ...` */
  body[data-site-structure] #main-header #header-left #header-left-menu-toggler,
  #main-header #header-left #header-left-menu-toggler {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 1101;
    opacity: 1 !important;
    width: 44px;
    height: 44px;
    max-width: none !important;
    max-height: none !important;
    min-width: 44px;
    min-height: 44px;
    padding: 0;
    margin-left: 6px;
    border: 1px solid var(--tz-line);
    border-radius: 12px;
    background-color: var(--tz-bg2) !important;
    pointer-events: auto !important;
  }

  #main-header #header-left #header-left-menu-toggler:hover,
  #main-header #header-left #header-left-menu-toggler:focus {
    border-color: var(--tz-acc1);
  }

  /* Menú izquierdo como drawer */
  /* MAQINT puede colapsar el menú por `data-site-structure`; lo anulamos también */
  body[data-site-structure] #main-wrapper .main-container #left-menu,
  #main-wrapper .main-container #left-menu {
    display: block !important;
    position: fixed;
    top: 92px; /* altura del header en <= 991px (MAQINT) */
    left: 0;
    bottom: 0;
    width: min(85vw, 320px);
    max-width: 320px;
    margin-top: 0;
    z-index: 1100;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    opacity: 1 !important;
    padding: initial;
    transform: translateX(0);
    transition: transform 0.2s cubic-bezier(0, 0, 0.1, 1);
  }

  /* Estado cerrado (MAQINT).
     IMPORTANTE: debe ganar también a
     `body[data-site-structure] … #left-menu { transform: translateX(0) }`
     (misma capa de IDs pero mayor especificidad por `body[…]`). */
  body[data-site-structure] #main-wrapper .main-container #left-menu.menu-hidden,
  #main-wrapper .main-container #left-menu.menu-hidden {
    transform: translateX(-105%) !important;
    pointer-events: none;
  }

  body[data-site-structure] #main-wrapper .main-container #left-menu:not(.menu-hidden),
  #main-wrapper .main-container #left-menu:not(.menu-hidden) {
    pointer-events: auto;
  }

  /* Scrim: capa semitransparente para cerrar tocando fuera */
  #tz-leftmenu-scrim {
    display: none;
    position: fixed;
    top: 0;
    /* No cubrir el drawer: sólo el área "body" a la derecha */
    left: min(85vw, 320px);
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.55);
    z-index: 1099; /* justo debajo del menú (1100), por encima del contenido */
    pointer-events: auto;
  }
  #tz-leftmenu-scrim.is-open {
    display: block;
  }
  /* Fallback robusto: si el JS no llega a marcar .is-open, usamos la clase del body */
  body.tz-leftmenu-open #tz-leftmenu-scrim {
    display: block;
  }

  /* Para que el menú no "tape" el contenido, desplazamos el body cuando está abierto */
  body.tz-leftmenu-open #main-wrapper .main-container #main-content {
    transform: translateX(min(85vw, 320px));
    transition: transform 0.2s cubic-bezier(0, 0, 0.1, 1);
  }
  body.tz-leftmenu-open #main-wrapper #main-header {
    transform: translateX(min(85vw, 320px));
    transition: transform 0.2s cubic-bezier(0, 0, 0.1, 1);
  }
}

/* ===== Menú lateral derecho ===== */
#right-menu {
  background-color: var(--tz-bg1) !important;
  border-left: 1px solid var(--tz-line);
  color: var(--tz-text);
}
#right-menu .menu-section-header {
  background-color: var(--tz-bg2) !important;
  color: var(--tz-acc1) !important;
  border-bottom: 1px solid var(--tz-line);
}
#right-menu a { color: var(--tz-text) !important; }
#right-menu a:hover { color: var(--tz-acc1) !important; }

/* ===== Menú de ferramentas ===== */
#tool-menu .menu-button {
  background-color: var(--tz-bg2) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line);
}
#tool-menu .menu-button:hover { color: var(--tz-acc1) !important; }

/* ===== Dropdowns ===== */
.dropdown-menu {
  background-color: var(--tz-bg2) !important;
  border: 1px solid var(--tz-line) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}
.dropdown-menu > li > a {
  color: var(--tz-text) !important;
}
.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
  background-color: var(--tz-bg3) !important;
  color: var(--tz-acc1) !important;
}
.dropdown-menu .divider { background-color: var(--tz-line) !important; }

/* ===== Contenido principal =====
   MAQINT aplica `#main-wrapper .main-container #main-content .page .page-content { background:#fff }`
   con especificidad (0,0,3,2). Igualamos/superamos esa especificidad para pintar el panel en oscuro. */
#main-content, .main-container { background-color: var(--tz-bg0) !important; }
.page { background-color: var(--tz-bg0) !important; color: var(--tz-text) !important; }

#main-wrapper .main-container #main-content .page .page-content,
.page .page-content,
.page-content {
  background-color: var(--tz-bg1) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35) !important;
}

.page-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--tz-line);
  color: var(--tz-text);
}
.breadcrumb {
  background-color: transparent !important;
  color: var(--tz-dim) !important;
}
.breadcrumb > li { color: var(--tz-dim) !important; }
.breadcrumb > li + li::before { color: var(--tz-dim); }
.breadcrumb > li > a { color: var(--tz-acc1) !important; }
.breadcrumb > .active { color: var(--tz-text) !important; }

/* Separador */
.separator-border { border-color: var(--tz-line) !important; }

/* Tipografía */
h1, h2, h3, h4, h5, h6 { color: var(--tz-text); }
a { color: var(--tz-acc1); }
a:hover, a:focus { color: var(--tz-acc2); }
small, .text-muted, .small { color: var(--tz-dim) !important; }

/* ===== Paneles y cards ===== */
.panel, .card, .well {
  background-color: var(--tz-bg2) !important;
  border: 1px solid var(--tz-line) !important;
  color: var(--tz-text) !important;
}
.panel-heading, .card-header {
  background-color: var(--tz-bg3) !important;
  border-bottom: 1px solid var(--tz-line) !important;
  color: var(--tz-text) !important;
}

/* ===== Formularios ===== */
.form-control,
input[type="text"], input[type="search"], input[type="email"], input[type="password"],
input[type="number"], input[type="url"], textarea, select {
  background-color: var(--tz-bg2) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
  box-shadow: none !important;
}
.form-control::placeholder { color: var(--tz-dim); }
.form-control:focus {
  border-color: var(--tz-acc1) !important;
  box-shadow: 0 0 0 2px rgba(88, 166, 255, 0.25) !important;
  background-color: var(--tz-bg3) !important;
}
label, .control-label { color: var(--tz-text) !important; }

/* ===== Botones ===== */
.btn-default {
  background-color: var(--tz-bg3) !important;
  color: var(--tz-text) !important;
  border: 1px solid var(--tz-line) !important;
}
.btn-default:hover { background-color: var(--tz-bg2) !important; color: var(--tz-acc1) !important; }
.btn-primary {
  background-color: var(--tz-acc1) !important;
  color: #0b1217 !important;
  border-color: var(--tz-acc1-dark) !important;
}
.btn-primary:hover { background-color: var(--tz-acc1-dark) !important; color: #fff !important; }
.btn-success { background-color: var(--tz-succ) !important; color: #0b1217 !important; border-color: var(--tz-succ) !important; }
.btn-danger  { background-color: var(--tz-dang) !important; color: #fff !important; border-color: var(--tz-dang) !important; }
.btn-warning { background-color: var(--tz-warn) !important; color: #0b1217 !important; border-color: var(--tz-warn) !important; }
.btn-info    { background-color: var(--tz-info) !important; color: #0b1217 !important; border-color: var(--tz-info) !important; }

/* ===== Tablas ===== */
table { color: var(--tz-text) !important; }
.table, .table-bordered { background-color: transparent !important; }
.table > thead > tr > th {
  background-color: var(--tz-bg3) !important;
  border-bottom: 2px solid var(--tz-line) !important;
  color: var(--tz-text) !important;
}
.table > tbody > tr > td,
.table > tbody > tr > th,
.table > tfoot > tr > td {
  background-color: var(--tz-bg2) !important;
  border-top: 1px solid var(--tz-line) !important;
  color: var(--tz-text) !important;
}
.table-hover > tbody > tr:hover > td { background-color: var(--tz-bg3) !important; }
.table-striped > tbody > tr:nth-of-type(odd) > td { background-color: var(--tz-bg1) !important; }

/* ===== Pie ===== */
#pre-footer, #main-footer {
  background-color: var(--tz-bg1) !important;
  border-top: 1px solid var(--tz-line) !important;
  color: var(--tz-dim);
}
#main-footer a { color: var(--tz-acc1) !important; }
#footer-brand img { filter: brightness(0.9) contrast(1.1); }

/* ===== Visor de entorno ===== */
#env-display {
  background-color: rgba(88, 166, 255, 0.12) !important;
  color: var(--tz-acc1) !important;
  border-bottom: 1px solid var(--tz-line);
}

/* ===== Alertas (Bootstrap) ===== */
.alert-info    { background-color: rgba(88, 166, 255, 0.12) !important; color: var(--tz-info) !important; border-color: var(--tz-info) !important; }
.alert-success { background-color: rgba(63, 185, 80, 0.12) !important;  color: var(--tz-succ) !important; border-color: var(--tz-succ) !important; }
.alert-warning { background-color: rgba(210, 153, 34, 0.12) !important; color: var(--tz-warn) !important; border-color: var(--tz-warn) !important; }
.alert-danger  { background-color: rgba(248, 81, 73, 0.12) !important;  color: var(--tz-dang) !important; border-color: var(--tz-dang) !important; }

/* ===== Badges / notifications ===== */
.badge, .notification {
  background-color: var(--tz-acc1) !important;
  color: #0b1217 !important;
}

/* ===== Scroll-to-top ===== */
#back-to-top {
  background-color: var(--tz-bg3) !important;
  color: var(--tz-acc1) !important;
  border: 1px solid var(--tz-line);
}
#back-to-top:hover { background-color: var(--tz-acc1) !important; color: #0b1217 !important; }

/* ===== Loader ===== */
#page-loader { background-color: var(--tz-bg0) !important; }
.loader-ripple > div { border-color: var(--tz-acc1) !important; }

/* ===== Código (pre/code) ===== */
pre, code, kbd, samp {
  background-color: var(--tz-bg2) !important;
  color: var(--tz-acc2) !important;
  border: 1px solid var(--tz-line);
  border-radius: 4px;
}
pre { padding: 0.75em 1em; overflow-x: auto; }

/* ===== Selección ===== */
::selection { background-color: rgba(88, 166, 255, 0.35); color: var(--tz-text); }

/* ===== Imágenes de logos (invertir fondos blancos sobre oscuro) ===== */
#footer-brand img[src*="logo-xunta"],
#pre-footer-right img[src*="logo-feder"] {
  filter: invert(0.92) hue-rotate(180deg) saturate(0.1) brightness(1.1);
}

/* ===== Estado focus accesible ===== */
:focus-visible {
  outline: 2px solid var(--tz-acc1) !important;
  outline-offset: 2px !important;
}