/**
 * thor-skin.css — [F2 2026] Cambio de look total (capa de skin)
 *
 * Capa de overlay sobre el CSS heredado (~1,2 MB): se carga LA ÚLTIMA en cada
 * página y pisa los estilos clave con los tokens de thor-tokens.css.
 * Usa !important a propósito: dark-mode.css también lo usa en todo, y a igual
 * especificidad + important gana el último archivo cargado (este).
 *
 * Marcha atrás: quitar el <link> de thor-skin.css y todo vuelve al look anterior.
 * NO toca funcionalidad, solo presentación.
 */

/* ============================================================
   1) BASE — fondo plano, sin gradiente azul
   ============================================================ */

body {
  background: var(--thor-bg) !important;
  color: var(--thor-text) !important;
  font-family: var(--thor-font) !important;
}

[data-theme="dark"] body {
  background: var(--thor-bg) !important;
  color: var(--thor-text) !important;
}

/* ============================================================
   2) HEADER del panel — superficie limpia con línea de marca
   ============================================================ */

body>header {
  background: var(--thor-surface) !important;
  color: var(--thor-text) !important;
  border-bottom: 3px solid var(--thor-brand) !important;
  box-shadow: var(--thor-shadow-sm) !important;
  padding: 16px 40px 16px 56px !important;
}

/* Fuera el patrón de rayas diagonales */
body>header::before {
  display: none !important;
}

/* H1 sobrio: color de marca sólido, sin gradiente de texto ni sombras */
header h1 {
  font-size: var(--thor-fs-2xl) !important;
  font-weight: var(--thor-fw-bold) !important;
  letter-spacing: -0.02em !important;
  color: var(--thor-brand) !important;
  background-image: none !important;
  -webkit-background-clip: initial !important;
  background-clip: initial !important;
  -webkit-text-fill-color: currentColor !important;
  text-shadow: none !important;
}

/* Sin subrayado decorativo */
header h1::after {
  display: none !important;
}

/* Usuario conectado: chip discreto de superficie */
.user-info {
  top: 12px !important;
  right: 24px !important;
  background: var(--thor-surface-2) !important;
  color: var(--thor-text-2) !important;
  border: 1px solid var(--thor-border) !important;
  border-radius: var(--thor-radius-full) !important;
  padding: 8px 16px !important;
  font-size: var(--thor-fs-sm) !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
}

.user-info:hover {
  transform: none !important;
  background: var(--thor-surface-hover) !important;
  box-shadow: var(--thor-shadow-sm) !important;
}

/* Hamburguesa tokenizada */
.hamburger {
  top: 14px !important;
  color: var(--thor-brand) !important;
  background: var(--thor-brand-soft, rgba(255, 102, 0, 0.10)) !important;
  border: 1px solid var(--thor-border) !important;
  border-radius: var(--thor-radius, 10px) !important;
  backdrop-filter: none !important;
}

[data-theme="dark"] body>header {
  background: var(--thor-surface) !important;
  border-bottom-color: var(--thor-brand) !important;
}

[data-theme="dark"] header h1 {
  color: var(--thor-brand) !important;
}

[data-theme="dark"] .user-info {
  background: var(--thor-surface-2) !important;
  color: var(--thor-text-2) !important;
  border-color: var(--thor-border) !important;
}

/* ============================================================
   3) SIDEBAR — oscuro en AMBOS temas (coherente con las
      pestañas de workspace de thor-tokens.css)
   ============================================================ */

nav.sidebar {
  background: var(--thor-sidebar-bg) !important;
  border-right: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--thor-sidebar-text) !important;
}

[data-theme="dark"] nav.sidebar,
[data-theme="dark"] .sidebar {
  background: var(--thor-sidebar-bg) !important;
  color: var(--thor-sidebar-text) !important;
}

nav.sidebar .sidebar-title {
  color: #fff !important;
  font-weight: var(--thor-fw-bold) !important;
}

nav.sidebar .sidebar-close {
  color: var(--thor-sidebar-text) !important;
}

nav.sidebar .sidebar-close:hover {
  background: rgba(255, 255, 255, 0.10) !important;
}

