/* ============================================================
   AJOR — Asociación de Jornadas — tema visual centralizado
   ------------------------------------------------------------
   Paleta tomada del logo (marrón/naranja del cerro y la cinta,
   azul marino de la cruz/círculo, y los 5 colores de las
   personitas). Para cambiar el look del sistema entero, se
   toca SOLO este archivo — todo lo demás usa estas variables
   (directamente, o a través de las clases de Bootstrap que acá
   se remapean: btn-primary, bg-success, text-danger, etc.)
   ============================================================ */

:root {
  /* — Marca AJOR — */
  --ajor-orange:        #F07800;
  --ajor-orange-dark:   #8A4400;
  --ajor-orange-light:  #FFA94D;
  --ajor-navy:          #2E2A78;
  --ajor-navy-dark:     #1E1B54;
  --ajor-navy-light:    #4A46A0;

  /* — Colores de las personitas del logo, como paleta semántica — */
  --ajor-red:    #D81818;
  --ajor-blue:   #2E9BD6;
  --ajor-gray:   #8A8A8A;
  --ajor-green:  #009048;
  --ajor-yellow: #F0B429;

  /* — Fondo y texto general — */
  --ajor-bg:          #F5F6FA;
  --ajor-surface:     #FFFFFF;
  --ajor-text:        #22212E;
  --ajor-text-muted:  #6B6A7A;
  --ajor-border:      #E7E7EF;

  /* — Radios y sombras (look moderno, más redondeado) — */
  --ajor-radius-sm: .5rem;
  --ajor-radius:    .85rem;
  --ajor-radius-lg: 1.25rem;
  --ajor-shadow:    0 1px 2px rgba(30,27,84,.05), 0 8px 20px rgba(30,27,84,.06);
  --ajor-shadow-sm: 0 1px 2px rgba(30,27,84,.06);

  --ajor-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* — Layout — */
  --ajor-sidebar-width: 262px;
  --ajor-topbar-height: 58px;

  /* ── Remapeo de variables de Bootstrap 5.3 — así los componentes
     estándar (btn-primary, bg-success, badge, alert, etc.) usan la
     paleta de AJOR sin tener que tocar cada vista. ── */
  --bs-primary:            var(--ajor-orange);
  --bs-primary-rgb:        240, 120, 0;
  --bs-primary-text-emphasis: var(--ajor-orange-dark);
  --bs-primary-bg-subtle:  #FDEBD8;
  --bs-primary-border-subtle: #F5C48C;
  --bs-link-color:         var(--ajor-orange);
  --bs-link-color-rgb:     240, 120, 0;
  --bs-link-hover-color:   var(--ajor-orange-dark);
  --bs-link-hover-color-rgb: 138, 68, 0;

  --bs-secondary:          var(--ajor-gray);
  --bs-secondary-rgb:      138, 138, 138;

  --bs-success:            var(--ajor-green);
  --bs-success-rgb:        0, 144, 72;
  --bs-success-text-emphasis: #06552D;
  --bs-success-bg-subtle:  #DCF3E7;
  --bs-success-border-subtle: #9FDCBE;

  --bs-danger:             var(--ajor-red);
  --bs-danger-rgb:         216, 24, 24;
  --bs-danger-text-emphasis: #7A0E0E;
  --bs-danger-bg-subtle:   #FBDADA;
  --bs-danger-border-subtle: #F2A3A3;

  --bs-warning:            var(--ajor-yellow);
  --bs-warning-rgb:        240, 180, 41;
  --bs-warning-text-emphasis: #6B4B02;
  --bs-warning-bg-subtle:  #FDF0CE;
  --bs-warning-border-subtle: #F2CF7E;

  --bs-info:               var(--ajor-blue);
  --bs-info-rgb:           46, 155, 214;
  --bs-info-text-emphasis: #0E4A66;
  --bs-info-bg-subtle:     #D9EEF9;
  --bs-info-border-subtle: #9BD3EE;

  --bs-dark:               var(--ajor-navy);
  --bs-dark-rgb:           46, 42, 120;

  --bs-body-bg:            var(--ajor-bg);
  --bs-body-color:         var(--ajor-text);
  --bs-border-color:       var(--ajor-border);
  --bs-border-radius:      var(--ajor-radius-sm);
  --bs-border-radius-lg:   var(--ajor-radius);
  --bs-border-radius-sm:   .4rem;
  --bs-font-sans-serif:    var(--ajor-font);
}

