:root {
  --bg: #f0f4f8;
  --surface: #ffffff;
  --muted: #64748b;
  --text: #0f172a;
  --primary: #6366f1;
  --primary-dark: #4f46e5;
  --primary-light: #818cf8;
  --primary-contrast: #ffffff;
  --success: #10b981;
  --success-dark: #059669;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #3b82f6;
  --card-border: #e2e8f0;
  --sidebar-bg: #1e293b;
  --sidebar-text: #f1f5f9;
  --navbar-bg: #1e293b;
  --navbar-text: #ffffff;
}

/* Base */
html, body {
  background-color: var(--bg) !important;
  color: var(--text) !important;
  font-family: 'Source Sans Pro', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
}

a { color: var(--primary); }
a:hover { color: #376fe0; text-decoration: underline; }

/* Header / Navbar */
.main-header .navbar {
  background-color: var(--navbar-bg) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1);
  color: var(--navbar-text) !important;
}
.main-header .navbar .nav-link { 
  color: var(--navbar-text) !important; 
}
.main-header .navbar .form-control {
  background-color: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: var(--navbar-text) !important;
}
.main-header .navbar .form-control::placeholder {
  color: rgba(255,255,255,0.6) !important;
}

/* Sidebar */
.main-sidebar { 
  background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%) !important; 
}
.main-sidebar .brand-link {
  background-color: rgba(255,255,255,0.05) !important;
  border-bottom: 1px solid rgba(255,255,255,0.1) !important;
}
.main-sidebar .brand-text {
  color: var(--sidebar-text) !important;
  font-weight: 600;
}
.main-sidebar .nav-sidebar .nav-link { 
  color: rgba(241,245,249,0.8) !important; 
}
.main-sidebar .nav-sidebar .nav-link:hover {
  background-color: rgba(255,255,255,0.1) !important;
  color: var(--sidebar-text) !important;
}
.main-sidebar .nav-sidebar .nav-link.active {
  background-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
}
.user-panel .info a {
  color: var(--sidebar-text) !important;
}

/* Content / Cards - Estilo tipo Dunamis */
.content-wrapper, .content {
  background-color: var(--bg) !important;
}
.card {
  background-color: var(--surface) !important;
  border: 1px solid var(--card-border) !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06) !important;
  border-radius: 8px !important;
  transition: box-shadow 0.15s ease-in-out !important;
}
.card:hover {
  box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.08) !important;
}
.card-header {
  background-color: #f8fafc !important;
  border-bottom: 1px solid var(--card-border) !important;
  padding: 1rem 1.25rem !important;
}
.card-title {
  color: var(--text) !important;
  font-weight: 600 !important;
  font-size: 1.1rem !important;
  margin: 0 !important;
}
.card-body {
  color: var(--text) !important;
  padding: 1.25rem !important;
}

/* Buttons */
.btn-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%) !important;
  border-color: var(--primary) !important;
  color: var(--primary-contrast) !important;
  font-weight: 500;
  box-shadow: 0 2px 8px rgba(99,102,241,0.3);
}
.btn-primary:hover { 
  background: linear-gradient(135deg, var(--primary-light) 0%, var(--primary) 100%) !important; 
  border-color: var(--primary-light) !important;
  box-shadow: 0 4px 12px rgba(99,102,241,0.4);
  transform: translateY(-1px);
}
.btn-success {
  background: linear-gradient(135deg, var(--success) 0%, var(--success-dark) 100%) !important;
  border-color: var(--success) !important;
  color: var(--primary-contrast) !important;
  box-shadow: 0 2px 8px rgba(16,185,129,0.3);
}
.btn-success:hover {
  box-shadow: 0 4px 12px rgba(16,185,129,0.4);
  transform: translateY(-1px);
}

/* Tables - Mejorar contraste */
.table thead th { 
    background-color: #f8fafc !important; 
    color: var(--text) !important; 
    font-weight: 600 !important;
    border-bottom: 2px solid var(--card-border) !important;
}
.table tbody td {
    color: var(--text) !important;
}
.table-striped tbody tr:nth-of-type(odd) {
    background-color: #f8fafc !important;
}

/* Forms - Mejorar contraste */
.form-control { 
    background-color: #ffffff !important; 
    border: 1px solid var(--card-border) !important;
    color: var(--text) !important;
}
.form-control:focus {
    border-color: var(--primary) !important;
    box-shadow: 0 0 0 0.2rem rgba(99, 102, 241, 0.25) !important;
}
label {
    color: var(--text) !important;
    font-weight: 500 !important;
}

