/*=================================================
=          EL JEQUE SHAWARMA & KEBAB               =
=          Sistema de diseño (sidebar layout)      =
==================================================*/

:root{
  --morado:   #2B1462;
  --morado-2: #4B1FA8;
  --fucsia:   #E91E63;
  --naranja:  #FF8A00;
  --fondo:    #F4F6F9;
  --blanco:   #FFFFFF;
}

*{ box-sizing:border-box; }

body{
  background: var(--fondo);
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
  margin:0;
}

a{ text-decoration:none; }

/*-------------------------
Estructura general (app)
--------------------------*/

.app{
  display:flex;
  min-height:100vh;
}

/*-------------------------
Sidebar
--------------------------*/

.sidebar{
  width:260px;
  flex-shrink:0;
  background: var(--morado);
  color:#fff;
  display:flex;
  flex-direction:column;
  padding-bottom:20px;
}

.sidebar-brand{
  text-align:center;
  padding:28px 16px 20px;
  border-bottom:1px solid rgba(255,255,255,.12);
}

.sidebar-brand img{
  width:90px;
  height:90px;
  object-fit:cover;
  border-radius:50%;
  border:3px solid var(--naranja);
  margin-bottom:10px;
}

.sidebar-brand h1{
  font-size:18px;
  font-weight:800;
  color:#fff;
  margin:0;
  letter-spacing:.5px;
}

.sidebar-brand span{
  display:block;
  font-size:11px;
  color:var(--naranja);
  font-weight:600;
  letter-spacing:1px;
}

.sidebar-nav{
  list-style:none;
  margin:16px 0 0;
  padding:0 12px;
  flex:1;
}

.sidebar-nav li{ margin-bottom:6px; }

.sidebar-nav a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  color:#e6e1f5;
  font-weight:500;
  font-size:15px;
  transition:.2s;
}

.sidebar-nav a i{ font-size:18px; width:20px; text-align:center; }

.sidebar-nav a:hover{
  background:rgba(255,255,255,.08);
  color:#fff;
}

.sidebar-nav a.active{
  background: var(--fucsia);
  color:#fff;
  box-shadow:0 6px 16px rgba(233,30,99,.35);
}

.sidebar-footer{ padding:0 12px; }

.sidebar-footer a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  border-radius:12px;
  color:#f3d7d7;
  font-weight:500;
  border-top:1px solid rgba(255,255,255,.12);
  margin-top:8px;
  padding-top:16px;
}

