@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --sc-primary: #4f6ef7;
  --sc-primary-dark: #3e58d8;
  --sc-primary-soft: rgba(79,110,247,.12);
  --sc-accent: #7c6bf2;
  --sc-success: #2fa77a;
  --sc-warning: #e4a437;
  --sc-danger: #dd5d68;
  --sc-bg: #f4f6fb;
  --sc-surface: rgba(255,255,255,.94);
  --sc-surface-solid: #ffffff;
  --sc-border: #e3e8f2;
  --sc-text: #1d2538;
  --sc-muted: #73809a;
  --sc-sidebar: #172036;
  --sc-sidebar-2: #202b46;
  --sc-radius: 16px;
  --sc-radius-sm: 11px;
  --sc-shadow: 0 12px 32px rgba(33,48,82,.08);
  --sc-shadow-hover: 0 18px 42px rgba(33,48,82,.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  background: var(--sc-bg) !important;
  color: var(--sc-text);
  letter-spacing: -.01em;
}
a { transition: color .2s ease, opacity .2s ease, transform .2s ease; }

/* PANEL GENERAL */
.sidebar {
  background: linear-gradient(180deg, var(--sc-sidebar) 0%, #121a2d 100%) !important;
  box-shadow: 8px 0 32px rgba(14,23,42,.12) !important;
  border-right: 1px solid rgba(255,255,255,.06);
}
.sidebar .position-sticky { padding-top: 1.4rem !important; }
.sidebar .nav { padding: 0 .65rem 1.5rem; gap: .2rem; }
.sidebar .nav-link {
  color: #aeb9cf !important;
  border-radius: 11px;
  border-left: 0 !important;
  padding: .74rem .9rem !important;
  font-size: .89rem;
  font-weight: 600 !important;
  display: flex;
  align-items: center;
}
.sidebar .nav-link i { width: 22px; color: #8292b3; transition: color .2s ease; }
.sidebar .nav-link:hover {
  background: rgba(255,255,255,.07) !important;
  color: #fff !important;
  transform: translateX(2px);
}
.sidebar .nav-link:hover i { color: #b7c4ff; }
.sidebar .nav-link.active {
  color: #fff !important;
  background: linear-gradient(135deg, rgba(79,110,247,.9), rgba(124,107,242,.82)) !important;
  box-shadow: 0 8px 22px rgba(79,110,247,.24);
}
.sidebar .nav-link.active i { color: #fff; }

main { min-height: 100vh; padding-bottom: 2.5rem; }
.navbar-main {
  background: rgba(255,255,255,.88) !important;
  backdrop-filter: blur(18px);
  border: 1px solid rgba(226,231,242,.9) !important;
  border-radius: 14px !important;
  box-shadow: 0 8px 26px rgba(33,48,82,.06) !important;
  margin-top: .8rem !important;
}

h1, h2, h3, h4, h5, h6 { color: var(--sc-text); letter-spacing: -.035em; }
h1.h2, .h2 { font-size: clamp(1.55rem, 2.2vw, 2rem); }
.border-bottom { border-color: var(--sc-border) !important; }
.text-muted { color: var(--sc-muted) !important; }

.card {
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  box-shadow: var(--sc-shadow) !important;
  background: var(--sc-surface-solid) !important;
  color: var(--sc-text) !important;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}
.card:hover { border-color: #d8def0 !important; }
.card-body { padding: 1.35rem; }

/* Mantiene tarjetas KPI con color, pero las suaviza */
.card.bg-primary, .card.bg-success, .card.bg-danger, .card.bg-warning, .card.bg-info {
  color: #fff !important;
  border: 0 !important;
  overflow: hidden;
  position: relative;
}
.card.bg-primary { background: linear-gradient(135deg,#5575f8,#745de8) !important; }
.card.bg-success { background: linear-gradient(135deg,#31a97c,#268d7a) !important; }
.card.bg-danger { background: linear-gradient(135deg,#df6671,#c84e67) !important; }
.card.bg-warning { background: linear-gradient(135deg,#e6a93f,#d78c35) !important; }
.card.bg-info { background: linear-gradient(135deg,#3da9c7,#397fc4) !important; }
.card.bg-primary *, .card.bg-success *, .card.bg-danger *, .card.bg-warning *, .card.bg-info * { color: #fff !important; }
.card.bg-dark, .modal-content.bg-dark {
  background: #fff !important;
  color: var(--sc-text) !important;
  border-color: var(--sc-border) !important;
}
.card.bg-dark .text-white, .card.bg-dark h1, .card.bg-dark h2, .card.bg-dark h3, .card.bg-dark h4, .card.bg-dark h5, .card.bg-dark h6,
.modal-content.bg-dark .text-white { color: var(--sc-text) !important; }
.card.bg-dark .text-white-50, .modal-content.bg-dark .text-white-50 { color: var(--sc-muted) !important; }

.btn {
  border-radius: 10px !important;
  font-weight: 650;
  letter-spacing: -.01em;
  padding: .56rem .9rem;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: linear-gradient(135deg,var(--sc-primary),var(--sc-accent)) !important;
  border-color: transparent !important;
  box-shadow: 0 7px 18px rgba(79,110,247,.2);
}
.btn-primary:hover { box-shadow: 0 10px 24px rgba(79,110,247,.3); }
.btn-outline-primary { color: var(--sc-primary); border-color: #bac6ff; }
.btn-outline-secondary { color: #5f6c85; border-color: #cfd6e5; }
.btn-sm { border-radius: 9px !important; padding: .4rem .7rem; }
.btn-group .btn { transform: none !important; }

.form-label { color: #4b5871; font-weight: 650 !important; font-size: .84rem; }
.form-control, .form-select, .input-group-text {
  min-height: 44px;
  border-radius: 10px !important;
  border: 1px solid #dce2ee !important;
  background: #fbfcff !important;
  color: var(--sc-text) !important;
  box-shadow: none !important;
}
.input-group .form-control { border-radius: 0 !important; }
.input-group > :first-child { border-radius: 10px 0 0 10px !important; }
.input-group > :last-child { border-radius: 0 10px 10px 0 !important; }
.form-control:focus, .form-select:focus {
  border-color: #8fa2ff !important;
  background: #fff !important;
  box-shadow: 0 0 0 .22rem rgba(79,110,247,.12) !important;
}
textarea.form-control { min-height: 110px; }

.table-responsive {
  border: 1px solid var(--sc-border);
  border-radius: 13px;
  overflow: hidden;
}
.table { margin-bottom: 0 !important; color: var(--sc-text) !important; --bs-table-bg: transparent; }
.table thead th {
  background: #f6f8fc !important;
  color: #56637b !important;
  border-bottom: 1px solid var(--sc-border) !important;
  padding: .82rem .85rem;
  font-size: .76rem;
  text-transform: uppercase;
  letter-spacing: .045em;
}
.table tbody td {
  background: #fff !important;
  color: var(--sc-text) !important;
  border-color: #edf0f6 !important;
  padding: .8rem .85rem;
}
.table-hover tbody tr:hover td { background: #f8f9fe !important; }
.table-dark, .table-dark > :not(caption) > * > * { --bs-table-bg: transparent !important; color: var(--sc-text) !important; }

.badge { border-radius: 999px !important; font-weight: 650; padding: .45em .7em; }
.alert { border-radius: 12px !important; border-width: 1px !important; box-shadow: none !important; }
.modal-content { border-radius: 18px !important; border: 1px solid var(--sc-border) !important; box-shadow: 0 24px 70px rgba(18,28,51,.22) !important; }
.modal-header, .modal-footer { border-color: var(--sc-border) !important; }
.dropdown-menu { border-radius: 12px; border-color: var(--sc-border); box-shadow: var(--sc-shadow); }

.btn-darkmode-global {
  width: 46px !important; height: 46px !important;
  border: 1px solid rgba(255,255,255,.28) !important;
  box-shadow: 0 10px 28px rgba(28,39,68,.2) !important;
}

/* MODO OSCURO ELEGANTE */
body.dark-mode {
  --sc-bg: #111725;
  --sc-surface: rgba(25,33,52,.94);
  --sc-surface-solid: #192134;
  --sc-border: #2a354e;
  --sc-text: #eef2fa;
  --sc-muted: #9ba8c0;
  background: var(--sc-bg) !important;
}
body.dark-mode .navbar-main, body.dark-mode .card, body.dark-mode .modal-content,
body.dark-mode .card.bg-dark, body.dark-mode .modal-content.bg-dark { background: #192134 !important; color: var(--sc-text) !important; }
body.dark-mode .table-responsive { border-color: var(--sc-border); }
body.dark-mode .table thead th { background: #202a40 !important; color: #b5c1d8 !important; }
body.dark-mode .table tbody td { background: #192134 !important; color: #e8edf7 !important; border-color: #273249 !important; }
body.dark-mode .table-hover tbody tr:hover td { background: #202a40 !important; }
body.dark-mode .form-control, body.dark-mode .form-select, body.dark-mode .input-group-text { background: #202a40 !important; border-color: #34405a !important; color: #eef2fa !important; }
body.dark-mode .form-label, body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #eef2fa !important; }

/* LANDING / INDEX */
body > .navbar-custom {
  background: rgba(16,23,40,.86) !important;
  backdrop-filter: blur(18px);
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.hero-section {
  min-height: 660px;
  display: flex;
  align-items: center;
  padding-top: 9rem !important;
  background:
    radial-gradient(circle at 18% 18%, rgba(111,129,255,.28), transparent 34%),
    radial-gradient(circle at 82% 28%, rgba(101,198,210,.18), transparent 34%),
    linear-gradient(145deg,#11182a 0%,#171e34 52%,#101626 100%) !important;
}
.hero-section .display-4 { font-size: clamp(2.4rem,5vw,4.3rem); letter-spacing: -.055em; }
.hero-section .lead { max-width: 760px; margin-inline: auto; color: #b9c3d7 !important; line-height: 1.75; }
.text-gradient { background: linear-gradient(100deg,#91a7ff,#79d4dc) !important; -webkit-background-clip:text !important; }
.card-custom {
  background: rgba(255,255,255,.035) !important;
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  box-shadow: 0 14px 40px rgba(4,8,18,.16);
}
.card-custom:hover { transform: translateY(-5px) !important; border-color: rgba(145,167,255,.32) !important; }
.icon-box { border-radius: 14px !important; box-shadow: 0 10px 28px rgba(0,0,0,.2) !important; }
.pricing-card.popular { border-color: #718aff !important; }
.cta-section { background: linear-gradient(180deg,#151d31,#101626) !important; }
.btn-gradient { background: linear-gradient(135deg,#5878f7,#7965ed) !important; border-radius: 11px !important; box-shadow: 0 9px 22px rgba(79,110,247,.24); }
.btn-outline-custom { border-color: rgba(255,255,255,.18) !important; color: #dce4f8 !important; }

/* AUTH */
.login-wrapper, .register-card, .login-card, .recovery-card {
  border-radius: 20px !important;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.09) !important;
  box-shadow: 0 28px 70px rgba(5,10,23,.28) !important;
}
.login-right, .form-side, .login-card, .recovery-card { background: rgba(22,29,48,.96) !important; }
.login-left, .info-side { background: linear-gradient(145deg,#2949b5,#6651d7) !important; }
.login-right .form-control, .form-side .form-control, .login-card .form-control, .recovery-card .form-control,
.login-right .input-group-text, .form-side .input-group-text, .login-card .input-group-text, .recovery-card .input-group-text {
  background: #202a42 !important; border-color: #34415f !important; color: #fff !important;
}
.btn-login { background: linear-gradient(135deg,#5576f8,#7864ed) !important; border:0 !important; border-radius:11px !important; min-height:48px; }

@media (max-width: 767.98px) {
  main { padding-inline: .8rem !important; }
  .sidebar { top: 56px !important; padding-top: .5rem !important; }
  .navbar-main { margin-top: .75rem !important; }
  .card-body, .card.p-4 { padding: 1rem !important; }
  .table { min-width: 720px; }
  .hero-section { min-height: auto; padding: 7rem 1rem 4rem !important; }
  .hero-section .display-4 { font-size: 2.35rem; }
  .login-wrapper, .register-card, .login-card, .recovery-card { border-radius: 15px !important; }
}


/* =========================================================
   CORRECCIONES DE CONTRASTE DEL INDEX Y TABLAS EN MÓVIL
   ========================================================= */

/* El index utiliza intencionalmente una identidad oscura completa.
   Esta clase evita que el fondo claro general deje textos blancos invisibles. */
body.landing-page {
  background: #101626 !important;
  color: #f4f7ff !important;
}
body.landing-page main,
body.landing-page section:not(.cta-section),
body.landing-page footer {
  background-color: #101626;
  color: #f4f7ff;
}
body.landing-page section.container {
  background:
    radial-gradient(circle at 12% 20%, rgba(88,120,247,.08), transparent 32%),
    #101626 !important;
}
body.landing-page h1,
body.landing-page h2,
body.landing-page h3,
body.landing-page h4,
body.landing-page h5,
body.landing-page h6,
body.landing-page .card-custom h1,
body.landing-page .card-custom h2,
body.landing-page .card-custom h3,
body.landing-page .card-custom h4,
body.landing-page .card-custom h5,
body.landing-page .card-custom h6 {
  color: #f7f9ff !important;
}
body.landing-page .text-white-50,
body.landing-page .pricing-list li {
  color: #b6c0d5 !important;
}
body.landing-page .card-custom {
  background: #171f34 !important;
  color: #eef2fb !important;
}
body.landing-page .pricing-card:not(.popular) {
  border-color: #2b3651 !important;
}
body.landing-page .navbar-brand,
body.landing-page .navbar-custom .nav-link {
  color: #f4f7ff !important;
}
body.landing-page footer,
body.landing-page footer a,
body.landing-page footer p {
  color: #b6c0d5 !important;
}

/* Permite que cada tabla se deslice con el dedo sin ensanchar toda la página. */
.table-responsive {
  display: block;
  width: 100%;
  max-width: 100%;
  overflow-x: auto !important;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  overscroll-behavior-inline: contain;
}
.table-responsive > .table {
  width: max-content !important;
  min-width: 100%;
  margin-bottom: 0 !important;
}
.table-responsive th,
.table-responsive td {
  white-space: nowrap;
}
.table-responsive td.text-wrap,
.table-responsive th.text-wrap,
.table-responsive .text-wrap {
  white-space: normal;
}

/* Evita que filas, tarjetas, gráficos o grupos de botones bloqueen el ancho móvil. */
main,
main .container,
main .container-fluid,
main .row,
main [class*="col-"],
.card,
.card-body {
  min-width: 0;
  max-width: 100%;
}
.card-body {
  overflow-wrap: anywhere;
}

@media (max-width: 767.98px) {
  html, body { max-width: 100%; overflow-x: hidden; }
  main { width: 100%; padding-left: .65rem !important; padding-right: .65rem !important; }
  main > .container-fluid { padding-left: .15rem !important; padding-right: .15rem !important; }
  .table-responsive {
    margin-inline: 0;
    border-radius: 11px;
    touch-action: pan-x pan-y;
  }
  .table-responsive > .table {
    min-width: 760px !important;
  }
  .table-responsive::after {
    content: "Desliza hacia los lados para ver más";
    display: block;
    position: sticky;
    left: 0;
    width: max-content;
    padding: .5rem .75rem;
    color: var(--sc-muted);
    font-size: .72rem;
    font-weight: 600;
    background: var(--sc-surface-solid);
    border-top: 1px solid var(--sc-border);
  }
  .btn-toolbar,
  .btn-group,
  .d-flex.gap-2,
  .d-flex.gap-3 {
    max-width: 100%;
    flex-wrap: wrap;
  }
  .navbar-main { width: 100%; }
  body.landing-page .hero-section { padding-left: .75rem; padding-right: .75rem; }
  body.landing-page .hero-section .display-4 { font-size: clamp(2.05rem, 10vw, 3rem); }
}