/* Small utilities */
.text-muted { 
    color: #64748b !important; 
    font-weight: 400 !important;
}

/* Improve contrast for badges */
.badge { 
    background-color: var(--primary) !important; 
    color: #ffffff !important;
    padding: 0.35em 0.65em !important;
    font-weight: 500 !important;
}

/* Datatables adjustments */
.dataTables_wrapper .dataTables_filter input { background: #fff; border: 1px solid var(--card-border); }

@media (max-width: 768px) {
  .main-header .navbar { padding-left: .5rem; padding-right: .5rem; }
}

/* Note: this file intentionally keeps overrides small to remain compatible with AdminLTE/Bootstrap */

/* Mapeo de espacios - diseño estético */
.spot { text-align: center; margin: .75rem; }
.spot-number { font-weight: 700; color: var(--muted); margin-bottom: .5rem; font-size: 1.25rem; }
.spot-btn { border-radius: 12px; border: 0; padding: 0; display: inline-block; transition: transform .14s ease, box-shadow .14s ease; position: relative; overflow: hidden; }
.spot-btn .spot-inner { width: 100%; height: 100%; display:flex; flex-direction:column; align-items:center; justify-content:center; }
.spot-btn:hover { transform: translateY(-4px); }

.spot-free { background: linear-gradient(180deg, #10b981 0%, #059669 100%); color: #fff !important; box-shadow: 0 6px 18px rgba(16,185,129,0.25); }
.spot-free .spot-label { font-weight:700; letter-spacing: .06em; }

.spot-occupied { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%); color: #fff !important; box-shadow: 0 6px 18px rgba(99,102,241,0.25); }
.spot-occupied .spot-icon img { display:block; transform: translateY(-4px); }
.spot-occupied .spot-label { margin-top:6px; font-weight:600; color: rgba(255,255,255,0.95); }

/* Status badge */
.spot .spot-label { font-size: 0.95rem; padding: .25rem .5rem; border-radius: 6px; }

/* Responsive grid tweaks */
.row > .spot { display: inline-flex; }

/* Flexible parking grid - Grid layout para mejor ordenamiento */
.parking-row { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); 
    gap: 15px; 
    justify-items: center; 
    align-items: start;
    padding: 20px;
    max-width: 100%;
    margin: 0 auto;
}
.parking-row .spot { 
    width: 100%;
    max-width: 150px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.parking-row .spot-btn { 
    width: 140px; 
    height: 140px; 
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible !important;
}
.parking-row .spot-number { 
    margin-bottom: 8px;
    width: auto;
    min-width: auto;
}

/* Ensure containers don't collapse on small screens */
@media (max-width: 768px) {
  .parking-row { 
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); 
    gap: 12px;
    padding: 15px;
  }
  .parking-row .spot { max-width: 120px; }
  .parking-row .spot-btn { width: 110px; height: 110px; }
}

@media (max-width: 576px) {
  .parking-row { 
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); 
    gap: 10px;
    padding: 10px;
  }
  .parking-row .spot { max-width: 100px; }
  .parking-row .spot-btn { width: 90px; height: 90px; }
  .spot-number { font-size: 0.9rem !important; }
  .spot-label { font-size: 0.85rem !important; }
}

/* Legibilidad: fondos, tamaño y sombras para textos sobre imagen de piso */
.parking-row .spot-number {
  background: rgba(255,255,255,0.94) !important;
  color: var(--text) !important;
  padding: 6px 10px !important;
  border-radius: 8px !important;
  display: inline-block !important;
  box-shadow: 0 3px 10px rgba(16,42,67,0.08) !important;
  font-weight: 800 !important;
}
.parking-row .spot-btn .spot-label {
  color: #ffffff !important;
  font-size: 1.05rem !important;
  font-weight: 800 !important;
  text-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
}
.parking-row .spot-btn .spot-inner { padding: 6px !important; }
.parking-row .spot-btn .spot-icon img { filter: drop-shadow(0 6px 14px rgba(0,0,0,0.35)); }

/* Mejora de imágenes de carritos: evitar recorte, centrar y mantener proporción */
.spot-icon { 
    width: 92px; 
    height: 74px; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
    background: rgba(255,255,255,0.08); 
    border-radius: 10px; 
    padding: 8px; 
    box-shadow: inset 0 -6px 12px rgba(0,0,0,0.08);
    margin: 0 auto;
    flex-shrink: 0;
}
.spot-icon img { 
    width: auto !important; 
    max-width: 90% !important; 
    max-height: 70px !important; 
    height: auto !important;
    object-fit: contain !important; 
    display: block !important;
    margin: 0 auto;
}
.spot-btn:hover .spot-icon img { 
    transform: translateY(-6px) scale(1.05); 
    transition: transform .18s ease; 
}

/* Opcional: marco ligero alrededor del icono para separarlo del fondo */
.spot-icon { border: 1px solid rgba(255,255,255,0.06); }

/* Si la imagen tiene fondo transparente, aplicar un sutil degradado para resaltarla */
.spot-occupied .spot-icon { background: linear-gradient(180deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01)); }
.spot-free .spot-icon { background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.00)); }