.sidebar-footer a:hover{ color:#fff; }

/*-------------------------
Topbar
--------------------------*/

.topbar{
  background: var(--morado);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:14px 26px;
  box-shadow:0 5px 15px rgba(0,0,0,.15);
}

.topbar .brand{
  display:flex;
  align-items:center;
  gap:12px;
}

.topbar .brand img{
  width:42px; height:42px; border-radius:50%; object-fit:cover;
}

.topbar .brand h2{
  font-size:19px;
  margin:0;
  font-weight:800;
}

.topbar .brand span{
  display:block;
  font-size:11px;
  color:var(--naranja);
  font-weight:700;
  letter-spacing:1px;
}

.topbar .user{
  display:flex;
  align-items:center;
  gap:18px;
}

.topbar .user .avatar{
  width:36px;height:36px;border-radius:50%;
  background:var(--fucsia);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;
}

.menu-toggle{
  background:none;border:none;color:#fff;font-size:22px;cursor:pointer;display:none;
}

/*-------------------------
Contenido principal
--------------------------*/

.main{
  flex:1;
  min-width:0;
}

.main-content{
  padding:28px;
}

.page-title h1{
  font-size:26px;
  color:var(--morado);
  font-weight:800;
  margin:0 0 4px;
}

.breadcrumb-custom{
  font-size:13px;
  color:#8a8fa3;
}

.breadcrumb-custom a{ color: var(--fucsia); }

/*-------------------------
Tarjetas de estadisticas
--------------------------*/

.stat-card{
  background:var(--blanco);
  border-radius:18px;
  padding:20px 22px;
  box-shadow:0 8px 20px rgba(43,20,98,.07);
  display:flex;
  align-items:center;
  gap:16px;
  height:100%;
}

.stat-icon{
  width:52px;height:52px;
  border-radius:14px;
  display:flex;align-items:center;justify-content:center;
  font-size:22px;
  color:#fff;
  flex-shrink:0;
}

.stat-icon.morado{ background:var(--morado); }
.stat-icon.fucsia{ background:var(--fucsia); }
.stat-icon.naranja{ background:var(--naranja); }
.stat-icon.verde{ background:#22c55e; }

.stat-card .label{
  font-size:13px;
  color:#8a8fa3;
  font-weight:600;
}

.stat-card .value{
  font-size:24px;
  font-weight:800;
  color:var(--morado);
  line-height:1.2;
}

.stat-card .trend{
  font-size:12px;
  color:#22c55e;
  font-weight:600;
}

/*-------------------------
Tarjetas / paneles
--------------------------*/

.panel{
  background:var(--blanco);
  border-radius:18px;
  padding:22px;
  box-shadow:0 8px 20px rgba(43,20,98,.07);
}

.panel h3{
  color:var(--morado);
  font-weight:800;
  font-size:18px;
  margin:0;
}

.card{
  border:none;
  border-radius:18px;
  box-shadow:0 8px 20px rgba(43,20,98,.07);
  transition:.25s;
}

.card:hover{ transform:translateY(-3px); }

.card-header{
  background:var(--morado);
  color:#fff;
  font-weight:700;
  border-radius:18px 18px 0 0 !important;
}

/*-------------------------
Botones
--------------------------*/

.btn-primary{ background:var(--morado); border:none; }
.btn-primary:hover{ background:var(--morado-2); }

.btn-success{ background:var(--naranja); border:none; }
.btn-success:hover{ background:#e67a00; }

.btn-warning{ background:var(--fucsia); border:none; color:#fff; }
.btn-warning:hover{ background:#c2185b; color:#fff; }

.btn-danger{ border:none; }

/*-------------------------
Tabla
--------------------------*/

.table thead th{
  color:#8a8fa3;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.5px;
  border:none;
  font-weight:700;
}

.table td{ vertical-align:middle; border-color:#eef0f5; }

.table-dark{ background:var(--morado) !important; }
.table-dark th{ background:var(--morado) !important; }

/*-------------------------
Badges de estado
--------------------------*/

.badge-estado{
  padding:6px 14px;
  border-radius:20px;
  font-size:12.5px;
  font-weight:700;
}

.badge-pendiente{ background:#e0edff; color:#2563eb; }
.badge-preparando{ background:#ffe9cc; color:#c76a00; }
.badge-pagado, .badge-completado{ background:#d9f7e6; color:#15803d; }
.badge-cancelado{ background:#fde0e0; color:#c81e1e; }

/*-------------------------
Login
--------------------------*/

.login-wrapper{
  display:flex;
  min-height:100vh;
}

.login-hero{
  flex:1;
  background: linear-gradient(160deg, var(--naranja), #ff6a00);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  color:#fff;
  text-align:center;
  padding:40px;
  position:relative;
  overflow:hidden;
}

.login-hero img{
  width:200px;
  height:200px;
  object-fit:cover;
  border-radius:50%;
  border:6px solid #fff;
  box-shadow:0 15px 35px rgba(0,0,0,.25);
  margin-bottom:22px;
}

.login-hero h1{
  font-size:30px;
  font-weight:900;
  margin:0 0 6px;
}

.login-hero p{
  font-size:14px;
  opacity:.9;
  margin:0;
}

.login-form-side{
  flex:1;
  background:var(--fondo);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:40px;
}

.login-card{
  background:#fff;
  width:100%;
  max-width:380px;
  border-radius:20px;
  padding:36px 32px;
  box-shadow:0 20px 45px rgba(43,20,98,.12);
}

.login-card h2{
  color:var(--morado);
  font-weight:800;
  margin-bottom:4px;
}

.login-card .subtitle{
  color:#8a8fa3;
  font-size:14px;
  margin-bottom:26px;
}

.login-card .form-control{
  border-radius:12px;
  padding:12px 14px;
  border:1px solid #e3e6ee;
}

.login-card .input-group-text{
  border-radius:12px 0 0 12px;
  background:#f4f6f9;
  border:1px solid #e3e6ee;
  border-right:none;
  color:var(--morado);
}

.login-card .btn-login{
  background: var(--morado);
  border:none;
  border-radius:12px;
  padding:12px;
  font-weight:700;
  width:100%;
  color:#fff;
}

.login-card .btn-login:hover{ background:var(--morado-2); color:#fff; }

/*-------------------------
Responsive
--------------------------*/

@media(max-width:900px){
  .sidebar{
    position:fixed;
    left:-260px;
    top:0;
    bottom:0;
    z-index:1000;
    transition:.25s;
  }
  .sidebar.open{ left:0; }
  .menu-toggle{ display:block; }
  .login-wrapper{ flex-direction:column; }
  .login-hero{ padding:30px 20px; }
}