/* Ítems del menú: planos, texto claro, sin "tarjetas" blancas */
nav.sidebar ul.menu li,
[data-theme="dark"] nav.sidebar ul.menu li {
  background: transparent !important;
  border: 1px solid transparent !important;
  border-left: 3px solid transparent !important;
  border-radius: var(--thor-radius, 8px) !important;
  color: var(--thor-sidebar-text) !important;
  font-weight: var(--thor-fw-medium, 500) !important;
  padding: 10px 12px !important;
  margin-bottom: 2px !important;
  box-shadow: none !important;
  transition: background var(--thor-transition, .16s), color var(--thor-transition, .16s) !important;
}

nav.sidebar ul.menu li:hover,
[data-theme="dark"] nav.sidebar ul.menu li:hover {
  background: rgba(255, 255, 255, 0.07) !important;
  color: #fff !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Activo: acento naranja con borde izquierdo */
nav.sidebar ul.menu li.active,
[data-theme="dark"] nav.sidebar ul.menu li.active {
  background: var(--thor-sidebar-item-active, rgba(255, 102, 0, 0.18)) !important;
  border-left: 3px solid var(--thor-brand) !important;
  border-top-color: transparent !important;
  border-right-color: transparent !important;
  border-bottom-color: transparent !important;
  color: #fff !important;
  font-weight: var(--thor-fw-semibold, 600) !important;
  box-shadow: none !important;
  transform: none !important;
}

/* Cabeceras de grupo del shell (F0) */
nav.sidebar .menu-group-header,
nav.sidebar .thor-shell-header {
  color: rgba(203, 213, 225, 0.55) !important;
  font-size: var(--thor-fs-xs, 11px) !important;
  font-weight: var(--thor-fw-semibold, 600) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
  padding: 14px 12px 4px !important;
  background: transparent !important;
  border: none !important;
}

/* Scrollbar del menú acorde al fondo oscuro */
nav.sidebar ul.menu {
  scrollbar-color: rgba(255, 255, 255, 0.25) transparent !important;
}

nav.sidebar ul.menu::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.25) !important;
}

/* Logout dentro del sidebar */
nav.sidebar #logoutBtn {
  background: rgba(255, 255, 255, 0.08) !important;
  color: var(--thor-sidebar-text) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: var(--thor-radius, 8px) !important;
}

nav.sidebar #logoutBtn:hover {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #fff !important;
}

/* ============================================================
   4) CONTENIDO — secciones, tarjetas, modales, formularios
   ============================================================ */

.section {
  background: transparent !important;
}

.modal-content {
  background: var(--thor-surface) !important;
  color: var(--thor-text) !important;
  border: 1px solid var(--thor-border) !important;
  border-radius: var(--thor-radius-lg, 14px) !important;
  box-shadow: var(--thor-shadow-lg) !important;
}

[data-theme="dark"] .modal-content {
  background: var(--thor-surface) !important;
  color: var(--thor-text) !important;
  border-color: var(--thor-border) !important;
}

/* Foco de formularios: marca, no azul heredado */
input:focus,
textarea:focus,
select:focus,
.form-control:focus {
  border-color: var(--thor-brand) !important;
  outline: none !important;
  box-shadow: 0 0 0 3px var(--thor-brand-soft, rgba(255, 102, 0, 0.14)) !important;
}

[data-theme="dark"] input:focus,
[data-theme="dark"] textarea:focus,
[data-theme="dark"] select:focus {
  border-color: var(--thor-brand) !important;
  box-shadow: 0 0 0 3px rgba(255, 102, 0, 0.22) !important;
}

/* ============================================================
   5) PÁGINAS "ISLA" (Huginn) — topbar común + remap de acentos
   ============================================================ */

/* thor-topbar.js pinta estilos inline (#0F4761): solo !important los pisa */
#thorTopbar {
  background: var(--thor-sidebar-bg) !important;
  border-bottom: 2px solid var(--thor-brand) !important;
  box-shadow: var(--thor-shadow-sm) !important;
}

