@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
:root{
  --cul-navy:#0b2a5b; --cul-navy2:#13407e; --cul-gold:#f4a81d;
  --cul-bg:#eef2f8; --cul-card:#fff; --cul-text:#222b38;
  --cul-muted:#6b7686; --cul-border:#e4e8f0; --cul-success:#17a673; --cul-danger:#e05260;
}
body{ background:var(--cul-bg)!important; color:var(--cul-text)!important;
  font-family:'Inter',system-ui,Segoe UI,Roboto,sans-serif!important; }

/* Barra superior */
.navbar-inner,.navbar .navbar-inner,#user-nav,.subnavbar .subnavbar-inner{
  background:linear-gradient(90deg,var(--cul-navy),var(--cul-navy2))!important;
  border:none!important; box-shadow:0 2px 10px rgba(11,42,91,.18)!important; }
.navbar .nav>li>a,.navbar .brand{ color:#eaf0fb!important; font-weight:500!important; text-shadow:none!important; }
.navbar .nav>li>a:hover,.navbar .nav>li.active>a{ background:rgba(255,255,255,.12)!important; color:#fff!important; }
.navbar .nav>li>a i{ color:var(--cul-gold)!important; }

/* Contenido */
#content,.main{ background:transparent!important; }
h1.text-center{ color:var(--cul-navy)!important; font-weight:700!important; letter-spacing:.3px; }

/* Tarjetas */
.widget-box{ background:var(--cul-card)!important; border:1px solid var(--cul-border)!important;
  border-radius:14px!important; box-shadow:0 6px 20px rgba(23,38,77,.06)!important; overflow:hidden!important; margin-bottom:20px!important; }
.widget-title{ background:#f7f9fc!important; border-bottom:1px solid var(--cul-border)!important; border-radius:14px 14px 0 0!important; }
.widget-title h5,.widget-title span{ color:var(--cul-navy)!important; font-weight:600!important; text-shadow:none!important; }

/* Tablas */
.table{ background:var(--cul-card)!important; border-collapse:separate!important; border-spacing:0!important; }
.table thead th,.table th{ background:var(--cul-navy)!important; color:#fff!important; font-weight:600!important;
  border:none!important; text-transform:uppercase; font-size:11px; letter-spacing:.4px; padding:12px 10px!important; }
.table td{ border-top:1px solid var(--cul-border)!important; vertical-align:middle!important; padding:10px!important; }
.table tbody tr:hover>td{ background:#f3f7ff!important; }

/* Botones */
.btn{ border-radius:9px!important; border:none!important; font-weight:500!important; box-shadow:none!important;
  background-image:none!important; padding:7px 14px!important; text-shadow:none!important; }
.btn-success{ background:var(--cul-success)!important; color:#fff!important; }
.btn-info,.btn-primary{ background:var(--cul-navy2)!important; color:#fff!important; }
.btn-danger{ background:var(--cul-danger)!important; color:#fff!important; }
.btn:hover{ filter:brightness(1.07); }

/* Formularios */
input[type=text],input[type=password],input[type=email],input[type=date],input[type=file],select,textarea{
  border:1px solid var(--cul-border)!important; border-radius:9px!important; padding:8px 10px!important;
  box-shadow:none!important; background:#fff!important; color:var(--cul-text)!important; }
input:focus,select:focus,textarea:focus{ border-color:var(--cul-navy2)!important; box-shadow:0 0 0 3px rgba(19,64,126,.12)!important; }

/* Paginacion */
.pagination ul{ box-shadow:none!important; border-radius:9px!important; }
.pagination ul>li>a{ color:var(--cul-navy2)!important; border-color:var(--cul-border)!important; }
.pagination ul>li.active>a{ background:var(--cul-navy)!important; color:#fff!important; border-color:var(--cul-navy)!important; }

/* Modales */
.modal{ border-radius:14px!important; overflow:hidden; box-shadow:0 20px 60px rgba(11,42,91,.3)!important; }
.modal-header{ background:var(--cul-navy)!important; border-bottom:none!important; }
.modal-header h3{ color:#fff!important; }

/* Barra superior (Maruti subnavbar/mainnav) */
.subnavbar,.subnavbar .subnavbar-inner,.mainnav,ul.mainnav{
  background:linear-gradient(90deg,var(--cul-navy),var(--cul-navy2))!important;
  border:none!important; box-shadow:0 2px 10px rgba(11,42,91,.18)!important; }
.mainnav>li>a,.subnavbar ul>li>a{ color:#eaf0fb!important; font-weight:500!important; text-shadow:none!important; background:transparent!important; }
.mainnav>li>a:hover,.mainnav>li.active>a,.subnavbar ul>li>a:hover,.subnavbar ul>li.active>a{ background:rgba(255,255,255,.14)!important; color:#fff!important; }
.mainnav>li>a i,.subnavbar ul>li>a i{ color:var(--cul-gold)!important; }
.dropdown-menu{ border-radius:10px!important; box-shadow:0 10px 30px rgba(11,42,91,.2)!important; border:1px solid var(--cul-border)!important; padding:6px!important; }
.dropdown-menu>li>a{ color:var(--cul-navy)!important; border-radius:6px!important; }
.dropdown-menu>li>a:hover{ background:var(--cul-navy)!important; color:#fff!important; }

/* Barra superior real: #sidebar */
#sidebar{
  background:linear-gradient(90deg,var(--cul-navy),var(--cul-navy2))!important;
  border:none!important; box-shadow:0 2px 10px rgba(11,42,91,.2)!important; }
#sidebar > ul > li > a{ color:#eaf0fb!important; font-weight:500!important; text-shadow:none!important; background:transparent!important; }
#sidebar > ul > li > a:hover, #sidebar > ul > li.active > a, #sidebar > ul > li.open > a{ background:rgba(255,255,255,.14)!important; color:#fff!important; }
#sidebar > ul > li > a i{ color:var(--cul-gold)!important; }
#sidebar .caret{ border-top-color:#eaf0fb!important; }

/* Barra superior #sidebar (alta especificidad) */
html body div#sidebar{
  background:#0b2a5b!important;
  background-image:linear-gradient(90deg,#0b2a5b,#13407e)!important;
  border:none!important; box-shadow:0 2px 10px rgba(11,42,91,.2)!important; }
html body div#sidebar > ul > li > a{ color:#eaf0fb!important; font-weight:500!important; text-shadow:none!important; background:transparent!important; }
html body div#sidebar > ul > li > a:hover, html body div#sidebar > ul > li.active > a, html body div#sidebar > ul > li.open > a{ background:rgba(255,255,255,.14)!important; color:#fff!important; }
html body div#sidebar > ul > li > a i{ color:#f4a81d!important; }

/* Formularios de filtros (listados) */
form[action$="_listado.php"]{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; gap:10px!important; margin:16px auto!important; }
form[action$="_listado.php"] label{ margin:0!important; font-weight:600!important; color:#0b2a5b!important; }
form[action$="_listado.php"] select, form[action$="_listado.php"] input[type=date]{ width:auto!important; min-width:150px!important; margin:0!important; }
form[action$="_listado.php"] input[type=text]{ width:260px!important; margin:0!important; }

/* Filtros: incluir transferencias (_listado_t.php) */
form[action*="listado"]{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; gap:10px!important; margin:16px auto!important; }
form[action*="listado"] label{ margin:0!important; font-weight:600!important; color:#0b2a5b!important; }
form[action*="listado"] select, form[action*="listado"] input[type=date]{ width:auto!important; min-width:150px!important; margin:0!important; }
form[action*="listado"] input[type=text]{ width:260px!important; margin:0!important; }

/* Ancho de selects (uniform) en filtros */
form[action*="listado"] .selector{ width:190px!important; min-width:190px!important; }
form[action*="listado"] .selector span{ width:160px!important; display:inline-block!important; }
form[action*="listado"] select{ min-width:160px!important; }

/* Bienestar: mantener su layout original (sin flex, Uniform intacto) */
form[action*="bienestar_listado"]{ display:block!important; }
form[action*="bienestar_listado"] .selector,
form[action*="bienestar_listado"] .selector span,
form[action*="bienestar_listado"] select{ width:auto!important; min-width:0!important; height:auto!important; }

/* Bienestar como inscripciones: una sola fila */
form[method="post"][action*="bienestar_listado"]{ display:none!important; }
form[method="get"][action*="bienestar_listado"]{ display:flex!important; flex-wrap:wrap!important; align-items:center!important; justify-content:center!important; gap:10px!important; margin:16px auto!important; }
form[action*="listado"] .selector{ flex:0 0 auto!important; width:auto!important; min-width:170px!important; height:30px!important; overflow:hidden!important; }
form[action*="listado"] .selector span{ display:block!important; width:auto!important; height:30px!important; line-height:30px!important; overflow:hidden!important; }


/* RESPONSIVO-CUL  (solo pantallas <=820px; NO afecta el escritorio ni el body) */
@media (max-width:820px){
  html,body{ overflow-x:hidden; }
  #content{ margin-left:0!important; width:auto!important; }
  .container-fluid{ padding-left:12px!important; padding-right:12px!important; }
  img{ max-width:100%; height:auto; }

  /* Tablas: scroll horizontal en lugar de romper el ancho */
  .widget-content{ overflow-x:auto!important; -webkit-overflow-scrolling:touch; }

  /* Formularios a ancho completo y etiquetas apiladas */
  input, select, textarea, .selector, .select2-container, .uneditable-input{
    width:100%!important; max-width:100%!important; box-sizing:border-box!important; }
  .selector span{ width:auto!important; }
  .form-horizontal .control-label{ float:none!important; width:auto!important; text-align:left!important; padding:0 0 4px!important; display:block; }
  .form-horizontal .controls{ margin-left:0!important; }

  /* Filtros (listados y reportes) apilados en vez de encimados */
  form[action*="listado"], .rep-filtros{ display:block!important; }
  form[action*="listado"] *, .rep-filtros *{ max-width:100%; }

  h1{ font-size:24px!important; line-height:1.2; }
}


/* RESPONSIVO-NAV-CUL  (menu hamburguesa en movil; NO afecta escritorio) */
@media (max-width:820px){
  #sidebar{ position:relative!important; }
  #sidebar > a.visible-phone{ display:block!important; padding:12px 16px!important; color:#fff!important; cursor:pointer; font-weight:600; }
  #sidebar > ul{ display:none!important; margin:0!important; }
  #sidebar.cul-open > ul{ display:block!important; }
  #sidebar > ul > li, #sidebar > ul > a{ display:block!important; float:none!important; width:100%!important; }
  #sidebar > ul > li > a, #sidebar > ul > a{ display:block!important; color:#fff!important; padding:10px 16px!important; border-top:1px solid rgba(255,255,255,.12)!important; }
  #sidebar .dropdown-menu{ position:static!important; display:block!important; float:none!important; box-shadow:none!important; background:transparent!important; border:0!important; margin:0!important; padding-left:14px!important; }
  #sidebar .dropdown-menu li a{ color:#dbe4f3!important; }
}


/* RESPONSIVO-ALIGN-CUL  (alinea etiquetas y campos en movil; NO afecta escritorio) */
@media (max-width:820px){
  .widget-content [class*="span"]{ margin-left:0!important; float:none!important; }
  .widget-content .controls{ margin-left:0!important; padding-left:0!important; }
  .widget-content .control-group{ margin-left:0!important; padding-left:0!important; }
  .widget-content label, .widget-content .control-label{ margin-left:0!important; padding-left:0!important; text-align:left!important; }
  .widget-content input, .widget-content select, .widget-content textarea,
  .widget-content .selector, .widget-content .select2-container{ margin-left:0!important; }
}