/**
 * Tabler Compatibility CSS
 * Mapeo de clases AdminLTE (Bootstrap 3) -> Tabler (Bootstrap 5)
 * Este archivo permite una transicion gradual del tema
 */

/* ============================================
   TOM-SELECT DENTRO DE MODALES
   ============================================ */
.modal .ts-dropdown {
    z-index: 10060 !important;
}
.modal .ts-wrapper.focus .ts-control {
    border-color: var(--tblr-primary);
    box-shadow: 0 0 0 0.25rem rgba(var(--tblr-primary-rgb), 0.25);
}

/* ============================================
   BOXES -> CARDS
   ============================================ */

.box {
  position: relative;
  border-radius: var(--tblr-border-radius);
  background: var(--tblr-bg-surface);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  box-shadow: var(--tblr-shadow-card);
  margin-bottom: 1rem;
}

.box-header {
  padding: 1rem 1.25rem;
  min-height: 2.5rem;
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
  display: flex;
  align-items: center;
}

.box-header.with-border {
  border-bottom: var(--tblr-border-width) solid var(--tblr-border-color);
}

.box-title {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  line-height: 1.5;
}

.box-body {
  padding: 1.25rem;
}

.box-footer {
  padding: 1rem 1.25rem;
  border-top: var(--tblr-border-width) solid var(--tblr-border-color);
  background-color: var(--tblr-bg-surface-secondary);
}

.box-tools {
  margin-left: auto;
}

/* Box variants */
.box-primary {
  border-top: 3px solid var(--tblr-primary);
}

.box-success {
  border-top: 3px solid var(--tblr-success);
}

.box-warning {
  border-top: 3px solid var(--tblr-warning);
}

.box-danger {
  border-top: 3px solid var(--tblr-danger);
}

.box-info {
  border-top: 3px solid var(--tblr-info);
}

/* Box solid variants */
.box-solid.box-primary .box-header {
  background-color: var(--tblr-primary);
  color: #fff;
}

.box-solid.box-success .box-header {
  background-color: var(--tblr-success);
  color: #fff;
}

.box-solid.box-warning .box-header {
  background-color: var(--tblr-warning);
  color: #fff;
}

.box-solid.box-danger .box-header {
  background-color: var(--tblr-danger);
  color: #fff;
}

.box-solid.box-info .box-header {
  background-color: var(--tblr-info);
  color: #fff;
}

/* ============================================
   CALLOUTS -> ALERTS
   ============================================ */

.callout {
  padding: 1rem;
  margin-bottom: 1rem;
  border-radius: var(--tblr-border-radius);
  border-left: 4px solid;
}

.callout-info {
  background-color: rgba(var(--tblr-info-rgb), 0.1);
  border-color: var(--tblr-info);
  color: var(--tblr-info);
}

.callout-warning {
  background-color: rgba(var(--tblr-warning-rgb), 0.1);
  border-color: var(--tblr-warning);
  color: var(--tblr-warning);
}

.callout-danger {
  background-color: rgba(var(--tblr-danger-rgb), 0.1);
  border-color: var(--tblr-danger);
  color: var(--tblr-danger);
}

.callout-success {
  background-color: rgba(var(--tblr-success-rgb), 0.1);
  border-color: var(--tblr-success);
  color: var(--tblr-success);
}

.callout h4 {
  margin-bottom: 0.5rem;
  font-weight: 600;
}

.callout p:last-child {
  margin-bottom: 0;
}

/* ============================================
   BOOTSTRAP 3 -> BOOTSTRAP 5 UTILITIES
   ============================================ */

/* Float utilities */
.pull-left {
  float: left !important;
}

.pull-right {
  float: right !important;
}

.pull-right-container {
  float: right;
}

/* Visibility utilities */
.hidden-xs {
  display: none !important;
}

@media (min-width: 576px) {
  .hidden-xs {
    display: block !important;
  }
}

.hidden-sm {
  display: block !important;
}

@media (min-width: 576px) and (max-width: 767.98px) {
  .hidden-sm {
    display: none !important;
  }
}

.visible-xs {
  display: block !important;
}

@media (min-width: 576px) {
  .visible-xs {
    display: none !important;
  }
}

/* Center block */
.center-block {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

/* Clearfix */
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}

/* ============================================
   BUTTONS
   ============================================ */

.btn-default {
  color: var(--tblr-secondary-fg);
  background-color: var(--tblr-secondary);
  border-color: var(--tblr-secondary);
}

