/*--------------------------------------------
    Temas de color para el backend (template srtdash)
    Preferencia guardada en el perfil del usuario (users.theme):
      - light : claro       (por defecto, sin clase)
      - dim   : tenue        (gris claro, texto oscuro)
      - dark  : oscuro

    El <body> recibe la clase base .themed + la del tema (.theme-dim / .theme-dark).
    Las reglas de componentes se escriben una sola vez contra las variables;
    cada tema sólo redefine la paleta.
----------------------------------------------*/

/* ---- Paletas ---- */
.theme-dark {
    --dm-bg:        #1b1d21;
    --dm-surface:   #26282c;
    --dm-surface-2: #303236;
    --dm-border:    #3a3d42;
    --dm-text:      #d5d7db;
    --dm-text-mut:  #9aa0a6;
    --dm-link:      #6ea8fe;
    --dm-hl-bg:     #3d4148;
    --dm-hover:     rgba(255, 255, 255, 0.06);
    --dm-stripe:    rgba(255, 255, 255, 0.03);
}
.theme-dim {
    --dm-bg:        #d9dee4;
    --dm-surface:   #eceff3;
    --dm-surface-2: #f4f6f8;
    --dm-border:    #bfc6cf;
    --dm-text:      #2b2f36;
    --dm-text-mut:  #5c636d;
    --dm-link:      #1c5fd0;
    --dm-hl-bg:     #d1d7de;
    --dm-hover:     rgba(0, 0, 0, 0.05);
    --dm-stripe:    rgba(0, 0, 0, 0.035);
}
/* Tenue verde: como "dim" pero con tinte verdoso y enlaces en verde */
.theme-green {
    --dm-bg:        #dce7dd;
    --dm-surface:   #eaf2ea;
    --dm-surface-2: #f2f8f2;
    --dm-border:    #bccdbd;
    --dm-text:      #23302a;
    --dm-text-mut:  #5b6b60;
    --dm-link:      #1f7a3d;
    --dm-hl-bg:     #d2dfd3;
    --dm-hover:     rgba(0, 0, 0, 0.05);
    --dm-stripe:    rgba(0, 0, 0, 0.035);
}

/* ---- Base ---- */
body.themed {
    background-color: var(--dm-bg);
    color: var(--dm-text);
}
body.themed .main-content,
body.themed .main-content-inner {
    background-color: var(--dm-bg) !important;
}
body.themed .card,
body.themed .card-body {
    background-color: var(--dm-surface) !important;
    color: var(--dm-text);
}
body.themed .header-area,
body.themed .page-title-area {
    background-color: var(--dm-surface) !important;
    box-shadow: none;
}

/* ---- Tipografía / utilidades ----
   El recoloreo de TEXTO se hace SÓLO en el tema OSCURO: en tenue (fondo
   claro) el texto por defecto del template ya contrasta bien, y forzarlo
   rompería el texto claro de insignias, botones y widgets con fondo de
   color (p. ej. "En Progreso", los números de las tarjetas o el chat
   "En Línea"). Se limita además a .main-content: la barra lateral es
   oscura por diseño en todos los temas y conserva su color propio. */
body.theme-dark .main-content h1, body.theme-dark .main-content h2, body.theme-dark .main-content h3,
body.theme-dark .main-content h4, body.theme-dark .main-content h5, body.theme-dark .main-content h6,
body.theme-dark .main-content p, body.theme-dark .main-content span, body.theme-dark .main-content label,
body.theme-dark .main-content .page-title {
    color: var(--dm-text);
}
body.theme-dark .main-content .text-dark { color: var(--dm-text) !important; }
body.theme-dark .main-content .text-muted { color: var(--dm-text-mut) !important; }
/* Se excluyen los .btn: muchos botones son enlaces (<a class="btn ...">) y
   deben conservar el color de texto de Bootstrap, no el color de enlace. */
body.theme-dark .main-content a:not(.btn),
body.theme-green .main-content a:not(.btn) { color: var(--dm-link); }

/* Fondos utilitarios: ambos temas */
body.themed .bg-light,
body.themed .bg-white { background-color: var(--dm-surface) !important; }

/* ---- Tablas ---- */
body.themed .table { color: var(--dm-text); }
body.themed .table td,
body.themed .table th { border-color: var(--dm-border); }
/* Encabezados de tabla: si son enlaces (ordenables), deben usar el color de
   texto del tema, no el de enlace. */
