/* OPA | Componentes corporativos. CSS consolidado, Bootstrap 3 + Kartik. */
/* Los valores globales se definen en opa-theme.css. */
html, body { min-height: 100%; }
body { background: var(--opa-bg); color: var(--opa-text); font: var(--opa-font-size)/1.55 var(--opa-font-family); }
h1,h2,h3,h4,h5,h6 { color: var(--opa-secondary); }
a { color: var(--opa-secondary); }
a:hover,a:focus { color: var(--opa-primary-hover); }

/* Estructura compatible con site.css y navbar fija */
.wrap { min-height: 100vh; height: auto; margin-bottom: -60px; padding-bottom: 60px; }
.wrap > .opa-main-content { padding-top: calc(var(--opa-header-height) + 18px); }
.opa-main-content { padding-left: 18px; padding-right: 18px; }
.opa-footer,.footer { min-height:60px; height:auto; background: var(--opa-surface); border-top:1px solid var(--opa-border); color: var(--opa-text-muted); padding-top:18px; }

/* Barra superior */
.navbar.navbar-inverse.opa-navbar { min-height: var(--opa-header-height); border:0; border-bottom:3px solid var(--opa-primary); background:var(--opa-secondary); box-shadow:var(--opa-shadow); }
.opa-navbar .navbar-header { min-height: var(--opa-header-height); }
.opa-navbar .navbar-brand { display:flex; align-items:center; height:calc(var(--opa-header-height) - 3px); padding:8px 15px; }
.opa-navbar .navbar-brand img,.opa-navbar img.opa-logo { display:block; max-height:45px; width:auto; max-width:100%; }
.opa-navbar .navbar-nav > li > a { color:var(--opa-text-inverse); padding:23px 12px 22px; font-size:14px; font-weight:500; }
.opa-navbar .navbar-nav > li > a:hover,
.opa-navbar .navbar-nav > li > a:focus,
.opa-navbar .navbar-nav > .open > a,
.opa-navbar .navbar-nav > .open > a:hover,
.opa-navbar .navbar-nav > .open > a:focus,
.opa-navbar .navbar-nav > .active > a,
.opa-navbar .navbar-nav > .active > a:hover { background:#292929; color:var(--opa-primary); }
.opa-navbar .navbar-toggle { border-color:var(--opa-primary); }
.opa-navbar .navbar-toggle .icon-bar { background:var(--opa-primary); }
.opa-navbar .navbar-toggle:hover,.opa-navbar .navbar-toggle:focus { background:#292929; }

/* Saludo visible junto a Salir, sin enlace */
.opa-navbar .navbar-nav > li.opa-user-item { color:var(--opa-text-inverse); padding:22px 10px; font-size:13px; white-space:nowrap; }
.opa-navbar .navbar-nav > li.opa-user-item > span { color:inherit; }
.opa-navbar .navbar-nav > li > a.opa-logout-link { color:var(--opa-primary); font-weight:600; }
.opa-navbar .navbar-nav > li > a.opa-logout-link:hover { color:#fff; }

/* Menús y submenús, incluyendo estado azul de Bootstrap 3 */
.opa-navbar .dropdown-menu { min-width:220px; padding:5px 0; border:1px solid var(--opa-border); border-radius:var(--opa-radius-sm); background:var(--opa-surface); box-shadow:var(--opa-shadow-lg); }
.opa-navbar .dropdown-menu > li > a { padding:10px 16px; font-size:14px; line-height:1.35; color:var(--opa-text); white-space:normal; }
.opa-navbar .dropdown-menu > li > a:hover,
.opa-navbar .dropdown-menu > li > a:focus,
.opa-navbar .dropdown-menu > .active > a,
.opa-navbar .dropdown-menu > .active > a:hover,
.opa-navbar .dropdown-menu > .active > a:focus,
.opa-navbar .dropdown-menu > li.open > a { background:var(--opa-primary-soft); color:var(--opa-secondary); }
.opa-navbar .dropdown-submenu { position:relative; }
.opa-navbar .dropdown-submenu > .dropdown-menu { top:-5px; left:100%; margin-left:2px; }
.opa-navbar .dropdown-submenu > a:after { border-left-color:var(--opa-text-muted); }
.opa-navbar .dropdown-submenu:hover > a:after { border-left-color:var(--opa-primary); }

/* Dashboard: no hay hero negro ni su bloque vertical */
.opa-dashboard { max-width:1440px; margin:0 auto 40px; padding:0 12px; }
.opa-dashboard-section { margin:0; }
.opa-dashboard-heading { margin-bottom:22px; }
.opa-dashboard-heading h1 { font-size:26px; font-weight:700; margin:0 0 6px; }
.opa-dashboard-heading p { color:var(--opa-text-muted); font-size:14px; margin:0; }
.opa-dashboard-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:22px; }
.opa-dashboard-card { display:flex; flex-direction:column; min-height:235px; background:var(--opa-surface); padding:26px; border:1px solid var(--opa-border); border-radius:var(--opa-radius-md); box-shadow:var(--opa-shadow); text-decoration:none !important; transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease; }
.opa-dashboard-card:hover,.opa-dashboard-card:focus { transform:translateY(-3px); border-color:var(--opa-primary); box-shadow:var(--opa-shadow-lg); }
.opa-dashboard-card > .glyphicon { display:flex; align-items:center; justify-content:center; width:56px; height:56px; margin-bottom:22px; border-radius:var(--opa-radius-md); background:var(--opa-primary-soft); color:var(--opa-primary); font-size:24px; }
.opa-dashboard-card h2 { font-size:21px; font-weight:700; margin:0 0 10px; }
.opa-dashboard-card p { color:var(--opa-text-muted); font-size:14px; line-height:1.6; margin:0 0 20px; }
.opa-dashboard-card-action { margin-top:auto; color:var(--opa-primary-hover); font-size:14px; font-weight:700; }
.opa-dashboard-guest { padding:24px; background:var(--opa-surface); border:1px solid var(--opa-border); border-radius:var(--opa-radius-md); }

/* Componentes CRUD existentes */
.panel,.well { background:var(--opa-surface); border:1px solid var(--opa-border); border-radius:var(--opa-radius-md); box-shadow:var(--opa-shadow); }
.btn { border-radius:var(--opa-radius-sm); font-weight:500; }
.btn-primary { background:var(--opa-primary); border-color:var(--opa-primary); color:var(--opa-secondary); }
.btn-primary:hover,.btn-primary:focus,.btn-primary:active { background:var(--opa-primary-hover); border-color:var(--opa-primary-hover); color:var(--opa-secondary); }
.btn-default { background:var(--opa-surface); border-color:var(--opa-border); color:var(--opa-text); }
.form-control { border:1px solid var(--opa-border); border-radius:var(--opa-radius-sm); box-shadow:none; }
.form-control:focus { border-color:var(--opa-primary); box-shadow:0 0 0 2px var(--opa-primary-soft); }
.table { background:var(--opa-surface); }
.table > thead > tr > th { background:var(--opa-bg); border-bottom:2px solid var(--opa-border); color:var(--opa-secondary); }
.table > tbody > tr > td { border-top:1px solid var(--opa-border); vertical-align:middle; }
.table-hover > tbody > tr:hover { background:var(--opa-primary-soft); }
.pagination > .active > a,.pagination > .active > a:hover,.pagination > .active > a:focus { background:var(--opa-primary); border-color:var(--opa-primary); color:var(--opa-secondary); }
.alert { border-radius:var(--opa-radius-sm); }

@media(max-width:1250px) and (min-width:768px) {
  .opa-navbar .navbar-nav > li > a { padding-left:8px; padding-right:8px; font-size:13px; }
  .opa-navbar .navbar-brand img { max-height:36px; }
  .opa-navbar .navbar-nav > li.opa-user-item { padding-left:7px; padding-right:7px; }
}
@media(max-width:1100px) { .opa-dashboard-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:767px) {
  .wrap > .opa-main-content { padding-top:calc(var(--opa-header-height) + 14px); }
  .opa-navbar .navbar-nav > li > a { padding:11px 15px; }
  .opa-navbar .navbar-nav > li.opa-user-item { padding:11px 15px; }
  .opa-navbar .navbar-collapse { border-color:var(--opa-primary); max-height:calc(100vh - 78px); }
  .opa-navbar .dropdown-menu { box-shadow:none; min-width:auto; border:0; border-radius:0; }
  .opa-navbar .navbar-nav .open .dropdown-menu > li > a { color:#eee; padding:10px 25px; }
  .opa-navbar .navbar-nav .open .dropdown-menu > li > a:hover,
  .opa-navbar .navbar-nav .open .dropdown-menu > li > a:focus { color:var(--opa-primary); background:#292929; }
  .opa-navbar .dropdown-submenu > .dropdown-menu { position:static; margin-left:12px; }
  .opa-dashboard { padding:0 4px; }
  .opa-dashboard-grid { grid-template-columns:1fr; gap:14px; }
  .opa-dashboard-card { min-height:180px; }
}
/* ==========================================
   OPA - AJUSTES DE CABECERA Y CONTENIDO
   ========================================== */

:root {
    --opa-header-height: 64px;
}
/* ===== AJUSTE DE ESPACIADO SUPERIOR ===== */

:root {
    --opa-navbar-height: 72px;
    --opa-content-top-space: 38px;
}

.wrap > .container-lfuid {
    padding-top: calc(var(--opa-navbar-height) + var(--opa-content-top-space));
    padding-left: 32px;
    padding-right: 32px;
    padding-bottom: 30px;
}

/* Dashboard */
.opa-dashboard {
    margin-top: 0;
}

.opa-dashboard-section {
    margin-top: 0;
}

/* Corrige logo muy grande */
.navbar-brand {
    height: var(--opa-navbar-height);
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-brand img {
    width: auto !important;
    max-height: 46px !important;
    display: block;
}

/* Mantener enlaces del menú centrados verticalmente */
.navbar-nav > li > a {
    padding-top: 26px;
    padding-bottom: 26px;
}

/* Responsive */
@media (max-width: 991px) {
    .wrap > .container-lfuid {
        padding-top: 105px;
        padding-left: 18px;
        padding-right: 18px;
    }
}
/* Mantener el contenido debajo del menú fijo */


/* Inicio */
.opa-dashboard {
    margin-top: 0;
}

/* Ajustar altura del logotipo */
.navbar-brand {
    height: 64px;
    padding-top: 10px;
    padding-bottom: 10px;
}

.navbar-brand img {
    width: auto !important;
    max-height: 42px;
    object-fit: contain;
}

/* Ajustar navegación a la misma altura */
.navbar-nav > li > a {
    padding-top: 22px;
    padding-bottom: 22px;
}

/* Dispositivos móviles */
@media (max-width: 767px) {
    .navbar-nav > li > a {
        padding-top: 12px;
        padding-bottom: 12px;
    }
}