/* ============================================================
   DESIGN TOKENS — Paleta inspirada en jnjmx.com
   ============================================================ */
:root {
  /* Rojo brand (jnjmx accent) */
  --jnj-red:          #dc2626;
  --jnj-red-hover:    #b91c1c;
  --jnj-red-active:   #991b1b;
  --jnj-red-subtle:   rgba(220, 38, 38, 0.09);
  --jnj-red-muted:    #fef2f2;

  /* Navy oscuro (jnjmx slate-900) */
  --jnj-dark:         #0f172a;
  --jnj-dark-2:       #1e293b;
  --jnj-dark-3:       #334155;

  /* Escala neutra */
  --jnj-slate-5:      #64748b;
  --jnj-slate-4:      #94a3b8;
  --jnj-slate-2:      #e2e8f0;
  --jnj-slate-1:      #f1f5f9;

  /* Override Bootstrap primary → rojo */
  --bs-primary:             var(--jnj-red);
  --bs-primary-rgb:         220, 38, 38;
  --bs-link-color:          var(--jnj-red);
  --bs-link-color-rgb:      220, 38, 38;
  --bs-link-hover-color:    var(--jnj-red-hover);

  /* Tipografía — stack nativo igual que jnjmx.com */
  --bs-body-font-family: ui-sans-serif, system-ui, -apple-system,
                         BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --bs-body-font-size:   0.9375rem;

  /* Border radius más generoso */
  --bs-border-radius:    0.6rem;
  --bs-border-radius-lg: 1rem;
  --bs-border-radius-xl: 1.5rem;
}

/* ============================================================
   BOOTSTRAP PRIMARY → ROJO (sobrescribe colores compilados)
   ============================================================ */
.btn-primary {
  --bs-btn-color:               #fff;
  --bs-btn-bg:                  var(--jnj-red);
  --bs-btn-border-color:        var(--jnj-red);
  --bs-btn-hover-color:         #fff;
  --bs-btn-hover-bg:            var(--jnj-red-hover);
  --bs-btn-hover-border-color:  var(--jnj-red-hover);
  --bs-btn-active-bg:           var(--jnj-red-active);
  --bs-btn-active-border-color: var(--jnj-red-active);
  --bs-btn-focus-shadow-rgb:    220, 38, 38;
  --bs-btn-disabled-bg:         var(--jnj-red);
  --bs-btn-disabled-border-color: var(--jnj-red);
}

.btn-outline-primary {
  --bs-btn-color:               var(--jnj-red);
  --bs-btn-border-color:        var(--jnj-red);
  --bs-btn-hover-bg:            var(--jnj-red);
  --bs-btn-hover-border-color:  var(--jnj-red);
  --bs-btn-active-bg:           var(--jnj-red);
  --bs-btn-focus-shadow-rgb:    220, 38, 38;
}

.text-primary              { color: var(--jnj-red) !important; }
.bg-primary                { background-color: var(--jnj-red) !important; }
.border-primary            { border-color: var(--jnj-red) !important; }
.text-bg-primary           { background-color: var(--jnj-red) !important; color: #fff !important; }
.badge.bg-primary          { background-color: var(--jnj-red) !important; }

/* Focus ring en rojo */
.form-control:focus,
.form-select:focus {
  border-color: var(--jnj-red) !important;
  box-shadow: 0 0 0 0.22rem rgba(220, 38, 38, 0.18) !important;
}

/* Paginación activa en rojo */
.page-link {
  --bs-pagination-color:               var(--jnj-red);
  --bs-pagination-hover-color:         var(--jnj-red-hover);
  --bs-pagination-focus-color:         var(--jnj-red);
  --bs-pagination-active-bg:           var(--jnj-red);
  --bs-pagination-active-border-color: var(--jnj-red);
}

/* Nav links */
.nav-link { color: var(--jnj-red); }
.nav-link.active { color: var(--jnj-red) !important; }

/* ============================================================
   TIPOGRAFÍA — estilo jnjmx
   ============================================================ */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--jnj-dark);
}

.display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
  font-weight: 800;
  letter-spacing: -0.04em;
}

/* ============================================================
   LAYOUT BASE
   ============================================================ */
.container-narrow { max-width: 1100px; }
.table td, .table th { vertical-align: middle; }
code {
  padding: .1rem .25rem;
  border-radius: .25rem;
  background: rgba(0,0,0,.05);
}

/* ============================================================
   TOPBAR — dark navy
   ============================================================ */
.app-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: 64px;
  display: flex;
  align-items: center;
  background: rgba(15, 23, 42, 0.96);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

/* ---- Fix: TODOS los botones dentro del topbar → blancos ---- */

