/* ============================================================
   NotarialMX — Custom CSS
   Complements Bootstrap 5; semantic HTML5 layout
   ============================================================ */

/* ── CSS Custom Properties ─────────────────────────────────── */
:root {
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 0px;
  --navbar-height: 56px;
  --transition-speed: 0.25s;
  --region-norte: #0d6efd;
  --region-centro: #dc3545;
  --region-sur: #198754;
  --region-occidente: #ffc107;
  --region-oriente: #0dcaf0;
}

/* ── Base ───────────────────────────────────────────────────── */
body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
}

a {
  transition: color var(--transition-speed) ease, opacity var(--transition-speed) ease;
}

/* ── Sidebar (Backoffice) ───────────────────────────────────── */
.sidebar {
  width: var(--sidebar-width);
  min-height: calc(100vh - var(--navbar-height));
  transition: width var(--transition-speed) ease;
  overflow: hidden;
  position: sticky;
  top: var(--navbar-height);
  align-self: flex-start;
  height: calc(100vh - var(--navbar-height));
  overflow-y: auto;
}

.sidebar.collapsed {
  width: 0;
}

#mainContent {
  transition: margin-left var(--transition-speed) ease;
  min-width: 0;
  flex: 1;
}

.sidebar-link {
  border-radius: 0.5rem;
  color: #495057;
  font-weight: 500;
  padding: 0.55rem 0.85rem;
  display: flex;
  align-items: center;
  transition: background var(--transition-speed), color var(--transition-speed);
}

.sidebar-link:hover {
  background-color: #f0f4ff;
  color: #0d6efd;
}

.sidebar-link.active {
  background-color: #e7f0ff;
  color: #0d6efd;
  font-weight: 600;
}

.sidebar-link i {
  width: 1.25rem;
  text-align: center;
}

/* ── Stat Cards ─────────────────────────────────────────────── */
.stat-card {
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
}

.stat-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 25px rgba(0,0,0,0.12) !important;
}

.stat-icon {
  min-width: 64px;
  min-height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ── Hero Section (Public) ──────────────────────────────────── */
.hero-section {
  background: linear-gradient(135deg, #0b1329 0%, #111d40 50%, #1e3a8a 100%);
  position: relative;
  overflow: hidden;
}

.hero-section h1 {
  letter-spacing: -0.02em;
}

.hero-section .text-primary {
  color: #38bdf8 !important; /* Azul celeste brillante de alto contraste sobre fondo oscuro */
}

/* ── Stats Section ──────────────────────────────────────────── */
.stats-section .stat-counter {
  padding: 0.5rem 2rem;
}

/* ── Region Cards ───────────────────────────────────────────── */
.region-card {
  transition: transform var(--transition-speed) ease, box-shadow var(--transition-speed) ease;
  cursor: pointer;
}

.region-card:hover,
.hover-lift:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0,0,0,0.12) !important;
}

/* Region badge colours */
.region-badge {
  font-size: 0.75rem;
  padding: 0.3em 0.65em;
}

.region-badge.region-norte,
.badge.region-norte   { background-color: var(--region-norte) !important; color: #fff; }
.region-badge.region-centro,
.badge.region-centro  { background-color: var(--region-centro) !important; color: #fff; }
.region-badge.region-sur,
.badge.region-sur     { background-color: var(--region-sur) !important; color: #fff; }
.region-badge.region-occidente,
.badge.region-occidente { background-color: var(--region-occidente) !important; color: #212529; }
.region-badge.region-oriente,
.badge.region-oriente { background-color: var(--region-oriente) !important; color: #212529; }

/* Region card accent borders */
.region-norte    { border-top: 4px solid var(--region-norte) !important; }
.region-centro   { border-top: 4px solid var(--region-centro) !important; }
.region-sur      { border-top: 4px solid var(--region-sur) !important; }
.region-occidente { border-top: 4px solid var(--region-occidente) !important; }
.region-oriente  { border-top: 4px solid var(--region-oriente) !important; }

/* ── Tables ─────────────────────────────────────────────────── */
.table > thead > tr > th {
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* ── Dropdown search ────────────────────────────────────────── */
#searchDropdown,
#searchSuggestions {
  max-height: 320px;
  overflow-y: auto;
  border-radius: 0 0 0.5rem 0.5rem;
}

#searchDropdown .dropdown-item:hover,
#searchSuggestions .dropdown-item:hover {
  background-color: #f0f4ff;
}

/* ── Cards & Shadows ────────────────────────────────────────── */
.card {
  border-radius: 0.75rem;
}

.card-header {
  border-radius: 0.75rem 0.75rem 0 0 !important;
}

/* ── Footer hover links ─────────────────────────────────────── */
footer a:hover {
  color: #fff !important;
  opacity: 0.9;
}

/* ── Responsive ─────────────────────────────────────────────── */
@media (max-width: 768px) {
  .sidebar {
    position: fixed;
    top: var(--navbar-height);
    left: 0;
    z-index: 1040;
    height: calc(100vh - var(--navbar-height));
    background: #fff;
    box-shadow: 4px 0 12px rgba(0,0,0,0.15);
    transform: translateX(-100%);
    transition: transform var(--transition-speed) ease;
    width: var(--sidebar-width) !important;
  }

  .sidebar.mobile-open {
    transform: translateX(0);
  }

  #mainContent {
    width: 100%;
    padding: 1rem !important;
  }

  .stats-section .stat-counter {
    padding: 0.5rem 1rem;
  }
}

/* ── Utility ────────────────────────────────────────────────── */
.font-monospace {
  font-size: 0.85em;
}

.text-truncate-2 {
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

/* ── Breadcrumb Dark (High Contrast on Primary & Dark backgrounds) ── */
.breadcrumb-dark {
  --bs-breadcrumb-divider-color: rgba(255, 255, 255, 0.65);
}
.breadcrumb-dark .breadcrumb-item + .breadcrumb-item::before {
  color: rgba(255, 255, 255, 0.65) !important;
}
.breadcrumb-dark .breadcrumb-item a {
  color: rgba(255, 255, 255, 0.75);
  transition: color 0.15s ease-in-out;
}
.breadcrumb-dark .breadcrumb-item a:hover {
  color: #ffffff !important;
  text-decoration: underline !important;
}
.breadcrumb-dark .breadcrumb-item.active {
  color: #ffffff !important;
  font-weight: 600;
}