/* =========================================================
   MITRAFICOWEB - DARK POLISH UI
   Vuelve al look oscuro sobrio + mejoras finas
   ========================================================= */

:root{
  --mtw-bg:#eef4fb;
  --mtw-panel:#ffffff;
  --mtw-sidebar:#081426;
  --mtw-sidebar-2:#0c1930;
  --mtw-sidebar-active:#1d2c44;
  --mtw-text:#08172f;
  --mtw-muted:#60708c;
  --mtw-line:#dbe6f3;
  --mtw-line-soft:#e7eef8;
  --mtw-blue:#1464f4;
  --mtw-blue-2:#0f55d9;
  --mtw-sky:#19b7ff;
  --mtw-green:#22c55e;
  --mtw-radius:22px;
  --mtw-radius-sm:14px;
  --mtw-shadow:0 12px 30px rgba(12,33,70,.07);
  --mtw-shadow-hover:0 18px 42px rgba(12,33,70,.11);
}

html,
body{
  background:linear-gradient(180deg,#eef4fb 0%,#f7fbff 100%) !important;
  color:var(--mtw-text) !important;
  font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif !important;
  letter-spacing:-.012em !important;
  text-rendering:geometricPrecision !important;
  -webkit-font-smoothing:antialiased !important;
}

body{
  overflow-x:hidden !important;
}

/* Quitar overrides feos anteriores si quedaron por clase */
.mtw-pro-master{
  background:linear-gradient(180deg,#eef4fb 0%,#f7fbff 100%) !important;
}

/* Layout */
.layout,
.admin-layout,
.dashboard-layout,
.app-layout{
  background:transparent !important;
}

main,
.content,
.admin-content,
.dashboard-content,
.app-content{
  background:transparent !important;
  color:var(--mtw-text) !important;
}

/* Sidebar oscuro original mejorado */
aside,
.sidebar,
.admin-sidebar,
.app-sidebar,
.mtw-sidebar,
.leftbar,
nav.sidebar,
[class*="sidebar"]{
  background:
    linear-gradient(180deg,var(--mtw-sidebar) 0%,var(--mtw-sidebar-2) 100%) !important;
  color:#fff !important;
  border-right:1px solid rgba(255,255,255,.08) !important;
  box-shadow:8px 0 28px rgba(3,13,34,.22) !important;
}

aside *,
.sidebar *,
.admin-sidebar *,
.app-sidebar *,
.mtw-sidebar *,
.leftbar *,
nav.sidebar *,
[class*="sidebar"] *{
  color:#fff !important;
}

/* Logo */
.mark,
.logo-mark,
.brand .mark,
.sidebar .mark,
aside .mark{
  background:linear-gradient(135deg,#20b8ff 0%,#1185ef 100%) !important;
  color:#fff !important;
  box-shadow:0 10px 24px rgba(25,183,255,.25) !important;
  border:1px solid rgba(255,255,255,.12) !important;
}

.brand strong,
.sidebar-brand strong,
.logo strong{
  font-weight:900 !important;
  letter-spacing:-.03em !important;
}

.brand span,
.sidebar-brand span,
.logo span,
aside small,
.sidebar small{
  color:rgba(255,255,255,.72) !important;
}

/* Sidebar links */
aside a,
.sidebar a,
.admin-sidebar a,
.app-sidebar a,
.mtw-sidebar a,
.leftbar a,
nav.sidebar a,
[class*="sidebar"] a{
  color:rgba(255,255,255,.86) !important;
  background:transparent !important;
  border:1px solid transparent !important;
  border-radius:14px !important;
  font-weight:800 !important;
  text-decoration:none !important;
  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .18s ease,
    box-shadow .18s ease !important;
}

aside a:hover,
.sidebar a:hover,
.admin-sidebar a:hover,
.app-sidebar a:hover,
.mtw-sidebar a:hover,
.leftbar a:hover,
nav.sidebar a:hover,
[class*="sidebar"] a:hover{
  background:rgba(255,255,255,.075) !important;
  border-color:rgba(255,255,255,.08) !important;
  color:#fff !important;
  transform:translateX(2px) !important;
}

aside a.active,
.sidebar a.active,
.admin-sidebar a.active,
.app-sidebar a.active,
.mtw-sidebar a.active,
.leftbar a.active,
nav.sidebar a.active,
[class*="sidebar"] a.active,
aside nav a.active,
.sidebar .active,
nav .active{
  background:var(--mtw-sidebar-active) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04),0 8px 20px rgba(0,0,0,.16) !important;
}

/* Info usuario */
.side-user,
.sidebar-user,
.user-info,
.account-info{
  border-top:1px solid rgba(255,255,255,.12) !important;
  color:rgba(255,255,255,.78) !important;
}

/* Logout vuelve azul sobrio */
.logout,
a.logout,
button.logout,
aside .logout,
.sidebar .logout{
  background:linear-gradient(135deg,#1464f4 0%,#0f55d9 100%) !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 10px 22px rgba(20,100,244,.24) !important;
  font-weight:900 !important;
  transition:all .18s ease !important;
}

.logout:hover,
a.logout:hover,
button.logout:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(20,100,244,.30) !important;
}

/* Títulos */
h1{
  color:#06172f !important;
  font-size:34px !important;
  line-height:1.08 !important;
  letter-spacing:-.045em !important;
  font-weight:900 !important;
  margin-top:0 !important;
}

h2{
  color:#071936 !important;
  letter-spacing:-.035em !important;
  font-weight:850 !important;
}

h3{
  color:#071936 !important;
  letter-spacing:-.025em !important;
  font-weight:800 !important;
}

p,
.muted,
.text-muted,
small{
  color:var(--mtw-muted) !important;
}

/* Cards limpias */
.card,
.panel,
.box,
section.card,
.table-card,
.widget,
.metric,
.stats-card,
.summary-card,
.content-card,
.white-box,
.dashboard-card{
  background:#fff !important;
  border:1px solid var(--mtw-line) !important;
  border-radius:var(--mtw-radius) !important;
  box-shadow:var(--mtw-shadow) !important;
  transition:
    box-shadow .18s ease,
    border-color .18s ease,
    transform .18s ease !important;
}

.card:hover,
.panel:hover,
.box:hover,
section.card:hover,
.metric:hover,
.stats-card:hover,
.summary-card:hover{
  border-color:#cdddf1 !important;
  box-shadow:var(--mtw-shadow-hover) !important;
}

/* Cards con métricas */
.metric,
.stats-card,
.summary-card,
.card:has(.stat),
.card:has(.num){
  position:relative !important;
  overflow:hidden !important;
}

.metric::before,
.stats-card::before,
.summary-card::before,
.card:has(.stat)::before,
.card:has(.num)::before{
  content:"" !important;
  position:absolute !important;
  left:0 !important;
  top:0 !important;
  bottom:0 !important;
  width:4px !important;
  background:linear-gradient(180deg,#1464f4,#19b7ff) !important;
}

.stat,
.num,
.metric strong,
.stats-card strong,
.summary-card strong{
  color:#06172f !important;
  font-weight:900 !important;
  letter-spacing:-.04em !important;
}

/* Botones */
button,
.btn,
.button,
input[type="submit"],
input[type="button"],
a.btn{
  background:linear-gradient(135deg,#1464f4 0%,#0f55d9 100%) !important;
  color:#fff !important;
  border:0 !important;
  border-radius:13px !important;
  font-weight:850 !important;
  box-shadow:0 10px 22px rgba(20,100,244,.18) !important;
  transition:
    transform .16s ease,
    box-shadow .16s ease,
    filter .16s ease !important;
  text-decoration:none !important;
}

button:hover,
.btn:hover,
.button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
a.btn:hover{
  transform:translateY(-1px) !important;
  box-shadow:0 14px 28px rgba(20,100,244,.25) !important;
  filter:saturate(1.05) !important;
}

.btn.ghost,
.btn-outline,
.button-outline,
a.btn.ghost{
  background:#fff !important;
  color:var(--mtw-blue) !important;
  border:1px solid #cdddf1 !important;
  box-shadow:0 8px 18px rgba(15,23,42,.04) !important;
}

/* Inputs */
input,
select,
textarea{
  background:#fff !important;
  color:#071936 !important;
  border:1px solid #cdddf1 !important;
  border-radius:13px !important;
  box-shadow:none !important;
  transition:
    border-color .15s ease,
    box-shadow .15s ease,
    background .15s ease !important;
}

input:hover,
select:hover,
textarea:hover{
  border-color:#b9cce6 !important;
}

input:focus,
select:focus,
textarea:focus{
  border-color:var(--mtw-blue) !important;
  box-shadow:0 0 0 4px rgba(20,100,244,.10) !important;
  outline:0 !important;
}

label{
  color:#071936 !important;
  font-weight:850 !important;
}

::placeholder{
  color:#95a3ba !important;
}

/* Pills */
.periods a,
.range-buttons a,
.filters a,
.tabs a,
.chip,
.pill,
.badge{
  background:#fff !important;
  border:1px solid #d3e0f0 !important;
  color:#52637c !important;
  box-shadow:0 5px 12px rgba(10,35,80,.045) !important;
  border-radius:999px !important;
  transition:all .16s ease !important;
}

.periods a:hover,
.range-buttons a:hover,
.filters a:hover,
.tabs a:hover{
  transform:translateY(-1px) !important;
  border-color:#bfd2ea !important;
}

.periods a.active,
.range-buttons a.active,
.filters a.active,
.tabs a.active,
.chip.active,
.pill.active,
.badge.active{
  background:linear-gradient(135deg,#1464f4,#0f55d9) !important;
  border-color:transparent !important;
  color:#fff !important;
  box-shadow:0 10px 20px rgba(20,100,244,.20) !important;
}

/* Tablas */
table{
  width:100% !important;
  border-collapse:separate !important;
  border-spacing:0 !important;
}

th{
  background:#f7faff !important;
  color:#637089 !important;
  font-size:12px !important;
  font-weight:900 !important;
  text-transform:uppercase !important;
  letter-spacing:.025em !important;
  border-bottom:1px solid var(--mtw-line) !important;
}

td{
  color:#10213d !important;
  border-bottom:1px solid #e7eef8 !important;
}

tbody tr{
  transition:background .14s ease !important;
}

tbody tr:hover{
  background:rgba(20,100,244,.035) !important;
}

/* Barras */
.bar,
.progress,
.chart-bar{
  background:#edf3fb !important;
  border-radius:999px !important;
  overflow:hidden !important;
}

.bar span,
.progress span,
.chart-bar span,
.bar > div,
.progress > div,
.chart-bar > div{
  background:linear-gradient(90deg,#1464f4,#19b7ff) !important;
  border-radius:999px !important;
}

/* Floating live */
.live-widget,
.realtime-widget,
[class*="actualiza"],
[class*="Live"]{
  background:#07172f !important;
  color:#fff !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:0 18px 34px rgba(3,13,34,.24) !important;
}

/* Login / registro / checkout */
.login-card,
.auth-card,
.login-box,
.auth-box,
.form-auth,
main.card{
  background:#fff !important;
  border:1px solid var(--mtw-line) !important;
  border-radius:28px !important;
  box-shadow:0 24px 54px rgba(12,33,70,.12) !important;
}

/* Micro animaciones generales */
a{
  transition:color .16s ease,background .16s ease,border-color .16s ease,transform .16s ease,box-shadow .16s ease !important;
}

@media(max-width:900px){
  h1{
    font-size:30px !important;
  }

  .card,
  .panel,
  .box,
  section.card{
    border-radius:20px !important;
  }

  aside,
  .sidebar,
  .admin-sidebar,
  .app-sidebar,
  .mtw-sidebar,
  .leftbar,
  nav.sidebar,
  [class*="sidebar"]{
    box-shadow:none !important;
  }
}