/* ══════════════════════════════════════════════════════════════
   FORMAHOSTEL CONTROL — Visual Enhance Layer
   Carga DESPUÉS de theme.min.css. NO modifica fondos de card-header.
   Jun 2026
   ══════════════════════════════════════════════════════════════ */

/* ── 1. FONDO BODY: patrón sutil de puntos para dar profundidad */
body {
  background-image: radial-gradient(circle, rgba(30,58,95,.04) 1px, transparent 1px);
  background-size: 28px 28px;
  background-attachment: fixed;
  color: #111827 !important;  /* gray-900: negro profundo en lugar del gris-700 por defecto */
}

/* ── 2. CARDS: sombra más rica y hover expresivo (SIN tocar bg de headers) */
.card {
  border-color: #e4eaf3 !important;
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease !important;
}
.card:hover {
  box-shadow: 0 6px 24px rgba(30,58,95,.1), 0 2px 8px rgba(30,58,95,.05) !important;
  border-color: #ccd8ea !important;
  transform: translateY(-2px);
}
/* Card-body con ligero padding extra */
.card-body { padding: 1.3rem; }

/* ── 3. FH-CONFIG-CARD: aspecto premium (clase custom, segura de tocar) */
.fh-config-card {
  border: 1px solid #dde4ef !important;
  border-radius: 14px !important;
  box-shadow: 0 2px 10px rgba(30,58,95,.07), 0 1px 3px rgba(30,58,95,.04) !important;
  overflow: hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.fh-config-card:hover {
  box-shadow: 0 6px 24px rgba(30,58,95,.11), 0 2px 8px rgba(30,58,95,.06) !important;
  transform: translateY(-1px);
}
.fh-section-header {
  background: linear-gradient(180deg, #ffffff 0%, #f7f9fc 100%) !important;
  border-bottom: 1px solid #eaeff6 !important;
  padding: 15px 22px !important;
}
.fh-section-header h5 { font-size: .96rem !important; font-weight: 700 !important; color: #1a2a3e !important; }
.fh-section-header h6 { font-size: .88rem !important; font-weight: 600 !important; color: #1a2a3e !important; }

/* ── 4. FH-SECTION-ICON: más vibrante con sombra de color (clase custom) */
.fh-section-icon {
  width: 36px !important; height: 36px !important;
  border-radius: 10px !important; font-size: .95rem !important;
}
.fh-icon-blue  { background: linear-gradient(135deg,#e8f1fd,#dbeafe) !important; color: #1a5bb5 !important; box-shadow: 0 2px 8px rgba(26,91,181,.18) !important; }
.fh-icon-green { background: linear-gradient(135deg,#e3f5e8,#d1fae5) !important; color: #166534 !important; box-shadow: 0 2px 8px rgba(22,101,52,.18) !important; }
.fh-icon-cyan  { background: linear-gradient(135deg,#e0f5fe,#bae6fd) !important; color: #0c5a7c !important; box-shadow: 0 2px 8px rgba(12,90,124,.18) !important; }
.fh-icon-amber { background: linear-gradient(135deg,#fef4e2,#fde68a) !important; color: #92400e !important; box-shadow: 0 2px 8px rgba(146,64,14,.18) !important; }
.fh-icon-purple{ background: linear-gradient(135deg,#f5f0ff,#ede9fe) !important; color: #6d28d9 !important; box-shadow: 0 2px 8px rgba(109,40,217,.18) !important; }
.fh-icon-teal  { background: linear-gradient(135deg,#e0f7f2,#ccfbf1) !important; color: #0d6e5a !important; box-shadow: 0 2px 8px rgba(13,110,90,.18) !important; }

/* ── 5. DASHBOARD TILES: hover más expresivo */
.dashboard-tile {
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(30,58,95,.07), 0 1px 3px rgba(30,58,95,.04) !important;
  transition: all .25s cubic-bezier(.4,0,.2,1) !important;
}
.dashboard-tile:hover {
  box-shadow: 0 10px 32px rgba(30,58,95,.13), 0 4px 12px rgba(30,58,95,.07) !important;
  transform: translateY(-4px) !important;
  border-color: #c4d4e8 !important;
}
.dashboard-tile:hover .tile-icon-lg {
  transform: scale(1.1) rotate(-3deg) !important;
  box-shadow: 0 8px 24px rgba(30,58,95,.28) !important;
}
.tile-icon-sm { transition: transform .25s ease !important; }
.dashboard-tile:hover .tile-icon-sm { transform: scale(1.12) !important; }
.dashboard-tile h3 { font-weight: 700 !important; letter-spacing: -.01em; }
.dashboard-tile p  { color: #5a6a7e !important; font-size: .88rem !important; }

/* ── 6. WELCOME BANNER: gradiente más profundo y rico */
.dashboard-welcome-banner {
  background: linear-gradient(135deg, #0f2550 0%, #1e3a5f 35%, #2c5282 70%, #1a4a7a 100%) !important;
  box-shadow: 0 8px 28px rgba(15,37,80,.3), 0 2px 8px rgba(15,37,80,.18) !important;
}
.welcome-icon {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.2) !important;
  border-radius: 16px !important;
}

/* ── 7. KPI CARDS: hover y acento lateral por variante */
.kpi-card {
  border-color: #e2e8f0 !important;
  box-shadow: 0 2px 8px rgba(30,58,95,.06) !important;
  transition: all .22s ease !important;
}
.kpi-card:hover {
  box-shadow: 0 8px 28px rgba(30,58,95,.11) !important;
  transform: translateY(-3px) !important;
}
.kpi-card.kpi-verde, .kpi-card.kpi-success {
  border-left: 3px solid #22c55e !important;
  background: linear-gradient(135deg, rgba(34,197,94,.06) 0%, rgba(255,255,255,1) 55%) !important;
}
.kpi-card.kpi-amarillo, .kpi-card.kpi-warning {
  border-left: 3px solid #f59e0b !important;
  background: linear-gradient(135deg, rgba(245,158,11,.06) 0%, rgba(255,255,255,1) 55%) !important;
}
.kpi-card.kpi-rojo, .kpi-card.kpi-danger {
  border-left: 3px solid #ef4444 !important;
  background: linear-gradient(135deg, rgba(239,68,68,.06) 0%, rgba(255,255,255,1) 55%) !important;
}
.kpi-card.kpi-azul, .kpi-card.kpi-info {
  border-left: 3px solid #3b82f6 !important;
  background: linear-gradient(135deg, rgba(59,130,246,.06) 0%, rgba(255,255,255,1) 55%) !important;
}

/* ── 8. TABLAS: thead más limpio, hover con acento lateral */
.table thead th {
  background: linear-gradient(180deg, #f1f5f9 0%, #e8edf5 100%) !important;
  color: #1e2a3a !important;
  font-size: .78rem !important;
  letter-spacing: .05em !important;
  border-bottom: 2px solid #d0dbe8 !important;
}
.table tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.table tbody tr:hover {
  background-color: #f0f5ff !important;
  box-shadow: inset 3px 0 0 #3b82f6 !important;
}
.table tbody td { border-bottom: 1px solid #f0f3f8 !important; }
.table-striped tbody tr:nth-of-type(odd) { background-color: rgba(30,58,95,.02) !important; }

/* ── 9. BOTONES: focus ring refinado, transiciones suaves */
.btn { transition: all .18s cubic-bezier(.4,0,.2,1) !important; }
.btn:focus, .btn:focus-visible { outline: none !important; }
.btn-primary:focus, .btn-primary:focus-visible   { box-shadow: 0 0 0 3px rgba(37,99,235,.28) !important; }
.btn-success:focus, .btn-success:focus-visible   { box-shadow: 0 0 0 3px rgba(34,197,94,.28) !important; }
.btn-danger:focus,  .btn-danger:focus-visible    { box-shadow: 0 0 0 3px rgba(220,53,69,.28) !important; }
.btn-secondary:focus, .btn-secondary:focus-visible { box-shadow: 0 0 0 3px rgba(108,117,125,.28) !important; }
.btn-sm { font-size: .82rem !important; padding: .42rem 1rem !important; min-height: 34px !important; }

/* ── 10. BADGES: gradientes suaves por color */
.badge { font-weight: 600 !important; letter-spacing: .02em !important; }
.badge.bg-success { background: linear-gradient(135deg,#16a34a,#22c55e) !important; }
.badge.bg-danger  { background: linear-gradient(135deg,#b91c1c,#dc2626) !important; }
.badge.bg-primary { background: linear-gradient(135deg,#1d4ed8,#3b82f6) !important; }
.badge.bg-info    { background: linear-gradient(135deg,#0369a1,#0ea5e9) !important; }
/* bg-warning: NO gradient — usa texto oscuro, dejamos Bootstrap resolver */

/* ── 11. ALERTAS: fondos degradados más cálidos */
.alert-success { background: linear-gradient(135deg,#f0fdf4,#dcfce7) !important; border-left-color: #16a34a !important; color: #14532d !important; }
.alert-warning { background: linear-gradient(135deg,#fffbeb,#fef9c3) !important; border-left-color: #d97706 !important; color: #78350f !important; }
.alert-danger  { background: linear-gradient(135deg,#fff1f2,#ffe4e6) !important; border-left-color: #b91c1c !important; color: #7f1d1d !important; }
.alert-info    { background: linear-gradient(135deg,#eff6ff,#dbeafe) !important; border-left-color: #2563eb !important; color: #1e3a8a !important; }

/* ── 12. STATUS BAR */
.fh-status-bar {
  background: linear-gradient(135deg,#f0f6ff 0%,#e8eef8 100%) !important;
  border: 1px solid #d0dbe8 !important;
  box-shadow: 0 1px 4px rgba(30,58,95,.07) !important;
}

/* ── 13. FORMULARIOS: focus ring azul suave */
.form-control:focus, .form-select:focus {
  border-color: #6395d4 !important;
  box-shadow: 0 0 0 3px rgba(37,99,235,.14) !important;
  background: #fafcff !important;
}
.form-control, .form-select {
  border-color: #dde4ef !important;
  transition: border-color .18s ease, box-shadow .18s ease !important;
}

/* ── 14. SIDEBAR: active con acento izquierdo */
.sidebar-nav .nav-link.active {
  border-left: 3px solid #2563eb !important;
  padding-left: calc(.65rem - 3px) !important;
  background: linear-gradient(90deg,rgba(37,99,235,.08) 0%,rgba(37,99,235,.02) 100%) !important;
}

/* ── 15. TIPOGRAFÍA: pesos mejorados */
h1 { font-weight: 800 !important; letter-spacing: -.025em !important; }
h2 { font-weight: 700 !important; letter-spacing: -.02em  !important; }
h3 { font-weight: 700 !important; letter-spacing: -.015em !important; }

/* ── 16. PROGRESS BARS */
.progress { border-radius: 8px !important; background: #e8edf5 !important; }
.progress-bar { background: linear-gradient(90deg,#1e3a5f,#4a90d9) !important; border-radius: 8px !important; transition: width .6s cubic-bezier(.4,0,.2,1) !important; }
.progress-bar.bg-success { background: linear-gradient(90deg,#16a34a,#4ade80) !important; }
.progress-bar.bg-warning { background: linear-gradient(90deg,#d97706,#fbbf24) !important; }
.progress-bar.bg-danger  { background: linear-gradient(90deg,#b91c1c,#f87171) !important; }

/* ── 17. SCROLLBAR global: más moderna */
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: #f1f5f9; border-radius: 4px; }
::-webkit-scrollbar-thumb { background: #c1cde0; border-radius: 4px; border: 1px solid #f1f5f9; }
::-webkit-scrollbar-thumb:hover { background: #94a3b8; }
* { scrollbar-width: thin; scrollbar-color: #c1cde0 #f1f5f9; }

/* ── 18. MODALES: más redondeados y con sombra profunda */
.modal-content {
  border: none !important;
  border-radius: 16px !important;
  box-shadow: 0 24px 64px rgba(15,23,42,.18), 0 8px 24px rgba(15,23,42,.1) !important;
}
.modal-header {
  border-radius: 16px 16px 0 0 !important;
  border-bottom: 1px solid #e8edf3 !important;
}
.modal-footer {
  background: #f7f9fc !important;
  border-top: 1px solid #e8edf3 !important;
  border-radius: 0 0 16px 16px !important;
}

/* ── 19. DROPDOWNS */
.dropdown-menu {
  border: 1px solid #e2e8f0 !important;
  border-radius: 12px !important;
  box-shadow: 0 10px 32px rgba(15,23,42,.1), 0 4px 12px rgba(15,23,42,.05) !important;
  padding: .5rem !important;
}
.dropdown-item {
  border-radius: 8px !important;
  padding: .42rem .9rem !important;
  font-size: .875rem !important;
  transition: background .12s ease, color .12s ease !important;
}
.dropdown-item:hover { background: #f0f5ff !important; color: #1d4ed8 !important; }

/* ── 20. PÁGINA FADE-IN suave */
.main-content { animation: fhEnhanceFadeIn .2s ease-out; }
@keyframes fhEnhanceFadeIn {
  from { opacity: .75; transform: translateY(3px); }
  to   { opacity: 1;   transform: translateY(0);   }
}

/* ── 21. CONTRASTE GLOBAL: text-muted y variables Bootstrap más legibles */
:root {
  --bs-body-color: #111827;
  --bs-secondary-color: rgba(17,24,39,.62);
  --bs-tertiary-color: rgba(17,24,39,.42);
}
/* text-muted sigue siendo ligeramente más suave que el body, pero legible */
.text-muted { color: #4b5563 !important; }
.text-secondary:not(.btn):not(.badge) { color: #4b5563 !important; }
small, .small { color: #374151 !important; }
p { color: inherit; }
/* Hint de sesión de datos */
.fh-status-hint { color: #374151 !important; font-size: .82rem; }