/* ==========================================================
   El Comedorcito - tema de marca (se carga DESPUES de los css
   de la plantilla para sobreescribir sus colores)
   Paleta tomada del logo:
     café oscuro  #3A1D0E   (letras COMEDORCITO)
     dorado       #D4922A   (vapor y línea curva)
     ladrillo     #B03A20   (texto "EL")
     crema        #FBF8F1   (fondo del logo)
   ========================================================== */
:root{
  --cafe:#3A1D0E;
  --cafe-2:#512a14;
  --cafe-3:#6b3a1d;
  --dorado:#D4922A;
  --dorado-2:#E8AC4A;
  --ladrillo:#B03A20;
  --ladrillo-2:#8f2d17;
  --crema:#FBF8F1;
  --crema-2:#F3ECDD;
  --borde:#E6DAC4;
  --texto:#3A1D0E;
  --texto-suave:#8a6a52;
}

body{ background:var(--crema); color:var(--texto); }
a{ color:var(--ladrillo); }
a:hover,a:focus{ color:var(--ladrillo-2); }
h1,h2,h3,h4,h5,h6{ color:var(--cafe); }

/* ---------- Barra superior (simétrica, centrada en vertical) ---------- */
.navbar,
.navbar-inverse{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  min-height:60px;
  padding:0 18px !important;
  background:var(--crema) !important;
  background-image:none !important;
  border:0 !important;
  border-bottom:3px solid var(--dorado) !important;
  border-radius:0 !important;
  box-shadow:0 4px 14px rgba(58,29,14,.10);
}
.navbar:before,.navbar:after{ display:none !important; }
.navbar-inverse .navbar-header{ float:none !important; margin:0 !important; display:flex; align-items:center; }
.navbar-inverse .navbar-brand{
  float:none !important; height:auto !important;
  padding:6px 0 !important; margin:0 !important;
  background:transparent !important;
}
.navbar-inverse .navbar-brand img{
  width:auto !important; height:46px; display:block;
  mix-blend-mode:multiply;           /* funde el fondo del logo con la barra */
}
.navbar-inverse .navbar-nav{
  float:none !important; margin:0 !important;
  display:flex; align-items:center; gap:10px;
}
.navbar-inverse .nav > li{ float:none !important; border:0 !important; }
.navbar-inverse .nav > li > a,
.navbar-inverse .nav > li.dropdown > a{
  display:flex; align-items:center; gap:6px;
  padding:8px 16px !important; line-height:1 !important;
  color:var(--cafe) !important; text-shadow:none !important;
  background:transparent !important;
  border:1px solid var(--borde) !important;
  border-radius:999px;
  transition:all .2s ease;
}
.navbar-inverse .nav > li > a:hover,
.navbar-inverse .nav > li.open > a{
  background:#fff !important; color:var(--ladrillo) !important;
  border-color:var(--dorado) !important;
  box-shadow:0 2px 8px rgba(212,146,42,.25);
}
.navbar-inverse .nav > li > a i,
.navbar-inverse .nav .settings a i{ color:var(--dorado) !important; font-size:16px; }
.navbar-inverse .navbar-toggle{ border-color:var(--dorado); border-radius:8px; }
.navbar-inverse .navbar-toggle .icon-bar{ background:var(--cafe); }

