/* =========================================================
   APP.CSS �� SIGEL EXPERIENCIA (ALTEC)
   ========================================================= */

/* Header ALTEC */
.altec-header {
  background: #ffffff;
  border-bottom: 3px solid #0d6efd;
  padding: 12px 20px;
}
.altec-logo { height: 48px; }
.altec-title {
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1;
}
.altec-subtitle {
  font-size: 0.85rem;
  color: #6c757d;
}

/* Base */
body { background-color: #f6f7f9; }
a { text-decoration: none; }

/* ===============================
   BOTONES �C ESTILO INSTITUCIONAL
   =============================== */
.btn {
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  padding: 8px 14px;
  transition: all .2s ease-in-out;
}

/* Bot��n primario */
.btn-primary {
  background: linear-gradient(135deg, #0d6efd, #084298);
  border: none;
  box-shadow: 0 4px 10px rgba(13,110,253,.25);
}
.btn-primary:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(13,110,253,.35);
}

/* Outline */
.btn-outline-primary { border-width: 2px; font-weight: 600; }
.btn-outline-primary:hover { background: #0d6efd; color: #fff; }

/* Acciones */
.btn-outline-success { border-width: 2px; }
.btn-outline-danger { border-width: 2px; }

/* ==================================================
   NAVBAR �C BOTONES LARGOS (ESTILO VER)
   ================================================== */
.navbar .navbar-nav { gap: 12px; } */

.navbar .nav-link {
  min-width: 150px;
  padding: 12px 30px;
  text-align: center;
  border-radius: 14px;
  font-weight: 600;
  color: #ffffff !important;
  background: linear-gradient(135deg, #0d6efd, #084298);
  border: none;
  box-shadow: 0 4px 10px rgba(13,110,253,.25);
  transition: all .15s ease-in-out;
}
.navbar .nav-link:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(13,110,253,.35);
  color: #ffffff !important;
}

/* =========================================================
   DASHBOARD (TILES + GLOW)  �7�3 ESTO TE FALTABA
   ========================================================= */

.dash-hero{
  border-radius: 18px;
  padding: 18px 18px;
  background: linear-gradient(135deg, rgba(13,110,253,.10), rgba(32,201,151,.08), rgba(255,193,7,.10));
  border: 1px solid rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
}
.dash-hero:before{
  content:"";
  position:absolute;
  inset:-80px;
  background:
    radial-gradient(circle at 20% 20%, rgba(13,110,253,.22), transparent 55%),
    radial-gradient(circle at 80% 30%, rgba(32,201,151,.18), transparent 55%),
    radial-gradient(circle at 60% 80%, rgba(255,193,7,.18), transparent 55%);
  filter: blur(18px);
  opacity:.9;
  pointer-events:none;
}

.dash-kicker{ font-size: 12px; letter-spacing:.08em; text-transform:uppercase; color: rgba(0,0,0,.55); }
.dash-title{ font-weight: 800; }
.dash-sub{ color: rgba(0,0,0,.60); }

.dash-stats{
  display:grid;
  grid-template-columns: repeat(4, minmax(0,1fr));
  gap: 10px;
}
@media (max-width: 992px){
  .dash-stats{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
.dash-stat{
  background: rgba(255,255,255,.70);
  border: 1px solid rgba(0,0,0,.06);
  border-radius: 14px;
  padding: 12px 12px;
  backdrop-filter: blur(6px);
}
.dash-stat-label{ font-size: 12px; color: rgba(0,0,0,.60); }
.dash-stat-value{ font-size: 24px; font-weight: 800; }

.dash-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 14px;
}
@media (max-width: 992px){
  .dash-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 576px){
  .dash-grid{ grid-template-columns: 1fr; }
}

.dash-tile{
  display:block;
  text-decoration:none;
  color: inherit;
  border-radius: 18px;
  padding: 16px 16px;
  background: rgba(255,255,255,.85);
  border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  position: relative;
  overflow: hidden;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.dash-tile:before{
  content:"";
  position:absolute;
  inset:-60px;
  background:
    radial-gradient(circle at 20% 20%, rgba(13,110,253,.22), transparent 45%),
    radial-gradient(circle at 80% 10%, rgba(32,201,151,.16), transparent 45%);
  opacity: 0;
  transition: opacity .15s ease;
  pointer-events:none;
}
.dash-tile:hover{
  transform: translateY(-2px);
  box-shadow: 0 14px 40px rgba(0,0,0,.10);
  border-color: rgba(13,110,253,.25);
}
.dash-tile:hover:before{ opacity: 1; }

.dash-tile-primary:before{
  background:
    radial-gradient(circle at 20% 20%, rgba(13,110,253,.32), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(32,201,151,.18), transparent 55%);
}
.dash-tile-warning:before{
  background:
    radial-gradient(circle at 20% 20%, rgba(255,193,7,.32), transparent 50%),
    radial-gradient(circle at 80% 40%, rgba(220,53,69,.10), transparent 55%);
}

.dash-tile-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 10px;
}
.dash-tile-title{ font-weight: 800; font-size: 16px; }
.dash-tile-badge{
  font-size: 12px;
  font-weight: 700;
  padding: 6px 10px;
  border-radius: 999px;
  background: rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
}
.dash-tile-desc{ margin-top: 8px; color: rgba(0,0,0,.65); font-size: 13px; }
.dash-tile-foot{ margin-top: 12px; font-weight: 700; color: rgba(13,110,253,.9); }

/* =========================
   HEADER: mejoras visuales
   ========================= */

.year-select {
  width: 120px;
  border-radius: 14px;
  font-weight: 700;
  border: 1px solid rgba(0,0,0,.15);
  box-shadow: 0 3px 10px rgba(0,0,0,.06);
}

/* Bot��n "suave" (A�0�5O / ADJUDICACI�0�7N) */
.navbar .nav-link-soft {
  background: linear-gradient(135deg, #6c757d, #495057) !important;
  box-shadow: 0 4px 10px rgba(108,117,125,.25) !important;
}

/* Hover general */
.navbar .nav-link:hover {
  filter: brightness(1.03);
}

/* Stat con alerta */
.dash-stat-alert {
  border: 2px solid rgba(220,53,69,.35);
  background: rgba(220,53,69,.06);
}

/* =========================================
   RESPONSIVE (sin tocar HTML / PHP)
   Peg�� al final de app.css
   ========================================= */

/* 1) Evitar cortes feos y overflow horizontal */
html, body { overflow-x: hidden; }
img { max-width: 100%; height: auto; }

/* 2) Contenedores: menos padding en m��vil */
@media (max-width: 576px) {
  .container-fluid, .container { padding-left: 12px !important; padding-right: 12px !important; }
  main.container-fluid.px-4 { padding-left: 12px !important; padding-right: 12px !important; }
}

/* 3) Header ALTEC: apilar mejor en pantallas chicas */
@media (max-width: 576px) {
  .altec-header .container-fluid {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px !important;
  }
  .altec-logo { height: 40px; }
  .altec-title { font-size: 1.05rem; }
  .altec-subtitle { font-size: 0.8rem; }
}

/* 4) Navbar: botones full-width en m��vil, sin romper escritorio */
@media (max-width: 768px) {
  .navbar .navbar-nav {
    width: 100% !important;
    gap: 10px !important;
  }
  .navbar .nav-link {
    width: 100% !important;
    min-width: 0 !important;
    padding: 12px 14px !important;
    border-radius: 14px !remember;
    display: block !important;
    text-align: center !important;
  }
}

/* 5) Dashboard: grilla responsive autom��tica */
.dash-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}
@media (max-width: 992px) {
  .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 576px) {
  .dash-grid { grid-template-columns: 1fr; }
}

/* 6) Tarjetas del dashboard: evitar desbordes por textos largos */
.dash-tile, .dash-hero, .dash-stat {
  min-width: 0;
}
.dash-tile-title, .dash-tile-desc, .dash-sub {
  word-wrap: break-word;
  overflow-wrap: anywhere;
}

/* 7) Stats: apilar en m��vil */
@media (max-width: 576px) {
  .dash-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
}

/* 8) Tablas: ya us��s table-responsive, pero reforzamos */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.table th, .table td {
  vertical-align: middle;
  white-space: nowrap; /* evita que se rompa feo */
}
@media (max-width: 576px) {
  .table th, .table td { font-size: 0.9rem; }
}

/* 9) Formularios: inputs y botones 100% cuando haya col-md-* */
@media (max-width: 576px) {
  .row.g-2 > [class*="col-"],
  .row.g-3 > [class*="col-"] { width: 100% !important; }
  .d-grid .btn, .btn { width: 100%; }
  .btn-group, .d-flex.gap-2 { flex-wrap: wrap; }
}

/* 10) Botonera de acciones (muchos botones en una fila) */
@media (max-width: 768px) {
  .text-nowrap { white-space: normal !important; }
  td.text-nowrap .btn { margin-bottom: 6px; }
}

/* 11) Ajuste selector a�0�9o header (si existe la clase) */
@media (max-width: 576px) {
  .year-select { width: 100% !important; }
}

/* =========================================================
   12) FIX SIDEBAR (AdminLTE4): el alto del sidebar lo calcula
   JS al cargar segun el contenido visible en ese momento; si la
   pagina es mas baja que el viewport, ese calculo queda corto y
   deja un hueco en blanco debajo del menu (se corrige solo al
   cambiar el zoom porque eso dispara un resize que recalcula
   bien). Forzamos el alto por CSS puro para no depender de eso.
   ========================================================= */
html, body {
  height: 100%;
}
.app-wrapper {
  min-height: 100vh;
}
.app-sidebar {
  min-height: 100vh !important;
}
.app-sidebar .sidebar-wrapper,
.app-sidebar .os-viewport,
.app-sidebar .os-padding,
.app-sidebar .os-content {
  height: 100% !important;
  min-height: 100% !important;
}