.btn-default:hover {
  color: var(--tblr-secondary-fg);
  background-color: var(--tblr-secondary-darken);
  border-color: var(--tblr-secondary-darken);
}

.btn-important {
  color: #fff;
  background-color: var(--tblr-primary);
  border-color: var(--tblr-primary);
}

.btn-important:hover {
  color: #fff;
  background-color: var(--tblr-primary-darken);
  border-color: var(--tblr-primary-darken);
}

.btn-flat {
  border-radius: 0;
}

.btn-block {
  display: block;
  width: 100%;
}

.btn-xs {
  padding: 0.125rem 0.375rem;
  font-size: 0.75rem;
  border-radius: var(--tblr-border-radius-sm);
}

/* ============================================
   FORM ELEMENTS
   ============================================ */

.form-group {
  margin-bottom: 1rem;
}

.has-error .form-control {
  border-color: var(--tblr-danger);
}

.has-error .help-block,
.has-error .control-label {
  color: var(--tblr-danger);
}

.has-success .form-control {
  border-color: var(--tblr-success);
}

.has-warning .form-control {
  border-color: var(--tblr-warning);
}

.help-block {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.875em;
  color: var(--tblr-muted);
}

/* Input group addon -> input-group-text */
.input-group-addon {
  display: flex;
  align-items: center;
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--tblr-body-color);
  text-align: center;
  white-space: nowrap;
  background-color: var(--tblr-bg-surface-secondary);
  border: var(--tblr-border-width) solid var(--tblr-border-color);
  border-radius: var(--tblr-border-radius);
}

.input-group-btn {
  display: flex;
}

.input-group-btn .btn {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

/* ============================================
   TABLES
   ============================================ */

.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.no-padding {
  padding: 0 !important;
}

/* ============================================
   LABELS -> BADGES
   ============================================ */

.label {
  display: inline-block;
  padding: 0.25em 0.5em;
  font-size: 0.75em;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: var(--tblr-border-radius);
}

.label-default {
  background-color: var(--tblr-secondary);
  color: var(--tblr-secondary-fg);
}

.label-primary {
  background-color: var(--tblr-primary);
  color: #fff;
}

.label-success {
  background-color: var(--tblr-success);
  color: #fff;
}

.label-info {
  background-color: var(--tblr-info);
  color: #fff;
}

.label-warning {
  background-color: var(--tblr-warning);
  color: #fff;
}

.label-danger {
  background-color: var(--tblr-danger);
  color: #fff;
}

/* ============================================
   PROGRESS BARS
   ============================================ */

.progress-bar-success {
  background-color: var(--tblr-success);
}

.progress-bar-info {
  background-color: var(--tblr-info);
}

.progress-bar-warning {
  background-color: var(--tblr-warning);
}

.progress-bar-danger {
  background-color: var(--tblr-danger);
}

/* ============================================
   TEXT COLORS
   ============================================ */

.text-aqua,
.text-info {
  color: var(--tblr-info) !important;
}

.text-green,
.text-success {
  color: var(--tblr-success) !important;
}

.text-yellow,
.text-warning {
  color: var(--tblr-warning) !important;
}

.text-red,
.text-danger {
  color: var(--tblr-danger) !important;
}

.text-light-blue,
.text-primary {
  color: var(--tblr-primary) !important;
}

.text-muted {
  color: var(--tblr-muted) !important;
}

/* ============================================
   BACKGROUND COLORS
   ============================================ */

.bg-aqua {
  background-color: var(--tblr-info) !important;
}

.bg-green {
  background-color: var(--tblr-success) !important;
}

.bg-yellow {
  background-color: var(--tblr-warning) !important;
}

.bg-red {
  background-color: var(--tblr-danger) !important;
}

.bg-light-blue {
  background-color: var(--tblr-primary) !important;
}

/* ============================================
   CUSTOM ALERT CLASSES (del proyecto)
   ============================================ */

.error {
  background-color: rgba(var(--tblr-danger-rgb), 0.1);
  border: 1px solid var(--tblr-danger);
  color: var(--tblr-danger);
  padding: 1rem;
  border-radius: var(--tblr-border-radius);
  margin-bottom: 1rem;
}

.acierto {
  background-color: rgba(var(--tblr-success-rgb), 0.1);
  border: 1px solid var(--tblr-success);
  color: var(--tblr-success);
  padding: 1rem;
  border-radius: var(--tblr-border-radius);
  margin-bottom: 1rem;
}

/* ============================================
   LEGACY ADMINLTE LAYOUT (para transicion)
   ============================================ */

/* Mantener estilos basicos del sidebar viejo */
.sidebar-menu,
.treeview-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.treeview-menu {
  padding-left: 1rem;
}

.sidebar-menu > li {
  position: relative;
}

.sidebar-menu > li > a {
  display: block;
  padding: 0.75rem 1rem;
  text-decoration: none;
  color: inherit;
}

.sidebar-menu > li > a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}