/* ---------- Menú lateral ---------- */
#sidebar-nav{
  background:linear-gradient(180deg,var(--cafe) 0%,#2b1409 100%) !important;
  border:0 !important;
  min-height:calc(100vh - 63px);
  padding:18px 0 !important;
  box-shadow:4px 0 18px rgba(58,29,14,.18);
}
#dashboard-menu{ background:transparent !important; margin:0 !important; padding:0 12px !important; }
#dashboard-menu > li{
  border:0 !important; background:none !important;
  margin:0 0 8px 0 !important; padding:0 !important;
}
#dashboard-menu > li:before,#dashboard-menu > li:after,
#dashboard-menu > li > a:before,#dashboard-menu > li > a:after{ display:none !important; }
#dashboard-menu > li > a{
  display:flex !important; align-items:center; gap:12px;
  padding:11px 14px !important;
  color:#EBDCC6 !important;
  background:rgba(255,255,255,.04) !important;
  border:1px solid rgba(212,146,42,.28) !important;
  border-radius:12px !important;
  text-shadow:none !important; box-shadow:none !important;
  font-weight:600; letter-spacing:.2px;
  transition:all .2s ease;
}
#dashboard-menu > li > a i{
  color:var(--dorado) !important; font-size:18px; width:22px; text-align:center; margin:0 !important;
}
#dashboard-menu > li > a span{ flex:1; text-shadow:none !important; font-weight:600; }
#dashboard-menu > li > a i.icon-chevron-down{ font-size:11px; width:auto; opacity:.7; transition:transform .2s; }
#dashboard-menu > li > a:hover{
  background:rgba(212,146,42,.16) !important;
  border-color:var(--dorado) !important;
  color:#fff !important;
  transform:translateX(2px);
}
#dashboard-menu > li.active > a,
#dashboard-menu > li.active > a:hover{
  background:linear-gradient(135deg,var(--dorado) 0%,var(--dorado-2) 100%) !important;
  border-color:var(--dorado-2) !important;
  color:var(--cafe) !important;
  box-shadow:0 4px 12px rgba(212,146,42,.35) !important;
}
#dashboard-menu > li.active > a i,
#dashboard-menu > li.active > a span{ color:var(--cafe) !important; }
#dashboard-menu .pointer{ display:none !important; }

/* submenú */
#dashboard-menu .submenu{
  background:rgba(0,0,0,.18) !important;
  border:1px solid rgba(212,146,42,.18) !important;
  border-radius:10px !important;
  margin:6px 0 0 0 !important; padding:6px !important;
  box-shadow:none !important;
}
#dashboard-menu .submenu li{ border:0 !important; background:none !important; margin:0 !important; }
#dashboard-menu .submenu li a{
  display:block; padding:8px 12px 8px 26px !important;
  color:#EBDCC6 !important; font-weight:400 !important;
  text-shadow:none !important; box-shadow:none !important;
  border:0 !important; border-radius:8px !important; position:relative;
}
#dashboard-menu .submenu li a:before{
  content:""; position:absolute; left:12px; top:50%; width:5px; height:5px;
  margin-top:-2.5px; border-radius:50%; background:var(--dorado);
}
#dashboard-menu .submenu li a:hover,
#dashboard-menu .submenu li.active a{
  background:rgba(212,146,42,.2) !important; color:var(--dorado-2) !important;
}

/* ---------- Contenido con imagen de fondo ---------- */
.content{
  background:
    radial-gradient(ellipse at 85% 0%,rgba(212,146,42,.12),transparent 55%),
    url(../img/assets/fondo_comedorcito.svg),
    var(--crema) !important;
  min-height:calc(100vh - 63px);
  padding:24px !important;
}
#main-stats{
  background:transparent !important; border:0 !important; margin:0 0 22px 0 !important; padding:0 !important;
}
#main-stats .stats-row{ display:flex; flex-wrap:wrap; gap:16px; margin:0 !important; }
#main-stats .stat{
  float:none !important; width:auto !important; min-width:230px;
  background:rgba(255,255,255,.92) !important;
  border:1px solid var(--borde) !important;
  border-radius:16px !important;
  border-top:4px solid var(--dorado) !important;
  box-shadow:0 6px 18px rgba(58,29,14,.08);
  padding:16px 26px !important;
  backdrop-filter:blur(4px);
}
#main-stats .stat .data{ color:var(--cafe) !important; text-transform:uppercase; font-size:13px; letter-spacing:.6px; }
#main-stats .stat .data .number{
  color:var(--dorado) !important; display:block; font-size:34px !important; line-height:1.1; margin-bottom:4px;
}
#pad-wrapper{
  background:rgba(255,255,255,.88) !important;
  border:1px solid var(--borde) !important;
  border-radius:16px !important;
  box-shadow:0 6px 18px rgba(58,29,14,.06);
  padding:22px !important;
  min-height:300px;
  /* Sin backdrop-filter: crea un contexto que hace que los modales (position:fixed) se ubiquen
     dentro de este contenedor y no en la pantalla, obligando a scrollear para verlos. */
}