body {
  font-family: var(--ajor-font);
  background: var(--ajor-bg);
  color: var(--ajor-text);
}

h1, h2, h3, h4, h5, h6 { letter-spacing: -.01em; }

/* ── Botones: un poco más redondeados + sombra sutil al primario ── */
.btn { border-radius: var(--ajor-radius-sm); font-weight: 500; }
.btn-primary {
  --bs-btn-bg: var(--ajor-orange);
  --bs-btn-border-color: var(--ajor-orange);
  --bs-btn-hover-bg: var(--ajor-orange-dark);
  --bs-btn-hover-border-color: var(--ajor-orange-dark);
  --bs-btn-active-bg: var(--ajor-orange-dark);
  --bs-btn-active-border-color: var(--ajor-orange-dark);
  box-shadow: 0 2px 8px rgba(240,120,0,.28);
}
.btn-outline-primary {
  --bs-btn-color: var(--ajor-orange);
  --bs-btn-border-color: var(--ajor-orange);
  --bs-btn-hover-bg: var(--ajor-orange);
  --bs-btn-hover-border-color: var(--ajor-orange);
}
.btn-sm.btn-outline-secondary,
.btn-sm.btn-outline-danger,
.btn-sm.btn-outline-primary { border-radius: .55rem; }

/* ── Topbar ── */
.ajor-topbar {
  position: sticky;
  top: 0;
  z-index: 1030;
  height: var(--ajor-topbar-height);
  background: linear-gradient(90deg, var(--ajor-navy-dark), var(--ajor-navy));
  color: #fff;
  padding: .5rem 1.1rem;
  box-shadow: var(--ajor-shadow-sm);
}
.ajor-topbar .ajor-brand { display: flex; align-items: center; gap: .6rem; }
.ajor-topbar .ajor-brand img { height: 32px; width: auto; display: block; }
.ajor-topbar .ajor-brand span { font-weight: 700; letter-spacing: .02em; }
.ajor-topbar .btn-outline-light:hover { background: var(--ajor-orange); border-color: var(--ajor-orange); }
.ajor-toggle-btn, .ajor-icon-btn, .ajor-user-btn { text-decoration: none; border: none; }
.ajor-toggle-btn:hover, .ajor-icon-btn:hover, .ajor-user-btn:hover { opacity: .85; }
.ajor-icon-btn { line-height: 1; }

/* Notificaciones */
.ajor-notif-dot {
  position: absolute; top: 2px; right: 2px;
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--ajor-yellow);
  box-shadow: 0 0 0 2px var(--ajor-navy);
}
.ajor-notif-menu { min-width: 270px; }

/* Avatar de usuario */
.ajor-avatar {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ajor-orange);
  color: #fff; font-weight: 700; font-size: .8rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.ajor-user-btn:hover .ajor-avatar { box-shadow: 0 0 0 2px rgba(255,255,255,.45); }

/* ── Sidebar ── */
.ajor-sidebar-backdrop { display: none; }