.sidebar-menu .header {
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  color: var(--tblr-muted);
}

/* ============================================
   HIDE SELECT2 WHEN USING TOM-SELECT
   ============================================ */

.select2-container {
  display: none !important;
}

/* ============================================
   LITEPICKER READONLY STYLE
   ============================================ */

.litepicker-readonly .litepicker {
  pointer-events: none;
}

input[readonly].datepicker,
input[readonly].litepicker {
  background-color: var(--tblr-bg-surface);
  cursor: pointer;
}

/* ============================================
   LOGIN BOX COMPATIBILITY
   ============================================ */

.login-box {
  max-width: 400px;
  margin: 2rem auto;
}

.login-logo {
  text-align: center;
  margin-bottom: 1.5rem;
}

.login-logo img {
  max-width: 150px;
  margin-bottom: 1rem;
}

.login-box-body {
  padding: 2rem;
  background: var(--tblr-bg-surface);
  border-radius: var(--tblr-border-radius);
  box-shadow: var(--tblr-shadow-card);
}

.login-box-msg {
  margin-bottom: 1.5rem;
  text-align: center;
}

/* ============================================
   RESPONSIVE ADJUSTMENTS
   ============================================ */

@media (max-width: 767.98px) {
  .box-body {
    padding: 1rem;
  }

  .box-header {
    padding: 0.75rem 1rem;
  }

  .table-responsive > .table {
    margin-bottom: 0;
  }
}

/* ============================================
   FONT AWESOME ICON SIZES (COMPAT)
   ============================================ */

.fa-lg {
  font-size: 1.33333em;
  line-height: 0.75em;
  vertical-align: -15%;
}

.fa-2x {
  font-size: 2em;
}

.fa-3x {
  font-size: 3em;
}

.fa-4x {
  font-size: 4em;
}

.fa-5x {
  font-size: 5em;
}

/* Spinner animation */
.fa-spin {
  animation: fa-spin 2s infinite linear;
}

@keyframes fa-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ============================================
   SIDEBAR EMPRESA SELECTOR
   ============================================ */

/* Selector de empresa - dropdown mas ancho */
#selector-empresa .dropdown-menu {
  min-width: 280px;
  max-width: 350px;
  width: max-content;
}

/* Items del dropdown - texto completo */
#selector-empresa .dropdown-item,
#lista-empresas .dropdown-item {
  white-space: normal;
  word-wrap: break-word;
  padding: 0.5rem 1rem;
  line-height: 1.4;
}

/* Header de cambiar empresa */
#lista-empresas .dropdown-header {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--tblr-muted);
  padding: 0.5rem 1rem;
}

/* Nombre de empresa actual en sidebar */
#empresa-actual {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
}

/* Info de usuario en sidebar */
.navbar-vertical .user-panel .info,
.navbar-vertical .nav-item .d-block {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.3;
}

/* Nav link title - mostrar texto completo */
.navbar-vertical .nav-link-title {
  white-space: normal;
  word-wrap: break-word;
  line-height: 1.4;
}

/* Responsivo - sidebar dropdown */
@media (max-width: 991.98px) {
  #selector-empresa .dropdown-menu {
    min-width: 100%;
    max-width: 100%;
    position: relative !important;
    transform: none !important;
  }
}

@media (min-width: 992px) {
  /* En desktop, el dropdown puede salirse del sidebar */
  #selector-empresa .dropdown-menu {
    left: 100% !important;
    top: 0 !important;
    margin-left: 0.5rem;
  }

  /* Flecha indicadora hacia la derecha */
  #selector-empresa .dropdown-toggle::after {
    margin-left: auto;
  }
}

/* ============================================
   TEMA CLARO/OSCURO
   ============================================ */

/* Variables para tema oscuro */
[data-bs-theme="dark"] {
  --tblr-body-bg: #1a1d21;
  --tblr-bg-surface: #232730;
  --tblr-bg-surface-secondary: #2c3038;
  --tblr-border-color: #3a3f47;
}