/* ---------- Botones ---------- */
.btn-flat,
.btn-flat.default{ background:var(--crema-2) !important; color:var(--cafe) !important; border-color:var(--borde) !important; }
.btn-flat.primary,
.btn-flat.success,
.btn-primary,
.btn-success{
  background:var(--dorado) !important;
  border-color:var(--dorado) !important;
  color:#fff !important;
}
.btn-flat.primary:hover,.btn-flat.success:hover,.btn-primary:hover,.btn-success:hover{
  background:var(--dorado-2) !important;
}
.btn-flat.danger,
.btn-danger{
  background:var(--ladrillo) !important;
  border-color:var(--ladrillo) !important;
  color:#fff !important;
}
.btn-flat.danger:hover,.btn-danger:hover{ background:var(--ladrillo-2) !important; }
.btn-flat.gray,.btn-flat.inverse{ background:var(--cafe) !important; color:#fff !important; }
.btn-flat.info,.btn-info{ background:var(--cafe-3) !important; border-color:var(--cafe-3) !important; color:#fff !important; }

/* ---------- Formularios ---------- */
.form-control:focus,
input:focus,select:focus,textarea:focus{
  border-color:var(--dorado) !important;
  box-shadow:0 0 0 3px rgba(212,146,42,.25) !important;
  outline:0;
}
label{ color:var(--cafe); }

/* ---------- Tablas ---------- */
.table > thead > tr > th{
  background:var(--cafe) !important;
  color:#fff !important;
  border-color:var(--cafe) !important;
}
.table-striped > tbody > tr:nth-child(odd) > td{ background:var(--crema-2) !important; }
.table-hover > tbody > tr:hover > td{ background:#F7E7C8 !important; }
.table > tbody > tr > td{ border-color:var(--borde) !important; }

/* ---------- Alertas ---------- */
.alert-info{ background:#F7E7C8 !important; border-color:var(--dorado) !important; color:var(--cafe) !important; }
.alert-danger{ background:#F6DDD7 !important; border-color:var(--ladrillo) !important; color:var(--ladrillo-2) !important; }
.alert-success{ background:#E9F0DA !important; border-color:#7a9a3a !important; color:#41531b !important; }

/* ---------- Paginación / pestañas ---------- */
.pagination > .active > a,
.pagination > .active > span{ background:var(--dorado) !important; border-color:var(--dorado) !important; color:#fff !important; }
.pagination > li > a{ color:var(--ladrillo); }
.nav-tabs > li.active > a{ border-top:3px solid var(--dorado) !important; color:var(--cafe) !important; }
.label-primary,.badge{ background:var(--dorado) !important; }

/* ---------- Pantalla de acceso ---------- */
html.login-bg,
.login-bg{
  background:linear-gradient(160deg,var(--cafe) 0%,var(--cafe-2) 55%,var(--cafe-3) 100%) fixed !important;
  background-image:linear-gradient(160deg,var(--cafe) 0%,var(--cafe-2) 55%,var(--cafe-3) 100%) !important;
}
.login-wrapper{ text-align:center; }
.login-wrapper .logo{
  width:340px !important; max-width:80%;
  background:var(--crema); padding:14px 22px; border-radius:14px !important;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  margin-bottom:22px;
}
.login-wrapper .box{
  background:var(--crema) !important;
  border-radius:12px; border-top:5px solid var(--dorado);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
}
.login-wrapper .box .content-wrap h6{ color:var(--cafe) !important; }
.login-wrapper .box .btn-flat.login{ background:var(--ladrillo) !important; }
.login-wrapper .box .btn-flat.login:hover{ background:var(--ladrillo-2) !important; }

/* ---------- Detalles ---------- */
::selection{ background:var(--dorado); color:#fff; }
.ui-widget-header{ background:var(--cafe) !important; border-color:var(--cafe) !important; color:#fff !important; }
.ui-state-active,.ui-state-hover{ background:var(--dorado) !important; border-color:var(--dorado) !important; color:#fff !important; }