/* btn-outline-secondary (Menú, Ayuda) */
.app-topbar .btn-outline-secondary {
  --bs-btn-color:               rgba(255, 255, 255, 0.82) !important;
  --bs-btn-border-color:        rgba(255, 255, 255, 0.22) !important;
  --bs-btn-hover-bg:            rgba(255, 255, 255, 0.10) !important;
  --bs-btn-hover-border-color:  rgba(255, 255, 255, 0.35) !important;
  --bs-btn-hover-color:         #ffffff !important;
  --bs-btn-active-bg:           rgba(255, 255, 255, 0.15) !important;
  --bs-btn-active-color:        #ffffff !important;
  color:        rgba(255, 255, 255, 0.82) !important;
  border-color: rgba(255, 255, 255, 0.22) !important;
}
.app-topbar .btn-outline-secondary:hover,
.app-topbar .btn-outline-secondary:focus {
  color:            #ffffff !important;
  background-color: rgba(255, 255, 255, 0.10) !important;
  border-color:     rgba(255, 255, 255, 0.35) !important;
}

/* btn-link (user dropdown toggle) */
.app-topbar .btn-link {
  color: rgba(255, 255, 255, 0.85) !important;
  text-decoration: none !important;
}
.app-topbar .btn-link:hover,
.app-topbar .btn-link:focus {
  color: #ffffff !important;
}

/* Caret del dropdown → blanco */
.app-topbar .dropdown-toggle::after {
  border-top-color: rgba(255, 255, 255, 0.6);
}

/* ---- Logos y textos en topbar ---- */
.app-logo   { height: 32px; width: auto; }
.app-title  { font-weight: 700; color: #ffffff; letter-spacing: -0.01em; }

.app-icon-btn {
  color: rgba(255, 255, 255, 0.8);
  text-decoration: none;
  padding: 0 .25rem;
}
.app-icon-btn:hover { color: #ffffff; }

.app-user-btn {
  color: rgba(255, 255, 255, 0.85);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: .25rem;
}
.app-user-btn:hover { color: #ffffff; }

/* ---- Dropdown menú user — blanco limpio ---- */
.app-user-dropdown {
  /* Override CSS vars de Bootstrap (forma correcta en BS5) */
  --bs-dropdown-bg:               #ffffff;
  --bs-dropdown-border-color:     var(--jnj-slate-2);
  --bs-dropdown-color:            var(--jnj-dark);
  /* Fallback directo con !important */
  background-color: #ffffff !important;
  border: 1px solid var(--jnj-slate-2) !important;
  border-radius: 1rem !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.06) !important;
  min-width: 220px;
}
.app-user-dropdown .small       { color: var(--jnj-slate-4) !important; }
.app-user-dropdown .fw-semibold { color: var(--jnj-dark)    !important; }
.app-user-dropdown hr           { border-color: var(--jnj-slate-2) !important; }

/* ============================================================
   SIDEBAR — header dark navy + body blanco
   ============================================================ */
.app-sidebar {
  --bs-offcanvas-bg: #ffffff;
}

.app-sidebar .offcanvas-header {
  background: var(--jnj-dark);
  border-bottom: 1px solid rgba(255,255,255,0.07) !important;
  padding: 1.25rem;
}

.app-sidebar .offcanvas-header #appSidebarLabel,
.app-sidebar .offcanvas-header .fw-semibold {
  color: #ffffff !important;
}
.app-sidebar .offcanvas-header .small,
.app-sidebar .offcanvas-header .text-body-secondary {
  color: rgba(255,255,255,0.48) !important;
}

/* Fix: btn-close sobre fondo oscuro → blanco */
.app-sidebar .offcanvas-header .btn-close {
  --bs-btn-close-filter: invert(1) brightness(2);
  filter: invert(1) brightness(2) !important;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.app-sidebar .offcanvas-header .btn-close:hover { opacity: 1; }

.app-sidebar .offcanvas-body { padding: 1.25rem 1rem; }

/* Section label — uppercase tracking jnjmx */
.app-sidebar-section {
  font-size: .68rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--jnj-slate-4);
  margin-bottom: .875rem;
}

/* Sidebar nav links */
.app-side-link {
  display: flex;
  align-items: center;
  padding: .6rem .85rem;
  border-radius: .75rem;
  text-decoration: none;
  color: var(--jnj-dark-2);
  border: 1px solid transparent;
  background: transparent;
  font-weight: 500;
  font-size: 0.9rem;
  transition: background .14s ease, color .14s ease, transform .1s ease, border-color .14s ease;
}
.app-side-link:hover {
  transform: translateX(2px);
  background: var(--jnj-slate-1);
  color: var(--jnj-dark);
}
.app-side-link.active {
  font-weight: 600;
  color: var(--jnj-red);
  background: var(--jnj-red-muted);
  border-color: rgba(220, 38, 38, 0.18);
  border-left: 3px solid var(--jnj-red);
}

/* ============================================================
   MAIN CONTENT SURFACE
   ============================================================ */
.app-surface {
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(0,0,0,0.05);
  border-radius: 1.25rem;
  padding: 1.5rem;
  box-shadow:
    0 1px 3px rgba(0,0,0,0.04),
    0 8px 24px rgba(0,0,0,0.06),
    0 24px 48px rgba(0,0,0,0.04);
  /* Sin animation: evita el stacking context que atrapa z-index de modales */
}
.app-surface > *:last-child { margin-bottom: 0 !important; }

/* ============================================================
   CARDS
   ============================================================ */
.card {
  border: 1px solid var(--jnj-slate-2) !important;
  border-radius: 1rem !important;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 14px rgba(0,0,0,0.05) !important;
  overflow: hidden;
}
.card-header {
  background: var(--jnj-slate-1) !important;
  border-bottom: 1px solid var(--jnj-slate-2) !important;
  padding: .85rem 1.25rem !important;
}
/* Card header → uppercase label style */
.card-header h2,
.card-header .h6,
.card-header h2.h6 {
  font-size: .72rem !important;
  font-weight: 700 !important;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--jnj-slate-5) !important;
  margin: 0;
}

/* ============================================================
   FASE 4 — DASHBOARD: stat icon box
   ============================================================ */
.stat-icon-box {
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.875rem;
  background: var(--jnj-red-subtle);
  color: var(--jnj-red);
  font-size: 1.3rem;
  flex-shrink: 0;
  transition: background 0.2s;
}

/* Cash stat mini-boxes → fondo de color suave */
.card-body .border-info.rounded-3    { background: rgba(13, 202, 240, 0.06) !important; }
.card-body .border-warning.rounded-3 { background: rgba(255, 193,   7, 0.08) !important; }
.card-body .border-success.rounded-3 { background: rgba(25,  135,  84, 0.07) !important; }
.card-body .border-danger.rounded-3  { background: rgba(220,  53,  69, 0.07) !important; }

/* Número dentro de mini-box → más peso */
.card-body .border.rounded-3 .h4 {
  font-weight: 800;
  letter-spacing: -0.03em;
}

/* Empty state */
.card-body > p.text-body-secondary {
  text-align: center;
  padding: 2rem 0 1rem;
  color: var(--jnj-slate-4) !important;
}

/* ============================================================
   FASE 4 — TABLAS
   ============================================================ */
.table thead th {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .09em;
  color: var(--jnj-slate-5);
  padding-top: .75rem;
  padding-bottom: .75rem;
  white-space: nowrap;
}
.table-secondary thead,
thead.table-secondary {
  background-color: var(--jnj-slate-1) !important;
}
.table tbody tr {
  transition: background 0.1s ease;
}
.table tbody tr:hover > td {
  background-color: var(--jnj-red-muted);
}

/* Paginador de tablas del dashboard */
#pager-grp-province .btn-outline-secondary,
#pager-grp-diocese  .btn-outline-secondary,
#pager-ppl-province .btn-outline-secondary,
#pager-ppl-diocese  .btn-outline-secondary,
#pager-bus-province .btn-outline-secondary,
#pager-bus-diocese  .btn-outline-secondary {
  border-radius: 0.5rem;
  padding: 0.2rem 0.6rem;
}