/* Ajustes especificos para tema oscuro */
[data-bs-theme="dark"] .card {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .box {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .table {
  --tblr-table-bg: transparent;
  --tblr-table-striped-bg: rgba(255, 255, 255, 0.02);
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
  background-color: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .form-control:focus,
[data-bs-theme="dark"] .form-select:focus {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-primary);
}

[data-bs-theme="dark"] .input-group-text {
  background-color: var(--tblr-bg-surface-secondary);
  border-color: var(--tblr-border-color);
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .dropdown-menu {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .dropdown-item:hover,
[data-bs-theme="dark"] .dropdown-item:focus {
  background-color: var(--tblr-bg-surface-secondary);
}

[data-bs-theme="dark"] .modal-content {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .alert {
  border-color: var(--tblr-border-color);
}

[data-bs-theme="dark"] .list-group-item {
  background-color: var(--tblr-bg-surface);
  border-color: var(--tblr-border-color);
}

/* ============================================
   SIDEBAR - SIEMPRE DARK VIA data-bs-theme
   Tabler maneja los estilos nativamente
   ============================================ */

/* Logo: sidebar siempre dark, mostrar logo blanco */
#sidebar .logo-light {
  display: none !important;
}

#sidebar .logo-dark {
  display: inline-block !important;
}

/* Logo en el body segun tema */
[data-bs-theme="light"] .logo-dark:not(#sidebar .logo-dark) {
  display: none !important;
}

[data-bs-theme="dark"] .logo-light:not(#sidebar .logo-light) {
  display: none !important;
}

/* Theme toggle icons - solo aplica al html, no al sidebar */
html[data-bs-theme="light"] .theme-icon-dark,
html[data-bs-theme="light"] .theme-text-dark {
  display: none !important;
}

html[data-bs-theme="dark"] .theme-icon-light,
html[data-bs-theme="dark"] .theme-text-light {
  display: none !important;
}

/* Transicion suave al cambiar tema */
body {
  transition: background-color 0.2s ease, color 0.2s ease;
}

.card, .box, .form-control, .form-select, .dropdown-menu, .modal-content {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* ============================================
   TOM-SELECT FIXES
   ============================================ */

/* Fix dropdown en modales - z-index */
.modal .ts-wrapper .ts-dropdown {
  z-index: 1060 !important;
}

/* Fix fondo del dropdown */
.ts-dropdown {
  background: var(--tblr-bg-surface) !important;
  border: 1px solid var(--tblr-border-color) !important;
  box-shadow: var(--tblr-shadow-card) !important;
}

/* Fix items del dropdown */
.ts-dropdown .option {
  padding: 8px 12px;
  background: transparent;
  color: var(--tblr-body-color);
}

.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--tblr-primary) !important;
  color: #fff !important;
}

/* Fix control de Tom-Select */
.ts-wrapper .ts-control {
  background: var(--tblr-bg-forms) !important;
  border-color: var(--tblr-border-color) !important;
  color: var(--tblr-body-color) !important;
}

.ts-wrapper .ts-control input {
  color: var(--tblr-body-color) !important;
}

/* Fix placeholder */
.ts-wrapper .ts-control input::placeholder {
  color: var(--tblr-muted) !important;
}

/* Loading indicator */
.ts-wrapper.loading .ts-control::after {
  border-color: var(--tblr-primary) transparent transparent transparent;
}

/* Fix para tema oscuro */
[data-bs-theme="dark"] .ts-dropdown {
  background: var(--tblr-bg-surface) !important;
  border-color: var(--tblr-border-color) !important;
}

[data-bs-theme="dark"] .ts-dropdown .option {
  color: var(--tblr-body-color);
}

[data-bs-theme="dark"] .ts-wrapper .ts-control {
  background: var(--tblr-bg-forms) !important;
  border-color: var(--tblr-border-color) !important;
}

/* Fix para el input dentro de Tom-Select */
.ts-dropdown .ts-dropdown-content {
  max-height: 300px;
  overflow-y: auto;
}

/* Mensaje de carga */
.ts-dropdown .spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--tblr-border-color);
  border-top-color: var(--tblr-primary);
  border-radius: 50%;
  animation: ts-spin 0.6s linear infinite;
  margin-right: 8px;
}

@keyframes ts-spin {
  to { transform: rotate(360deg); }
}

/* No results */
.ts-dropdown .no-results {
  padding: 10px;
  text-align: center;
  color: var(--tblr-muted);
}

/* Crear nuevo item */
.ts-dropdown .create {
  padding: 8px 12px;
  color: var(--tblr-primary);
  cursor: pointer;
}

.ts-dropdown .create:hover {
  background-color: var(--tblr-primary-lt);
}