/* Los sistemas de variables propios de las islas pasan a beber de los tokens */
:root {
  --crm-accent: var(--thor-brand) !important;
  --crm-bg: var(--thor-bg) !important;
  --crm-card: var(--thor-surface) !important;
  --crm-border: var(--thor-border) !important;
  --crm-text: var(--thor-text) !important;
  --crm-text2: var(--thor-text-2) !important;
  --crm-green: var(--thor-success) !important;
  --crm-red: var(--thor-danger) !important;
  --crm-yellow: var(--thor-warning) !important;
  --crm-blue: var(--thor-accent) !important;

  --ag-accent: var(--thor-brand) !important;
  --ag-bg: var(--thor-bg) !important;
  --ag-card: var(--thor-surface) !important;
  --ag-border: var(--thor-border) !important;
  --ag-text: var(--thor-text) !important;
  --ag-text2: var(--thor-text-2) !important;
  --ag-green: var(--thor-success) !important;
  --ag-red: var(--thor-danger) !important;
  --ag-yellow: var(--thor-warning) !important;
}

/* ============================================================
   6) [F3 2026] PANTALLAS GRANDES — remap de sistemas de variables
   Cada pantalla grande tiene su propio sistema de vars en :root;
   las hacemos beber de los tokens con !important (gana siempre).
   ============================================================ */

:root {
  /* Resultados de búsqueda (search-results-apple.css, --sr-*) */
  --sr-bg: var(--thor-bg) !important;
  --sr-card: var(--thor-surface) !important;
  --sr-border: var(--thor-border) !important;
  --sr-border-2: var(--thor-border-strong) !important;
  --sr-text: var(--thor-text) !important;
  --sr-text-2: var(--thor-text-2) !important;
  --sr-text-3: var(--thor-text-3) !important;
  --sr-blue: var(--thor-accent) !important;
  --sr-accent: var(--thor-brand) !important;
  --sr-green: var(--thor-success) !important;
  --sr-red: var(--thor-danger) !important;
  --sr-amber: var(--thor-warning) !important;
  --sr-font: var(--thor-font) !important;

  /* Kanban (kanban-apple-redesign.css, --ka-*).
     OJO: --ka-estado NO se toca — los colores por fase son semánticos */
  --ka-bg: var(--thor-bg) !important;
  --ka-col-bg: var(--thor-surface-2) !important;
  --ka-card: var(--thor-surface) !important;
  --ka-border: var(--thor-border) !important;
  --ka-border-2: var(--thor-border-strong) !important;
  --ka-text: var(--thor-text) !important;
  --ka-text-2: var(--thor-text-2) !important;
  --ka-text-3: var(--thor-text-3) !important;
  --ka-accent: var(--thor-brand) !important;
  --ka-blue: var(--thor-accent) !important;
  --ka-green: var(--thor-success) !important;
  --ka-red: var(--thor-danger) !important;
  --ka-amber: var(--thor-warning) !important;
  --ka-font: var(--thor-font) !important;

  /* CRM tema Salesforce (huginn-salesforce.css, --sf-*): el azul
     Lightning #0176d3 pasa a ser la marca Thor */
  --sf-brand: var(--thor-brand) !important;
  --sf-brand-dark: var(--thor-brand-dark) !important;
  --sf-hover: var(--thor-surface-hover) !important;
  --sf-th-bg: var(--thor-surface-2) !important;

  /* Dashboard Huginn (dashboard-pro.css, --sc-*) */
  --sc-bg: var(--thor-bg) !important;
  --sc-surface: var(--thor-surface) !important;
  --sc-surface2: var(--thor-surface-2) !important;
  --sc-border: var(--thor-border) !important;
  --sc-border2: var(--thor-border-strong) !important;
  --sc-text: var(--thor-text) !important;
  --sc-text2: var(--thor-text-2) !important;
  --sc-text3: var(--thor-text-3) !important;
  --sc-accent: var(--thor-brand) !important;
  --sc-accent2: var(--thor-brand-light) !important;
  --sc-accent-bg: var(--thor-brand-soft) !important;
  --sc-blue: var(--thor-accent) !important;
  --sc-blue-bg: var(--thor-accent-soft) !important;
  --sc-green: var(--thor-success) !important;
  --sc-green-bg: var(--thor-success-soft) !important;
  --sc-red: var(--thor-danger) !important;
  --sc-red-bg: var(--thor-danger-soft) !important;
  --sc-amber: var(--thor-warning) !important;
  --sc-amber-bg: var(--thor-warning-soft) !important;
}

/* ============================================================
   7) [F3 2026] TABLAS — fuera gradientes azules, cabecera plana
   ============================================================ */

.estado-table thead,
table thead {
  background: var(--thor-surface-2) !important;
  color: var(--thor-text-2) !important;
}

