/* Estilos institucionales para paneles y botoneras
   Diseñado para integrarse con Bootstrap 5
*/
:root {
  --si-primary: var(--bs-primary, #0d6efd);
  --si-accent: #0b5ed7;
  --si-muted: var(--bs-secondary-text-emphasis, #6c757d);

  /* Default Light Mode */
  --si-bg-card: #ffffff;
  --si-card-border: rgba(13, 110, 253, 0.08);
  --si-title: #0b2545;
  --si-subtitle: #6c757d;
  --si-icon-bg: rgba(13, 110, 253, 0.1);
  --si-radius: .6rem;
}

/* Modo Oscuro: Explicit Overrides */
[data-bs-theme="dark"] {
  --si-bg-card: #212529;
  /* Dark background */
  --si-card-border: #495057;
  /* Visible grey border */
  --si-title: #f8f9fa;
  /* Light text */
  --si-subtitle: #adb5bd;
  /* Muted light text */
  --si-icon-bg: rgba(13, 110, 253, 0.25);
  --si-primary: #3d8bfd;
  /* Lighter blue for better contrast */
}

/* Tile container: dynamic flexbox layout centered with up to 3 per row */
.panel-tiles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

.panel-tiles > * {
  flex: 0 0 calc((100% - 2 * 1.25rem) / 3);
  max-width: calc((100% - 2 * 1.25rem) / 3);
  min-width: 250px;
}

/* Tablet Override */
@media (max-width: 992px) {
  .panel-tiles > * {
    flex: 0 0 calc((100% - 1.25rem) / 2);
    max-width: calc((100% - 1.25rem) / 2);
  }
}

/* Mobile Override */
@media (max-width: 576px) {
  .panel-tiles > * {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

/* Base Theme Variables for Tiles (Defaults to blue) */
.panel-tile {
  --tile-color: #3b82f6;
  --tile-color-rgb: 59, 130, 246;

  background-color: var(--si-bg-card) !important;
  border: 1px solid var(--si-card-border);
  border-radius: var(--si-radius);
  padding: 1.1rem 1.25rem;
  transition: transform .22s cubic-bezier(0.4, 0, 0.2, 1), 
              box-shadow .22s cubic-bezier(0.4, 0, 0.2, 1), 
              border-color .22s cubic-bezier(0.4, 0, 0.2, 1),
              background-color .22s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  color: var(--si-title);
  text-decoration: none;
  display: flex;
  flex-direction: row; /* Standardize on horizontal layout */
  align-items: center;
  justify-content: flex-start;
  min-height: 90px;
  height: 100%;
}

/* Theme Color Classes */
.panel-tile.tile-blue {
  --tile-color: #3b82f6;
  --tile-color-rgb: 59, 130, 246;
}
.panel-tile.tile-green {
  --tile-color: #10b981;
  --tile-color-rgb: 16, 185, 129;
}
.panel-tile.tile-purple {
  --tile-color: #8b5cf6;
  --tile-color-rgb: 139, 92, 246;
}
.panel-tile.tile-cyan {
  --tile-color: #06b6d4;
  --tile-color-rgb: 6, 182, 212;
}
.panel-tile.tile-orange {
  --tile-color: #f59e0b;
  --tile-color-rgb: 245, 158, 11;
}
.panel-tile.tile-red {
  --tile-color: #ef4444;
  --tile-color-rgb: 239, 68, 68;
}
.panel-tile.tile-indigo {
  --tile-color: #6366f1;
  --tile-color-rgb: 99, 102, 241;
}
.panel-tile.tile-teal {
  --tile-color: #14b8a6;
  --tile-color-rgb: 20, 184, 166;
}
.panel-tile.tile-pink {
  --tile-color: #ec4899;
  --tile-color-rgb: 236, 72, 153;
}

/* Hover effects for the tile */
.panel-tile:hover {
  transform: translateY(-4px);
  border-color: rgba(var(--tile-color-rgb), 0.5) !important;
  box-shadow: 0 10px 25px -5px rgba(var(--tile-color-rgb), 0.15), 0 8px 10px -6px rgba(var(--tile-color-rgb), 0.1) !important;
  text-decoration: none;
  color: var(--si-title);
}

[data-bs-theme="dark"] .panel-tile:hover {
  background-color: rgba(var(--tile-color-rgb), 0.04) !important;
  border-color: rgba(var(--tile-color-rgb), 0.6) !important;
  box-shadow: 0 10px 30px -5px rgba(var(--tile-color-rgb), 0.35), 0 8px 15px -6px rgba(var(--tile-color-rgb), 0.2) !important;
}

/* Icon Squircle Styling */
.panel-tile .icon {
  width: 48px;
  height: 48px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: rgba(var(--tile-color-rgb), 0.1) !important;
  color: var(--tile-color) !important;
  font-size: 1.4rem;
  margin-bottom: 0 !important;
  margin-right: 1rem !important;
  flex-shrink: 0;
  transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  border: 1px solid rgba(var(--tile-color-rgb), 0.15);
  box-shadow: 0 4px 6px -1px rgba(var(--tile-color-rgb), 0.05);
}

/* Light theme adaptations */
[data-bs-theme="light"] .panel-tile .icon {
  background: rgba(var(--tile-color-rgb), 0.08) !important;
  border-color: rgba(var(--tile-color-rgb), 0.12);
  color: var(--tile-color) !important;
}

/* Dark theme adaptations */
[data-bs-theme="dark"] .panel-tile .icon {
  background: rgba(var(--tile-color-rgb), 0.18) !important;
  border-color: rgba(var(--tile-color-rgb), 0.25);
  color: rgba(var(--tile-color-rgb), 0.9) !important;
}

/* Hover effects for the icon */
.panel-tile:hover .icon {
  transform: scale(1.08);
  background: rgba(var(--tile-color-rgb), 0.2) !important;
  color: var(--tile-color) !important;
  box-shadow: 0 10px 15px -3px rgba(var(--tile-color-rgb), 0.3);
}

[data-bs-theme="dark"] .panel-tile:hover .icon {
  background: rgba(var(--tile-color-rgb), 0.32) !important;
  color: #fff !important;
  box-shadow: 0 10px 20px -3px rgba(var(--tile-color-rgb), 0.5);
}

.panel-tile .flex-grow-1 {
  text-align: left;
  flex-grow: 1 !important;
  min-width: 0;
}

.panel-tile .title {
  font-weight: 750;
  font-size: 1.05rem;
  color: var(--si-title);
  margin-bottom: 0.15rem;
  line-height: 1.25;
  text-align: left;
}

.panel-tile .subtitle {
  font-size: 0.82rem;
  color: var(--si-subtitle);
  line-height: 1.3;
  text-align: left;
}

/* Adjustes responsivos */
@media (max-width: 576px) {
  .panel-tile {
    padding: 0.85rem 1rem;
    min-height: auto;
  }

  .panel-tile .icon {
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    margin-right: 0.85rem !important;
  }
}

/* Badge adjustments */
.badge-sample {
  padding: .45em .55em;
  border-radius: .45rem;
  font-weight: 600;
  background: rgba(0, 0, 0, 0.04);
  color: inherit;
}

[data-bs-theme="dark"] .badge-sample {
  background: rgba(255, 255, 255, 0.1);
}

/* Utilities */
.panel-tiles .col-actions {
  display: flex;
  gap: .5rem;
  justify-content: center;
}

/* Botón principal dentro del panel */
.panel-cta {
  border-radius: .5rem;
  padding: .55rem .9rem;
}

/* ==========================================================================
   FIX: Legacy app.css overrides
   app.css contains BS4 which forces .card background to white.
   We explicitly override it here for Dark Mode to work with BS5.
   ========================================================================== */
[data-bs-theme="dark"] .card {
  background-color: #212529;
  /* Dark card background */
  border-color: #495057;
  color: #dfdfdf;
}

[data-bs-theme="dark"] .card-header {
  background-color: rgba(255, 255, 255, 0.05);
  /* Slight highlight */
  border-bottom-color: #495057;
  color: #fff;
}

[data-bs-theme="dark"] .card-footer {
  background-color: rgba(0, 0, 0, 0.2);
  border-top-color: #495057;
}

/* Fix text muted in dark mode cards */
[data-bs-theme="dark"] .text-muted {
  color: #adb5bd !important;
}

/* ==========================================================================
   FIX: Navbar Border in Dark Mode
   Replace the hard white border with a subtle shadow to mimic light mode.
   ========================================================================== */
[data-bs-theme="dark"] .navbar.border-bottom {
  border-bottom: none !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.15);
  /* Soft dark shadow */
}

/* ==========================================================================
   FIX: Unified Glass Card and Card Header Overrides
   Ensures card layouts are identical, modern, and light/dark theme-responsive.
   ========================================================================== */
.card.glass-card {
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04) !important;
}

[data-bs-theme="light"] .card.glass-card {
  background: rgba(255, 255, 255, 0.45) !important;
}

[data-bs-theme="dark"] .card.glass-card {
  background: rgba(33, 37, 41, 0.7) !important;
  border-color: rgba(255, 255, 255, 0.1) !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25) !important;
}

.glass-card .card-header {
  padding: 1.1rem 1.5rem !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

[data-bs-theme="light"] .glass-card .card-header {
  background: rgba(26, 26, 27, 0.03) !important; /* Soft grey/blue */
  border-bottom-color: rgba(0, 0, 0, 0.06) !important;
}

[data-bs-theme="dark"] .glass-card .card-header {
  background: rgba(26, 26, 27, 0.8) !important; /* Midnight Black transparent */
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

/* Glass Card Header Typography & Theme adaptation */
.glass-card .card-header h5,
.glass-card .card-header .h5 {
  margin-bottom: 0 !important;
  font-size: 1.2rem !important;
  font-weight: 750 !important;
  letter-spacing: -0.025em;
  display: inline-block !important;
}

[data-bs-theme="light"] .glass-card .card-header h5,
[data-bs-theme="light"] .glass-card .card-header .h5 {
  color: var(--sp-brand-blue) !important;
  text-shadow: none !important;
}

[data-bs-theme="dark"] .glass-card .card-header h5,
[data-bs-theme="dark"] .glass-card .card-header .h5 {
  color: #ffffff !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
}