/* ============================================================
   FASE 5 — BADGES Y ESTADOS
   ============================================================ */

/* Pill badges más expresivos */
.badge {
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.4em 0.75em;
  border-radius: 999px;
}

/* Alertas redondeadas y sin borde */
.alert {
  border-radius: 0.85rem;
  border: none;
  font-size: 0.9rem;
}
.alert-warning {
  background: rgba(234, 179, 8, 0.12);
  color: #78350f;
}
.alert-danger {
  background: rgba(220, 38, 38, 0.09);
  color: #7f1d1d;
}
.alert-success {
  background: rgba(22, 163, 74, 0.09);
  color: #14532d;
}
.alert-info {
  background: rgba(6, 182, 212, 0.09);
  color: #164e63;
}

/* ============================================================
   FASE 6 — FORMS GLOBALES (fuera del login)
   ============================================================ */
.form-control,
.form-select {
  border-radius: 0.6rem;
  border-color: var(--jnj-slate-2);
  background-color: #f8fafc;
  color: var(--jnj-dark);
  transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.form-control::placeholder { color: var(--jnj-slate-4); }
.form-control:hover,
.form-select:hover {
  border-color: var(--jnj-slate-4);
}

/* Labels globales */
.form-label {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--jnj-dark-2);
  margin-bottom: 0.35rem;
}

/* Input groups */
.input-group .form-control:first-child { border-right: none; }
.input-group .btn { border-radius: 0 0.6rem 0.6rem 0 !important; }

