/* ===== BASE ===== */
:root{
  --bg:#111827; --card:#0b1220; --muted:#9ca3af; --text:#e5e7eb; --accent:#e50914;
  --radius:12px; --shadow:0 8px 24px rgba(0,0,0,.25);
  --header-h:56px;
  --sbw: clamp(220px, 22vw, 320px);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:system-ui,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
img,svg,canvas{max-width:100%;height:auto}
:where(h1,h2,h3,h4,h5,p){margin:0}

.container{max-width:1600px;width:100%;margin:0 auto;padding:16px}
.container--wide{max-width:1600px}
.container--fluid{max-width:none}

/* ===== HEADER ===== */
.header{
  position:sticky; top:0; z-index:30; height:var(--header-h);
  background:rgba(0,0,0,.35); backdrop-filter:saturate(180%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.06)
}
.header__inner{height:var(--header-h);display:flex;align-items:center;justify-content:space-between}
.brand{display:flex;align-items:center;gap:12px}
.logo{height:100px}
.brand-name{font-weight:800;letter-spacing:.2px;font-size:16px;line-height:1}
.hamburger{display:none;background:transparent;border:0;color:var(--text);padding:6px;border-radius:10px;cursor:pointer}
.nav{display:flex;align-items:center;gap:8px}
.nav-link{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:10px}
.nav-link:hover{background:rgba(255,255,255,.06)}
.hide-sm{display:inline}
.nav-avatar-wrap{position:relative}
.nav-avatar-btn{background:transparent;border:0;padding:0;display:inline-flex;align-items:center;justify-content:center;border-radius:50%;cursor:pointer}
.nav-avatar-btn img{width:36px;height:36px;border-radius:50%;object-fit:cover;border:1px solid rgba(255,255,255,.15)}
.nav-avatar-menu{position:absolute;right:0;top:calc(100% + 8px);display:none;background:var(--card);border:1px solid rgba(255,255,255,.08);border-radius:12px;min-width:160px;padding:6px;box-shadow:var(--shadow)}
.nav-avatar-menu.open{display:block}
.nav-avatar-menu a{display:block;padding:10px 12px;border-radius:10px}
.nav-avatar-menu a:hover{background:rgba(255,255,255,.06)}

/* ===== LAYOUT (sidebar fijo estable) ===== */
.layout{ padding-left: var(--sbw); min-height: calc(100dvh - var(--header-h)); }
.sidebar{
  position: fixed; left: 0; top: var(--header-h); bottom: 0;
  width: var(--sbw); overflow: auto; padding:12px;
  border-right:1px solid rgba(255,255,255,.06);
}
.content{ min-height: calc(100dvh - var(--header-h)); overflow-x:hidden; }

/* ===== SIDEBAR LINKS ===== */
.sidebar-section{display:flex;flex-direction:column;gap:8px}
.side-link{display:flex;align-items:center;gap:10px;padding:10px 12px;border-radius:10px;background:rgba(255,255,255,.06);font-weight:600}
.side-link:hover{filter:brightness(1.06)}
.side-link.active{background:var(--accent);color:#fff}
.side-link i{display:inline-flex}

/* ===== CARDS / TABLAS ===== */
.card{background:var(--card);border:1px solid rgba(255,255,255,.06);border-radius:var(--radius);padding:16px;margin-top:16px;box-shadow:var(--shadow)}
.panel-title{display:flex;align-items:baseline;justify-content:space-between;margin-bottom:10px}
.table-wrap{overflow:auto;border:1px solid rgba(255,255,255,.06);border-radius:12px;margin-top:12px}
.table{width:100%;border-collapse:collapse}
.table th,.table td{padding:10px 12px;border-bottom:1px solid rgba(255,255,255,.06);text-align:left;white-space:nowrap}
@media (max-width:900px){.table th,.table td{white-space:normal;word-break:break-word}}

/* ===== GRIDS ===== */
.grid{display:grid;gap:16px}
.grid-2{grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-4{grid-template-columns:repeat(4,minmax(0,1fr))}
.grid>*{min-width:0}

/* ===== KPIs ===== */
.page-title{margin:10px 0 12px}
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.kpi-card{background:#1f2937;padding:14px;border-radius:12px;display:flex;flex-direction:column;gap:8px;box-shadow:0 2px 4px rgba(0,0,0,.5)}
.kpi-top{display:flex;align-items:center;justify-content:space-between;color:var(--muted);font-size:13px}
.kpi-value{font-size:26px;font-weight:800;line-height:1.1}
.kpi-icon{width:16px;height:16px;flex:0 0 auto;color:var(--muted);opacity:.95}

/* ===== CHARTS (altura controlada) ===== */
.chart-card{padding:16px}
.chart-box{
  position: relative;
  height: 260px;           /* ← altura fija controlada */
  width: 100%;
}
.chart-box canvas{
  display:block;
  width:100% !important;
  height:100% !important;  /* ← el canvas ocupa la caja, no más */
}

/* ===== FORM ===== */
label{display:block;margin:8px 0 4px;font-weight:600;opacity:.95}
input,select{width:100%;padding:12px;border-radius:12px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);color:var(--text);outline:none}
input:focus,select:focus{border-color:rgba(255,255,255,.25)}
button{background:var(--accent);color:#fff;border:none;padding:12px 16px;border-radius:12px;cursor:pointer;font-weight:700}
button:hover{filter:brightness(1.05)}
.btn-secondary{background:rgba(255,255,255,.08);color:var(--text)}
.row{display:flex;gap:12px;flex-wrap:wrap}

/* ===== LOGIN ===== */
.login-wrapper{min-height:100dvh;display:flex;align-items:center;justify-content:center;background:linear-gradient(to bottom,#111827,#0b1220)}
.login-card{background:#1f2937;padding:24px;border-radius:12px;box-shadow:0 4px 12px rgba(0,0,0,.6);width:100%;max-width:380px}
.login-card h2{margin-bottom:16px;font-size:20px}

/* ===== RESPONSIVE ===== */
@media (max-width:1100px){
  .container{padding:12px}
  .grid-4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kpi-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .chart-box{ height: 220px; }   /* un poco más bajo en pantallas medianas */
}
@media (max-width:800px){
  .layout{ padding-left: 0; }
  .sidebar{
    position: fixed;
    left:0; top:var(--header-h);
    width:240px;
    height: calc(100dvh - var(--header-h));
    background:#1f2937 !important;
    transform: translateX(-100%);
    transition: transform .25s ease;
    z-index: 12;
    border-right:1px solid rgba(255,255,255,.06);
  }
  body.sidebar-open .sidebar{ transform: translateX(0); }
  .hamburger{display:inline-flex}
  .hide-sm{display:none}
  .grid-2{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr;gap:12px}
  .chart-box{ height: 200px; }    /* más compacto en móvil */
}
/* ======= HEADER OVERRIDES (Home) ======= */
/* Borde "transparente" (efecto sin línea) */
.header{
  border-bottom-color: transparent !important;
}

/* Logo más grande a la izquierda */
.brand .logo{
  height: 90px !important;   /* súbelo a 32px si quieres más grande */
  width: auto;
}
.brand-name{ display:none; } /* si quieres ocultar el texto del nombre */

@media (max-width:800px){
  .brand .logo{ height: 58px !important; }
}

/* Ocultar enlaces del header y dejar avatar + logout */
.nav .nav-link{ display: none !important; }
/* Avatar y su menú siguen funcionando: .nav-avatar-wrap /.nav-avatar-btn */

/* (Opcional) Asegurar el logout pegado a la esquina derecha si existe .nav-logout */
.nav .nav-logout{
  display:inline-flex !important;
  margin-left: 8px;
}
.profile-info{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:10px;
  margin-top:10px;
}
.profile-info div{
  background: rgba(255,255,255,0.04);
  padding:10px 12px;
  border-radius:10px;
  display:flex;
  flex-direction:column;
  gap:4px; /* 🔥 espacio entre título y dato */
}
.profile-info span{
  font-size:11px;
  opacity:.6;
  margin-bottom:2px; /* 🔥 separa del dato */
  display:block;
}

.profile-info b{
  font-size:15px;
  font-weight:600;
}
.profile-info div{
  border:1px solid rgba(255,255,255,0.05);
}
.profile-info b{
  color:#22c55e; /* verde tipo activo */
}
.avatar-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}

.avatar-form{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.avatar-form input{
  font-size:12px;
}

.avatar-form .btn{
  padding:6px;
  font-size:12px;
}
/* 🔥 GRID */
.profile-grid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:20px;
}

/* 🔥 TARJETAS */
.card{
  background:#1f2937;
  padding:20px;
  border-radius:15px;
  box-shadow:0 0 10px rgba(0,0,0,.3);
}

/* 🔥 PERFIL */
.profile-head{
  display:flex;
  gap:15px;
  align-items:center;
}

.profile-avatar{
  width:70px;
  height:70px;
  border-radius:50%;
  object-fit:cover;
}

/* 🔥 INFO */
.profile-info{
  display:grid;
  grid-template-columns: repeat(2,1fr);
  gap:10px;
}

.profile-info div{
  background:rgba(255,255,255,0.04);
  padding:8px;
  border-radius:8px;
}

.profile-info span{
  font-size:11px;
  opacity:.6;
}

.profile-info b{
  font-size:14px;
}

/* 🔥 FORM */
input{
  width:100%;
  padding:8px;
  margin:6px 0 12px;
  border-radius:6px;
  border:none;
  background:#111827;
  color:#fff;
}

.btn{
  background:#e11d48;
  padding:8px 15px;
  border-radius:8px;
  color:#fff;
  border:none;
  cursor:pointer;
}

/* 🔥 RESPONSIVE */
@media (max-width: 768px){
  .profile-grid{
    grid-template-columns: 1fr;
  }

  .profile-head{
    flex-direction:column;
    text-align:center;
  }

  .profile-info{
    grid-template-columns: 1fr;
  }
}
.avatar-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}
/* 🔥 TARJETA PERFIL MEJORADA */
.profile-card{
  display:flex;
  flex-direction:column;
  gap:15px;
}

/* 🔥 CONTENEDOR INTERNO */
.profile-head{
  display:flex;
  align-items:center;
  gap:20px;
  justify-content:center; /* 🔥 centra todo */
  width:100%;
}

/* 🔥 AVATAR */
.avatar-box{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

/* 🔥 INFO */
.profile-info{
  display:grid;
  grid-template-columns: repeat(2, 1fr);
  gap:12px;
  width:100%;
  max-width:350px; /* 🔥 controla ancho */
}

/* 🔥 TARJETITAS */
.profile-info div{
  background: rgba(255,255,255,0.05);
  padding:10px;
  border-radius:10px;
  text-align:center;
}

/* 🔥 TEXTO */
.profile-info span{
  display:block;
  font-size:11px;
  opacity:.6;
}

.profile-info b{
  font-size:14px;
}

/* 🔥 BOTÓN */
.profile-card .actions{
  display:flex;
  justify-content:center;
}
@media (max-width: 768px){

  .profile-head{
    flex-direction:column; /* 🔥 se apila */
    align-items:center;
    text-align:center;
  }

  .profile-info{
    grid-template-columns: 1fr; /* 🔥 una columna */
    width:100%;
  }

  .profile-info div{
    width:100%;
  }

}
@media (max-width: 768px){

  .profile-head{
    flex-direction:column; /* 🔥 se apila */
    align-items:center;
    text-align:center;
  }

  .profile-info{
    grid-template-columns: 1fr; /* 🔥 una columna */
    width:100%;
  }

  .profile-info div{
    width:100%;
  }

}
.profile-info div{
  border:1px solid rgba(255,255,255,0.08);
}
/* ===== UNIFICACION VISUAL FINAL ===== */

/* inputs consistentes */
input, select{
  background:#0b0f1a;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:10px;
  padding:10px;
}

input:focus, select:focus{
  border-color:#e11d48;
}

/* botones consistentes */
button, .btn{
  background:#e11d48;
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
}

button:hover, .btn:hover{
  filter:brightness(1.05);
}

/* tarjetas iguales */
.card, .panel{
  background:#111827;
  border-radius:12px;
}

/* títulos */
h2{
  font-weight:600;
  margin-bottom:16px;
}
/* 🔥 UNIFICAR TODAS LAS TARJETAS */
.panel{
  background:#1f2937 !important;
  border-radius:12px;
  padding:16px;
  box-shadow:0 4px 12px rgba(0,0,0,.4);
}
/* 🔥 INPUTS UNIFICADOS */
input, select{
  background:#111827 !important;
  border:1px solid rgba(255,255,255,.08);
  color:#fff;
  border-radius:10px;
  padding:10px;
}
/* 🔥 BOTONES IGUALES */
button, .btn{
  background:#e11d48;
  border-radius:10px;
  padding:10px 14px;
  font-weight:600;
}
/* ===== FORZAR TEMA GLOBAL UNIFICADO ===== */

/* 🔴 COLOR PRINCIPAL */
:root{
  --primary:#E50914;
  --primary-hover:#b20710;
}

/* ===== TARJETAS ===== */
.card,
.panel,
.login-card{
  background:#1f2937 !important;
  border-radius:12px !important;
  box-shadow:0 4px 12px rgba(0,0,0,.4) !important;
}

/* ===== INPUTS ===== */
input,
select{
  background:#111827 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  color:#fff !important;
  border-radius:10px !important;
  padding:10px !important;
}

/* ===== BOTONES TODOS ===== */
button,
.btn,
.btn-sec,
.btn-secondary,
a.btn{
  background:var(--primary) !important;
  color:#fff !important;
  border-radius:10px !important;
  padding:10px 14px !important;
  font-weight:600 !important;
  border:none !important;
}

/* hover */
button:hover,
.btn:hover{
  filter:brightness(1.1);
}

/* ===== BOTONES SECUNDARIOS ===== */
.btn-sec,
.btn-secondary{
  background:#374151 !important;
}

/* ===== LINKS TIPO BOTON ===== */
a{
  transition:.2s;
}

/* ===== TITULOS ===== */
h2{
  font-weight:600;
  margin-bottom:16px;
}
/* ===== MENU 3D PRO ===== */

.side-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  border-radius:10px;
  background:#1f2937;
  font-weight:600;
  transition:.2s;
  box-shadow:0 4px 10px rgba(0,0,0,.4);
}

/* hover */
.side-link:hover{
  transform:translateY(-2px);
  box-shadow:0 8px 20px rgba(0,0,0,.6);
}

/* activo */
.side-link.active{
  background:#E50914;
  color:#fff;
  box-shadow:0 6px 20px rgba(229,9,20,.6);
}
/* ===== PERFIL AJUSTADO SIN MARGEN ===== */

.profile-card{
  width:100%;           /* 🔥 ocupa todo el ancho */
  max-width:100%;       /* 🔥 elimina límite */
  margin:0;             /* 🔥 quita centrado */
  padding:14px !important;
}

/* contenedor general (si quieres margen uniforme) */
.content .profile-card{
  margin-top:10px;
}
.input-pass{
  position:relative;
}

.input-pass input{
  padding-right:40px;
}

.input-pass span{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  opacity:.7;
}

.eye-icon{
  width:18px;
  height:18px;
  stroke:#9ca3af;
  fill:none;
  stroke-width:2;
}

.input-pass span:hover .eye-icon{
  stroke:#fff;
}
.tabla-wrap{
  width:100%;
  overflow-x:auto;
}

.tabla{
  min-width:600px;
}
.filtros{
  display:flex;
  gap:10px;
  align-items:center;
  flex-wrap:nowrap;
}
@media(max-width:600px){
  .filtros{
    flex-direction:column;
  }
}
.panel .filtros{
  display:flex !important;
}
.filtros input,
.filtros select{
  width:50% !important;
}
@media(max-width:600px){
  .filtros{
    flex-direction:column;
  }

  .filtros input,
  .filtros select{
    width:100% !important;
  }
}
/* 🔥 LIMPIAR HAMBURGUESA */
.hamburger{
  background: transparent !important;
  border: none;
  box-shadow: none;
  padding:6px;
}

/* 🔥 LIMPIAR BOTÓN AVATAR */
.nav-avatar-btn{
  background: transparent !important;
  border: none;
  padding:4px;
  cursor:pointer;
}

/* 🔥 IMAGEN AVATAR */
.nav-avatar-btn img{
  width:32px;
  height:32px;
  border-radius:50%;
  display:block;
}

/* 🔥 HOVER BONITO */
.hamburger:hover,
.nav-avatar-btn:hover{
  background: rgba(255,255,255,0.05);
  border-radius:8px;
}
.pass-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.pass-row .input-pass{
  flex:1;
}

.pass-row input{
  width:100%;
}
/* ===== PASSWORD PRO ===== */

.pass-row{
  display:flex;
  gap:12px;
  width:100%;
}

.pass-row .input-pass{
  flex:1;
  position:relative;
}

.pass-row input{
  width:100%;
  padding:12px 40px 12px 12px;
  border-radius:10px;
  border:1px solid #2a2a2a;
  background:#0f172a;
  color:#fff;
}

/* icono ojo */
.input-pass .eye{
  position:absolute;
  right:10px;
  top:50%;
  transform:translateY(-50%);
  cursor:pointer;
  width:20px;
  height:20px;
  opacity:.7;
}

.input-pass .eye:hover{
  opacity:1;
}
/* tarjeta ocupa todo el ancho */
.full-width{
  grid-column: 1 / -1;
  width: 100%;
}