/* Ensure body text is legible over background */
body, .container, .card, .content-wrapper { color: var(--text) !important; }


/* Pulse animation for free spots to attract attention */
.spot-free::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 12px;
  box-shadow: 0 0 0 rgba(79,142,247,0.0);
  animation: pulseFree 2.8s ease-in-out infinite;
  pointer-events: none;
}
@keyframes pulseFree {
  0% { box-shadow: 0 0 0 0 rgba(47,158,74,0.22); }
  70% { box-shadow: 0 0 0 18px rgba(47,158,74,0.02); }
  100% { box-shadow: 0 0 0 0 rgba(47,158,74,0.0); }
}

/* Small helper to keep numbers aligned */
.spot-number { min-width: 36px; }

/* High-contrast and accessibility helpers */
.sr-only, .sr-only * { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important; }

/* Force stronger contrast overrides for AdminLTE components if needed */
.spot-btn { box-shadow: 0 8px 22px rgba(16,42,67,0.14) !important; border: 1px solid rgba(255,255,255,0.1) !important; }
.spot-free { background: linear-gradient(180deg, #10b981 0%, #059669 100%) !important; }
.spot-occupied { background: linear-gradient(180deg, #6366f1 0%, #4f46e5 100%) !important; }

/* Badges for legend */
.badge-success { background-color: #10b981 !important; border-radius: 4px; width: 18px; height: 18px; display: inline-block; }
.badge-info { background-color: #6366f1 !important; border-radius: 4px; width: 18px; height: 18px; display: inline-block; }

/* Make spot labels more legible */
.spot-label { font-size: 1rem; text-shadow: 0 1px 0 rgba(0,0,0,0.12); }

/* Mejoras adicionales tipo Dunamis */
h1, h2, h3, h4, h5, h6 {
    color: var(--text) !important;
    font-weight: 600 !important;
}

/* Mejorar contraste en breadcrumbs */
.breadcrumb-item a {
    color: var(--primary) !important;
}
.breadcrumb-item.active {
    color: var(--muted) !important;
}

/* Alerts mejorados */
.alert {
    border-left: 4px solid !important;
    font-weight: 500 !important;
}
.alert-success {
    background-color: #d1fae5 !important;
    border-left-color: var(--success) !important;
    color: #065f46 !important;
}
.alert-warning {
    background-color: #fef3c7 !important;
    border-left-color: var(--warning) !important;
    color: #92400e !important;
}
.alert-danger {
    background-color: #fee2e2 !important;
    border-left-color: var(--danger) !important;
    color: #991b1b !important;
}
.alert-info {
    background-color: #dbeafe !important;
    border-left-color: var(--info) !important;
    color: #1e40af !important;
}

/* Mejorar contraste en modales */
.modal-header {
    background-color: #f8fafc !important;
    border-bottom: 1px solid var(--card-border) !important;
}
.modal-title {
    color: var(--text) !important;
    font-weight: 600 !important;
}
.modal-body {
    color: var(--text) !important;
}

/* Mejorar legendas y estadísticas */
.mb-3.d-flex span {
    color: var(--text) !important;
    font-weight: 500 !important;
}
.mb-3.d-flex strong {
    color: var(--text) !important;
    font-weight: 700 !important;
}

/* Mejorar datatables */
.dataTables_wrapper .dataTables_filter input { 
    background: #ffffff !important; 
    border: 1px solid var(--card-border) !important;
    color: var(--text) !important;
}
.dataTables_wrapper .dataTables_length select {
    background: #ffffff !important;
    border: 1px solid var(--card-border) !important;
    color: var(--text) !important;
}