/* ============================================================
   MODALES
   ============================================================ */
.modal-content {
  border-radius: 1.25rem !important;
  border: none !important;
  box-shadow: 0 25px 60px rgba(0,0,0,0.18) !important;
  overflow: hidden;
}
.modal-header {
  border-bottom: 1px solid var(--jnj-slate-2);
  padding: 1.1rem 1.4rem;
}
.modal-footer {
  border-top: 1px solid var(--jnj-slate-2);
}

/* ============================================================
   FOOTER
   ============================================================ */
.app-footer {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border-top: none;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  text-align: center;
  padding: 0.6rem 1rem;
  margin-top: auto;
}
.app-footer-link {
  color: rgba(255,255,255,0.9);
  text-decoration: none;
  font-weight: 700;
}
.app-footer-link:hover { text-decoration: underline; }

/* ============================================================
   FASE 7 — MICRO-INTERACCIONES
   ============================================================ */
.btn {
  transition: background-color .15s ease, border-color .15s ease,
              color .15s ease, transform .1s ease, box-shadow .15s ease;
}
.btn:active:not(:disabled) { transform: scale(0.97); }

/* Links del sidebar ya tienen transform en hover */

/* ============================================================
   LOGIN / AUTH CARD
   ============================================================ */
.login-card {
  background: #ffffff;
  border: none;
  border-radius: 1.5rem;
  padding: 2.5rem 2.25rem;
  box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.04),
    0 8px 16px rgba(0, 0, 0, 0.08);
  animation: loginCardEnter 0.65s cubic-bezier(.22,1,.36,1) both;
}
@keyframes loginCardEnter {
  from { opacity: 0; transform: translateY(28px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.login-card-logo       { text-align: center; margin-bottom: 1.5rem; }
.login-card-divider    { height: 1px; background: rgba(0,0,0,0.08); margin-bottom: 1.75rem; }
.login-card-title      { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.02em; color: var(--jnj-dark); text-align: center; margin-bottom: 0.4rem; }
.login-card-subtitle   { font-size: 0.82rem; color: var(--jnj-slate-5); text-align: center; margin-bottom: 1.75rem; }
.login-form            { display: flex; flex-direction: column; gap: 1rem; }
.login-field           { display: flex; flex-direction: column; gap: 0.35rem; }
.login-label           { font-size: 0.82rem; font-weight: 600; color: var(--jnj-dark-2); margin-bottom: 0; }

.login-input {
  background: #f8fafc !important;
  border: 1px solid var(--jnj-slate-2) !important;
  border-radius: 0.65rem !important;
  color: var(--jnj-dark) !important;
  padding: 0.6rem 0.9rem;
  transition: border-color 0.2s, background 0.2s, box-shadow 0.2s;
}
.login-input:focus {
  background: #ffffff !important;
  border-color: var(--jnj-red) !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.12) !important;
  outline: none;
}

.login-btn {
  width: 100%;
  padding: 0.65rem;
  border-radius: 0.65rem;
  font-weight: 600;
  font-size: 0.95rem;
  margin-top: 0.25rem;
  letter-spacing: 0.01em;
  background-color: var(--jnj-red);
  border-color: var(--jnj-red);
  color: #fff;
  transition: background-color 0.2s, border-color 0.2s;
}
.login-btn:hover {
  background-color: var(--jnj-red-hover);
  border-color: var(--jnj-red-hover);
  color: #fff;
}

.login-register-text   { text-align: center; font-size: 0.82rem; color: var(--jnj-slate-5); margin-top: 1.5rem; margin-bottom: 0; }
.login-register-link   { color: var(--jnj-red); font-weight: 700; text-decoration: none; }
.login-register-link:hover { text-decoration: underline; color: var(--jnj-red-hover); }

/* Register grid */
.register-form          { display: flex; flex-direction: column; }
.register-grid          { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.register-full          { grid-column: 1 / -1; }
.register-section-label {
  grid-column: 1 / -1;
  font-size: .7rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .1em;
  color: var(--jnj-slate-4);
  padding-top: 0.5rem;
  border-top: 1px solid var(--jnj-slate-1);
  margin-top: 0.25rem;
}

@media (max-width: 767.98px) {
  .register-grid          { grid-template-columns: 1fr; }
  .register-full          { grid-column: 1; }
  .register-section-label { grid-column: 1; }
}
@media (max-width: 575.98px) {
  .login-card { padding: 1.75rem 1.25rem; }
}

.login-input.form-select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2394a3b8' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
}

.login-help-btn {
  background: none; border: none; padding: 0;
  font-size: 0.78rem; color: var(--jnj-slate-4);
  cursor: pointer; transition: color 0.2s;
}
.login-help-btn:hover { color: var(--jnj-slate-5); }