/* TavisaSuite Panel Theme (glass + moderno + sobrio) */
/* Cargar DESPUÉS de adminlte.min.css */

:root{
    --bg0:#050712;
    --bg1:#070A18;
  
    --text:#EAF0FF;
    --muted: rgba(234,240,255,.72);
  
    /* default BLUE (igual que login) */
    --a1:#00D2FF;
    --a2:#2E5BFF;
    --glow: rgba(0,210,255,.22);
  
    --stroke: rgba(255,255,255,.12);
    --stroke2: rgba(255,255,255,.08);
  
    --cardTop: rgba(255,255,255,.07);
    --cardBot: rgba(255,255,255,.03);
  
    --shadow: 0 18px 55px rgba(0,0,0,.35);
    --shadow2: 0 10px 30px rgba(0,0,0,.30);
  
    --radius: 16px;
    --radius2: 18px;
  
    --focus: 0 0 0 .22rem rgba(0,210,255,.16);
  }
  
  /* Theme toggle (como el login) */
  body.tt-theme[data-theme="green"]{
    --a1:#39FF14;
    --a2:#00E5A8;
    --glow: rgba(57,255,20,.18);
  }
  
  /* Base */
  body.tt-theme{
    color: var(--text);
    font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
    background:
      radial-gradient(1000px 650px at 10% 10%, var(--glow), transparent 60%),
      radial-gradient(900px 650px at 90% 90%, rgba(46,91,255,.18), transparent 55%),
      linear-gradient(180deg, var(--bg1), var(--bg0));
  }
  
  /* Rejilla sutil tipo login */
  body.tt-theme::before{
    content:"";
    position:fixed; inset:0;
    background-image:
      linear-gradient(rgba(255,255,255,.06) 1px, transparent 1px),
      linear-gradient(90deg, rgba(255,255,255,.06) 1px, transparent 1px);
    background-size: 46px 46px;
    opacity:.12;
    pointer-events:none;
    z-index:-1;
  }
  
  /* Links */
  body.tt-theme a{ color: rgba(234,240,255,.88); }
  body.tt-theme a:hover{ color: #fff; }
  
  /* Content area (AdminLTE v3/v4) */
  body.tt-theme .content-wrapper,
  body.tt-theme .app-main{
    background: transparent !important;
  }
  
  /* -------------------- TOPBAR / NAVBAR -------------------- */
  body.tt-theme .main-header.navbar,
  body.tt-theme .app-header{
    background: rgba(7,10,24,.68) !important;
    border-bottom: 1px solid var(--stroke) !important;
    backdrop-filter: blur(12px);
  }
  body.tt-theme .navbar-nav .nav-link{
    color: rgba(234,240,255,.78) !important;
  }
  body.tt-theme .navbar-nav .nav-link:hover{
    color:#fff !important;
  }
  
  /* Breadcrumb */
  body.tt-theme .breadcrumb{
    background: rgba(255,255,255,.03);
    border: 1px solid var(--stroke2);
    border-radius: 999px;
    padding: 6px 10px;
    backdrop-filter: blur(10px);
  }
  
  /* -------------------- SIDEBAR -------------------- */
  /* AdminLTE v3 */
  body.tt-theme .main-sidebar{
    background:
      radial-gradient(900px 520px at 20% 15%, rgba(0,210,255,.16), transparent 60%),
      radial-gradient(900px 520px at 90% 85%, rgba(46,91,255,.12), transparent 55%),
      linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
    border-right: 1px solid var(--stroke) !important;
  }
  body.tt-theme .brand-link{
    border-bottom: 1px solid var(--stroke2) !important;
    background: rgba(0,0,0,.12) !important;
    backdrop-filter: blur(10px);
  }
  body.tt-theme .brand-link .brand-text{
    color: rgba(234,240,255,.92) !important;
    letter-spacing: .06em;
  }
  
  /* AdminLTE v4 */
  body.tt-theme .app-sidebar{
    background:
      radial-gradient(900px 520px at 20% 15%, rgba(0,210,255,.16), transparent 60%),
      radial-gradient(900px 520px at 90% 85%, rgba(46,91,255,.12), transparent 55%),
      linear-gradient(180deg, var(--bg1), var(--bg0)) !important;
    border-right: 1px solid var(--stroke) !important;
  }
  
  /* Menú */
  body.tt-theme .nav-sidebar .nav-link,
  body.tt-theme .sidebar-menu .nav-link{
    color: rgba(234,240,255,.82) !important;
    border-radius: 14px;
    margin: 3px 10px;
    padding: 10px 12px;
    transition: background .15s, transform .15s, color .15s;
  }
  body.tt-theme .nav-sidebar .nav-link:hover,
  body.tt-theme .sidebar-menu .nav-link:hover{
    background: rgba(255,255,255,.05) !important;
    transform: translateX(1px);
    color:#fff !important;
  }
  body.tt-theme .nav-sidebar .nav-link.active,
  body.tt-theme .sidebar-menu .nav-link.active{
    background: rgba(255,255,255,.07) !important;
    border-left: 3px solid var(--a1);
    color:#fff !important;
  }
  body.tt-theme .nav-sidebar .nav-header{
    color: rgba(234,240,255,.55) !important;
    font-weight: 800;
    letter-spacing: .10em;
    font-size: 11px;
  }
  
  /* -------------------- CARDS (lo que más vas a notar) -------------------- */
  body.tt-theme .card{
    border: 1px solid var(--stroke) !important;
    background: linear-gradient(180deg, var(--cardTop), var(--cardBot)) !important;
    border-radius: var(--radius2) !important;
    box-shadow: var(--shadow) !important;
    backdrop-filter: blur(12px);
  }
  body.tt-theme .card-header{
    background: transparent !important;
    border-bottom: 1px solid var(--stroke2) !important;
  }
  body.tt-theme .card-title{
    color: rgba(234,240,255,.92) !important;
    font-weight: 900;
    letter-spacing: -.01em;
  }
  body.tt-theme .card-footer{
    background: rgba(255,255,255,.03) !important;
    border-top: 1px solid var(--stroke2) !important;
  }
  
  /* -------------------- KPI (small-box) bonitos + coherentes -------------------- */
  body.tt-theme .small-box{
    position: relative;
    overflow: hidden;
    border-radius: var(--radius2) !important;
    border: 1px solid var(--stroke) !important;
    background: linear-gradient(180deg, var(--cardTop), var(--cardBot)) !important;
    box-shadow: var(--shadow2) !important;
    backdrop-filter: blur(12px);
  }
  body.tt-theme .small-box::before{
    content:"";
    position:absolute; inset:-2px;
    background: linear-gradient(90deg, var(--kpi1, var(--a1)), var(--kpi2, var(--a2)));
    opacity:.20;
    filter: blur(12px);
    pointer-events:none;
  }
  body.tt-theme .small-box::after{
    content:"";
    position:absolute; inset:0;
    border-top: 2px solid rgba(255,255,255,.06);
    pointer-events:none;
  }
  body.tt-theme .small-box .small-box-icon{
    color: rgba(255,255,255,.10) !important;
  }
  body.tt-theme .small-box p{
    color: rgba(234,240,255,.75) !important;
  }
  body.tt-theme .small-box .small-box-footer{
    background: rgba(255,255,255,.04) !important;
  }
  
  /* Mantener “color por tipo” pero elegante */
  body.tt-theme .small-box.bg-info{    --kpi1:#00D2FF; --kpi2:#2E5BFF; }
  body.tt-theme .small-box.bg-success{ --kpi1:#39FF14; --kpi2:#00E5A8; }
  body.tt-theme .small-box.bg-warning{ --kpi1:#FFD34A; --kpi2:#FF8A00; }
  body.tt-theme .small-box.bg-danger{  --kpi1:#FF4D6D; --kpi2:#FF2D2D; }
  
  /* -------------------- FORMS -------------------- */
  body.tt-theme .form-control,
  body.tt-theme .form-select,
  body.tt-theme .input-group-text{
    background: rgba(0,0,0,.22) !important;
    border: 1px solid var(--stroke) !important;
    color: var(--text) !important;
  }
  body.tt-theme .form-control::placeholder{
    color: rgba(234,240,255,.45) !important;
  }
  body.tt-theme .form-control:focus,
  body.tt-theme .form-select:focus{
    border-color: rgba(0,210,255,.55) !important;
    box-shadow: var(--focus) !important;
    outline: none;
  }
  
  /* Switch / checks (Bootstrap) */
  body.tt-theme .form-check-input{
    background-color: rgba(0,0,0,.30);
    border-color: var(--stroke);
  }
  body.tt-theme .form-check-input:checked{
    background-color: var(--a1);
    border-color: var(--a1);
  }
  
  /* -------------------- BUTTONS -------------------- */
  body.tt-theme .btn{ border-radius: 12px !important; }
  body.tt-theme .btn-primary{
    border: 0 !important;
    background: linear-gradient(90deg, var(--a1), var(--a2)) !important;
    color: #07101a !important;
    font-weight: 900;
    letter-spacing: .02em;
    box-shadow: 0 16px 45px rgba(0,0,0,.30);
  }
  body.tt-theme .btn-primary:hover{ filter: brightness(1.06); }
  body.tt-theme .btn-outline-primary{
    border-color: rgba(0,210,255,.45) !important;
    color: rgba(234,240,255,.90) !important;
  }
  body.tt-theme .btn-outline-primary:hover{
    background: rgba(0,210,255,.10) !important;
    border-color: rgba(0,210,255,.65) !important;
    color:#fff !important;
  }
  
  /* -------------------- TABS / PILLS -------------------- */
  body.tt-theme .nav-tabs{
    border-bottom: 1px solid var(--stroke2) !important;
  }
  body.tt-theme .nav-tabs .nav-link{
    color: rgba(234,240,255,.70) !important;
    border: 0 !important;
    border-radius: 12px 12px 0 0;
    margin-right: 6px;
  }
  body.tt-theme .nav-tabs .nav-link:hover{
    color:#fff !important;
    background: rgba(255,255,255,.04) !important;
  }
  body.tt-theme .nav-tabs .nav-link.active{
    color:#fff !important;
    background: rgba(255,255,255,.06) !important;
    border-bottom: 2px solid rgba(0,210,255,.55) !important;
  }
  
  /* -------------------- TABLES -------------------- */
  body.tt-theme .table{
    color: rgba(234,240,255,.86) !important;
  }
  body.tt-theme .table > :not(caption) > * > *{
    border-color: rgba(255,255,255,.08) !important;
  }
  body.tt-theme .table thead th{
    color: rgba(234,240,255,.72) !important;
  }
  body.tt-theme .table tbody tr:hover{
    background: rgba(255,255,255,.03) !important;
  }
  
  /* -------------------- DROPDOWN / MODAL -------------------- */
  body.tt-theme .dropdown-menu{
    background: rgba(7,10,24,.92) !important;
    border: 1px solid var(--stroke) !important;
    backdrop-filter: blur(12px);
    color: var(--text) !important;
  }
  body.tt-theme .dropdown-item{
    color: rgba(234,240,255,.82) !important;
  }
  body.tt-theme .dropdown-item:hover{
    background: rgba(255,255,255,.06) !important;
    color:#fff !important;
  }
  
  body.tt-theme .modal-content{
    background: rgba(7,10,24,.92) !important;
    border: 1px solid var(--stroke) !important;
    border-radius: 18px !important;
    backdrop-filter: blur(12px);
    color: var(--text) !important;
  }
  body.tt-theme .modal-header{
    border-bottom: 1px solid var(--stroke2) !important;
  }
  body.tt-theme .modal-footer{
    border-top: 1px solid var(--stroke2) !important;
    background: rgba(255,255,255,.03) !important;
  }
  
  /* -------------------- ALERTS / BADGES -------------------- */
  body.tt-theme .alert{
    border-radius: 14px;
    border: 1px solid var(--stroke);
    background: rgba(255,255,255,.04);
    color: rgba(234,240,255,.86);
  }
  body.tt-theme .badge{
    border: 1px solid var(--stroke2);
    background: rgba(255,255,255,.04);
    color: rgba(234,240,255,.86);
  }
  
  /* Footer */
  body.tt-theme .main-footer{
    background: rgba(7,10,24,.55) !important;
    border-top: 1px solid var(--stroke) !important;
    color: rgba(234,240,255,.70) !important;
    backdrop-filter: blur(12px);
  }
/* SmallBox: mantiene el color (bg-* / text-bg-*) pero con look glass + degradado */
body.tt-theme .small-box{
  position: relative;
  overflow: hidden;
  border-radius: 18px !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  box-shadow: 0 18px 55px rgba(0,0,0,.35) !important;
  backdrop-filter: blur(12px);
}

/* Mapea el color según clase Bootstrap */
body.tt-theme .small-box.text-bg-primary,   body.tt-theme .small-box.bg-primary   { --k: var(--bs-primary-rgb); }
body.tt-theme .small-box.text-bg-success,   body.tt-theme .small-box.bg-success   { --k: var(--bs-success-rgb); }
body.tt-theme .small-box.text-bg-info,      body.tt-theme .small-box.bg-info      { --k: var(--bs-info-rgb); }
body.tt-theme .small-box.text-bg-warning,   body.tt-theme .small-box.bg-warning   { --k: var(--bs-warning-rgb); }
body.tt-theme .small-box.text-bg-danger,    body.tt-theme .small-box.bg-danger    { --k: var(--bs-danger-rgb); }
body.tt-theme .small-box.text-bg-secondary, body.tt-theme .small-box.bg-secondary { --k: var(--bs-secondary-rgb); }
body.tt-theme .small-box.text-bg-dark,      body.tt-theme .small-box.bg-dark      { --k: var(--bs-dark-rgb); }

/* Degradado usando el color del tipo */
body.tt-theme .small-box[class*="text-bg-"],
body.tt-theme .small-box[class*="bg-"]{
  background: linear-gradient(
    135deg,
    rgba(var(--k), .38),
    rgba(var(--k), .14)
  ) !important;
}

/* Glow suave interno */
body.tt-theme .small-box[class*="text-bg-"]::before,
body.tt-theme .small-box[class*="bg-"]::before{
  content:"";
  position:absolute; inset:-2px;
  background: radial-gradient(700px 260px at 15% 20%, rgba(var(--k), .55), transparent 60%);
  opacity:.55;
  filter: blur(14px);
  pointer-events:none;
}

body.tt-theme .small-box .small-box-icon{
  color: rgba(255,255,255,.12) !important;
}
body.tt-theme .small-box .small-box-footer{
  background: rgba(255,255,255,.06) !important;
  border-top: 1px solid rgba(255,255,255,.10) !important;
}
/* Breadcrumb sin borde */
body.tt-theme .breadcrumb{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important; /* si la quieres aún más limpia: transparent */
}