.estado-table th,
table thead th,
#tablaUsuarios th,
#contenidoResumenPliego th {
  background: var(--thor-surface-2) !important;
  color: var(--thor-text-2) !important;
  font-size: var(--thor-fs-xs, 12px) !important;
  font-weight: var(--thor-fw-semibold, 600) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
  border-bottom: 2px solid var(--thor-border-strong) !important;
  text-shadow: none !important;
}

.estado-table tbody tr:hover,
table tbody tr:hover {
  background: var(--thor-surface-hover) !important;
}

.estado-table .abrir-btn {
  background: var(--thor-brand) !important;
  color: #fff !important;
  border: none !important;
  border-radius: var(--thor-radius-sm, 8px) !important;
}

.estado-table .abrir-btn:hover {
  background: var(--thor-brand-dark) !important;
}

[data-theme="dark"] table thead,
[data-theme="dark"] table thead th,
[data-theme="dark"] .estado-table thead,
[data-theme="dark"] .estado-table th {
  background: var(--thor-surface-2) !important;
  color: var(--thor-text-2) !important;
  border-color: var(--thor-border-strong) !important;
}

[data-theme="dark"] table tbody tr:hover {
  background: var(--thor-surface-hover) !important;
}

/* ============================================================
   8) [F3 2026] BOTONES Y BADGES GLOBALES
   ============================================================ */

.action-btn-primary {
  background: var(--thor-brand) !important;
  color: #fff !important;
}

.action-btn-primary:hover {
  background: var(--thor-brand-dark) !important;
}

.badge-primary {
  background-color: var(--thor-accent-soft) !important;
  color: var(--thor-accent-dark) !important;
}

.badge-secondary {
  background-color: var(--thor-surface-2) !important;
  color: var(--thor-text-2) !important;
}

/* ============================================================
   9) [F3 2026] MI DÍA — el JS inyecta estilos con colores a fuego;
   todo cuelga de #miDiaContent / #mdHero, así que se pisa desde aquí
   ============================================================ */

/* Hero: de azul corporativo a gradiente de marca */
#mdHero {
  background: linear-gradient(120deg, var(--thor-brand-dark) 0%, var(--thor-brand) 70%, var(--thor-brand-light) 100%) !important;
}

#miDiaContent .md-card {
  background: var(--thor-surface) !important;
  border: 1px solid var(--thor-border) !important;
  border-radius: var(--thor-radius-lg, 12px) !important;
  box-shadow: var(--thor-shadow-sm) !important;
}

#miDiaContent .md-row {
  border-bottom: 1px solid var(--thor-border) !important;
}

#miDiaContent .md-row:hover {
  background: var(--thor-surface-hover) !important;
}

#miDiaContent .md-count {
  background: var(--thor-brand-soft) !important;
  color: var(--thor-brand-dark) !important;
}

#miDiaContent .md-news a {
  background: var(--thor-surface) !important;
  border: 1px solid var(--thor-border) !important;
}

#miDiaContent .md-sub {
  color: var(--thor-text-3) !important;
}

[data-theme="dark"] #miDiaContent .md-card,
[data-theme="dark"] #miDiaContent .md-news a {
  background: var(--thor-surface) !important;
  border-color: var(--thor-border) !important;
  color: var(--thor-text) !important;
}

[data-theme="dark"] #miDiaContent .md-row:hover {
  background: var(--thor-surface-hover) !important;
}

/* ============================================================
   10) [F3 2026] KANBAN — paridad dark y detalles
   (los colores por estado --ka-estado se conservan tal cual)
   ============================================================ */

[data-theme="dark"] .kanban-container,
[data-theme="dark"] #kanban,
[data-theme="dark"] .kanban-board {
  background: var(--thor-bg) !important;
}

[data-theme="dark"] .kanban-column,
[data-theme="dark"] .kanban-column-stacked {
  background: var(--thor-surface-2) !important;
  border-color: var(--thor-border) !important;
}

/* Tarjetas-métrica sobre el kanban (kanbanMejoras.css) */
.kanban-dashboard-card {
  background: var(--thor-surface) !important;
  border: 1px solid var(--thor-border) !important;
}

.dashboard-icon {
  background: var(--thor-brand-soft) !important;
}