body.themed thead th,
body.themed thead th a { color: var(--dm-text) !important; }
body.themed .table-striped tbody tr:nth-of-type(odd) { background-color: var(--dm-stripe); }
body.themed .table-bordered,
body.themed .table-bordered td,
body.themed .table-bordered th { border-color: var(--dm-border) !important; }
body.themed .table-hover tbody tr:hover {
    background-color: var(--dm-hover);
    color: var(--dm-text);
}

/* ---- Formularios ---- */
body.themed .form-control,
body.themed .custom-select,
body.themed textarea,
body.themed .select2-container--default .select2-selection--single,
body.themed .select2-container--default .select2-selection--multiple {
    background-color: var(--dm-surface-2) !important;
    color: var(--dm-text) !important;
    border-color: var(--dm-border) !important;
}
body.themed .form-control::placeholder { color: var(--dm-text-mut) !important; }
body.themed .form-control:disabled,
body.themed .form-control[readonly] { background-color: var(--dm-bg) !important; }
body.themed .select2-dropdown {
    background-color: var(--dm-surface-2) !important;
    border-color: var(--dm-border) !important;
    color: var(--dm-text);
}
body.themed .select2-results__option[aria-selected=true],
body.themed .select2-container--default .select2-results__option--highlighted[aria-selected] {
    background-color: var(--dm-hl-bg) !important;
    color: var(--dm-text) !important;
}

/* ---- Dropdowns ---- */
body.themed .dropdown-menu {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
}
body.themed .dropdown-item { color: var(--dm-text); }
body.themed .dropdown-item:hover,
body.themed .dropdown-item:focus {
    background-color: var(--dm-hl-bg);
    color: var(--dm-text);
}
body.themed .dropdown-divider { border-color: var(--dm-border); }

/* ---- Modales ---- */
body.themed .modal-content {
    background-color: var(--dm-surface);
    color: var(--dm-text);
}
body.themed .modal-body,
body.themed .modal-footer { border-color: var(--dm-border); }
body.themed .close { color: var(--dm-text); text-shadow: none; }

/* ---- Nav tabs ---- */
body.themed .nav-tabs { border-color: var(--dm-border); }
body.themed .nav-tabs .nav-link { color: var(--dm-text-mut); }
body.themed .nav-tabs .nav-link.active {
    background-color: var(--dm-surface);
    border-color: var(--dm-border) var(--dm-border) var(--dm-surface);
    color: var(--dm-text);
}

/* ---- List group / paginación / bordes ---- */
body.themed .list-group-item {
    background-color: var(--dm-surface);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
body.themed .page-link {
    background-color: var(--dm-surface-2);
    border-color: var(--dm-border);
    color: var(--dm-text);
}
body.themed .border,
body.themed .border-top,
body.themed .border-bottom,
body.themed .border-left,
body.themed .border-right { border-color: var(--dm-border) !important; }
body.themed hr { border-top-color: var(--dm-border); }

/* ---- Breadcrumbs ---- */
body.themed .breadcrumbs a { color: var(--dm-text-mut); }

/*--------------------------------------------
    Selector de tema en el perfil (radios con swatch)
----------------------------------------------*/
.theme-picker { display: flex; gap: 12px; flex-wrap: wrap; }
.theme-picker .theme-option { cursor: pointer; margin: 0; }
.theme-picker .theme-option input { position: absolute; opacity: 0; }
.theme-picker .theme-swatch {
    display: block; width: 84px; height: 54px; border-radius: 6px;
    border: 2px solid #ccc; overflow: hidden; position: relative;
    transition: border-color .2s, box-shadow .2s;
}
.theme-picker .theme-swatch .bar { height: 34%; }
.theme-picker .theme-option input:checked + .theme-swatch {
    border-color: #4c6fff;
    box-shadow: 0 0 0 3px rgba(76, 111, 255, 0.25);
}
.theme-picker .theme-caption { display: block; text-align: center; font-size: 12px; margin-top: 4px; }
.theme-picker .sw-light  { background: #faf8fb; }
.theme-picker .sw-light  .bar { background: #ffffff; border-bottom: 1px solid #e6e6e6; }
.theme-picker .sw-dim    { background: #d9dee4; }
.theme-picker .sw-dim    .bar { background: #eceff3; border-bottom: 1px solid #bfc6cf; }
.theme-picker .sw-green  { background: #dce7dd; }
.theme-picker .sw-green  .bar { background: #eaf2ea; border-bottom: 1px solid #bccdbd; }
.theme-picker .sw-dark   { background: #1b1d21; }
.theme-picker .sw-dark   .bar { background: #26282c; border-bottom: 1px solid #3a3d42; }