.ajor-sidebar {
  min-height: calc(100vh - var(--ajor-topbar-height));
  background: linear-gradient(180deg, var(--ajor-navy-dark), var(--ajor-navy) 65%);
  width: var(--ajor-sidebar-width);
  flex-shrink: 0;
  padding: .6rem .65rem 1.5rem;
}
.ajor-nav-label {
  text-transform: uppercase;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  color: rgba(255,255,255,.38);
  padding: .85rem .85rem .3rem;
}
.ajor-nav-label:first-child { padding-top: .35rem; }
.ajor-sidebar a {
  display: flex;
  align-items: center;
  gap: .65rem;
  color: rgba(255,255,255,.78);
  text-decoration: none;
  padding: .58rem .85rem;
  border-radius: var(--ajor-radius-sm);
  margin-bottom: .1rem;
  font-size: .93rem;
  transition: background .15s ease, color .15s ease;
}
.ajor-sidebar a i { width: 1.15em; text-align: center; font-size: 1rem; }
.ajor-sidebar a:hover { background: rgba(255,255,255,.08); color: #fff; }
.ajor-sidebar a.active {
  background: var(--ajor-orange);
  color: #fff;
  font-weight: 600;
  box-shadow: 0 4px 12px rgba(240,120,0,.35);
}

/* ── Contenido principal ── */
.ajor-main {
  padding: 1.85rem 2rem;
  min-width: 0;
  width: 100%;
}

/* ── Responsive: sidebar off-canvas por debajo de 992px ── */
@media (max-width: 991.98px) {
  .ajor-sidebar {
    position: fixed;
    top: 0;
    left: calc(var(--ajor-sidebar-width) * -1);
    height: 100vh;
    z-index: 1045;
    box-shadow: 0 0 40px rgba(0,0,0,.35);
    overflow-y: auto;
    transition: left .25s ease;
  }
  .ajor-sidebar.show { left: 0; }
  .ajor-sidebar-backdrop.show {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(18,16,45,.5);
    z-index: 1040;
  }
  .ajor-main { padding: 1.1rem .9rem; }
  .ajor-topbar { padding: .5rem .75rem; }
  .ajor-topbar .ajor-brand span { font-size: .92rem; }
}

@media (max-width: 575.98px) {
  .ajor-main { padding: .9rem .65rem; }
  h4 { font-size: 1.15rem; }
}

/* ── Cards ── */
.card {
  border: 1px solid var(--ajor-border);
  border-radius: var(--ajor-radius);
  box-shadow: var(--ajor-shadow);
}

/* ── Tablas / DataTables ── */
table.dataTable thead th {
  color: var(--ajor-navy);
  border-bottom: 2px solid var(--ajor-border) !important;
  font-weight: 600;
}
table.dataTable tbody tr:hover { background: #FDF5EA; }
.dataTables_wrapper { overflow-x: auto; }
.dataTables_wrapper .dt-buttons { flex-wrap: wrap; gap: .25rem; }
.dataTables_wrapper .dataTables_filter input { border-radius: var(--ajor-radius-sm); }

/* Badges con look más suave/pill */
.badge { font-weight: 600; letter-spacing: .01em; border-radius: .5rem; padding: .4em .65em; }

/* ── Alertas — bien distinguibles, con borde lateral de color sólido ── */
.alert {
  border: 1px solid transparent;
  border-left-width: 4px;
  border-radius: var(--ajor-radius-sm);
  font-weight: 500;
  padding: .85rem 1rem;
}
.alert-danger {
  color: var(--bs-danger-text-emphasis);
  background-color: var(--bs-danger-bg-subtle);
  border-color: var(--bs-danger-border-subtle);
  border-left-color: var(--ajor-red);
}
.alert-success {
  color: var(--bs-success-text-emphasis);
  background-color: var(--bs-success-bg-subtle);
  border-color: var(--bs-success-border-subtle);
  border-left-color: var(--ajor-green);
}
.alert-warning {
  color: var(--bs-warning-text-emphasis);
  background-color: var(--bs-warning-bg-subtle);
  border-color: var(--bs-warning-border-subtle);
  border-left-color: var(--ajor-yellow);
}
.alert-info {
  color: var(--bs-info-text-emphasis);
  background-color: var(--bs-info-bg-subtle);
  border-color: var(--bs-info-border-subtle);
  border-left-color: var(--ajor-blue);
}

/* ── Modales ── */
.modal-content { border: none; border-radius: var(--ajor-radius); overflow: hidden; }
.modal-header { background: var(--ajor-bg); border-bottom: 1px solid var(--ajor-border); }

/* ── Pestañas (nav-tabs) ── */
.nav-tabs .nav-link { color: var(--ajor-text-muted); border: none; border-bottom: 2px solid transparent; }
.nav-tabs .nav-link.active { color: var(--ajor-orange); border-bottom-color: var(--ajor-orange); background: transparent; }

/* ── Login ── */
.ajor-login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, var(--ajor-navy-dark), var(--ajor-navy) 55%, var(--ajor-orange-dark));
  font-family: var(--ajor-font);
  padding: 1.5rem;
}
.ajor-login-card {
  background: var(--ajor-surface);
  border-radius: var(--ajor-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.35);
  padding: 2.25rem 2rem;
  max-width: 380px;
  width: 100%;
}
.ajor-login-card img { max-width: 220px; margin: 0 auto 1rem; display: block; }