/* ELI Academy · Base: tipografía y elementos de Bootstrap con el estilo nuevo. */

html { font-size: 14px; height: 100%; }
@media (min-width: 768px) { html { font-size: 15px; } }
body { min-height: 100vh; }

.text-muted-sm { font-size: 0.75rem; color: var(--ui-subtle); }
.table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }
.btn-group-sm > .btn { font-size: 0.75rem; }

@media print {
  .eli-header, .eli-subnav, .eli-section-subnav, .pagination, nav[aria-label] { display: none !important; }
  .eli-content { margin: 0 !important; padding: 0 !important; }
  .eli-card { box-shadow: none !important; border: 1px solid #ddd !important; }
}

body {
  background: var(--ui-bg);
  color: var(--ui-text);
  font-family: var(--ui-font);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ui-accent); text-decoration: none; }
a:hover { color: var(--ui-accent-dark); }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  border-radius: 999px;
  font-weight: 600;
  padding: 0.5rem 1.15rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}

.btn-sm { padding: 0.3rem 0.8rem; font-size: 0.82rem; }
.btn-lg { padding: 0.7rem 1.5rem; }

.btn-primary {
  --bs-btn-bg: var(--ui-accent);
  --bs-btn-border-color: var(--ui-accent);
  --bs-btn-hover-bg: var(--ui-accent-dark);
  --bs-btn-hover-border-color: var(--ui-accent-dark);
  --bs-btn-active-bg: var(--ui-accent-dark);
  --bs-btn-active-border-color: var(--ui-accent-dark);
  --bs-btn-disabled-bg: var(--ui-accent);
  --bs-btn-disabled-border-color: var(--ui-accent);
  background-color: var(--ui-accent) !important;
  border-color: var(--ui-accent) !important;
  box-shadow: 0 4px 14px rgba(225, 7, 25, 0.22);
}

.btn-primary:hover, .btn-primary:focus-visible, .btn-primary:active {
  background-color: var(--ui-accent-dark) !important;
  border-color: var(--ui-accent-dark) !important;
}

.btn-outline-primary {
  --bs-btn-color: var(--ui-accent);
  --bs-btn-border-color: rgba(225, 7, 25, 0.35);
  --bs-btn-hover-bg: var(--ui-accent-soft);
  --bs-btn-hover-color: var(--ui-accent-dark);
  --bs-btn-hover-border-color: var(--ui-accent);
  --bs-btn-active-bg: var(--ui-accent-soft);
  --bs-btn-active-color: var(--ui-accent-dark);
  --bs-btn-active-border-color: var(--ui-accent);
  color: var(--ui-accent) !important;
  border-color: rgba(225, 7, 25, 0.35) !important;
  background: transparent !important;
}

.btn-outline-primary:hover, .btn-outline-primary:active {
  background: var(--ui-accent-soft) !important;
  border-color: var(--ui-accent) !important;
  color: var(--ui-accent-dark) !important;
}

.btn-outline-secondary, .btn-light {
  --bs-btn-color: var(--ui-text);
  --bs-btn-bg: var(--ui-surface);
  --bs-btn-border-color: var(--ui-border-strong);
  --bs-btn-hover-bg: var(--ui-bg);
  --bs-btn-hover-color: var(--ui-text);
  --bs-btn-hover-border-color: var(--ui-border-strong);
  --bs-btn-active-bg: var(--ui-bg);
  --bs-btn-active-color: var(--ui-text);
}

.btn:focus-visible { box-shadow: var(--ui-focus) !important; }

/* ── Formularios ─────────────────────────────────────────── */
.form-control, .form-select {
  border-radius: var(--ui-radius-sm);
  border-color: var(--ui-border-strong);
  padding: 0.55rem 0.85rem;
  font-size: 0.93rem;
}

.form-control-sm, .form-select-sm { padding: 0.3rem 0.65rem; font-size: 0.85rem; }

.form-control:focus, .form-select:focus {
  border-color: rgba(225, 7, 25, 0.5) !important;
  box-shadow: var(--ui-focus) !important;
}

.form-label { font-weight: 600; font-size: 0.85rem; color: var(--ui-text); margin-bottom: 0.3rem; }

.form-check-input:checked { background-color: var(--ui-accent) !important; border-color: var(--ui-accent) !important; }
.form-check-input:focus { box-shadow: var(--ui-focus); border-color: rgba(225, 7, 25, 0.5); }

/* ── Tablas ──────────────────────────────────────────────── */
.table { --bs-table-bg: transparent; --bs-table-hover-bg: var(--ui-surface-2); color: var(--ui-text); }

.table > thead > tr > th,
.table-light > tr > th,
.table > thead.table-light > tr > th {
  background: var(--ui-bg) !important;
  color: var(--ui-muted) !important;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  border-bottom: 1px solid var(--ui-border) !important;
  padding: 0.75rem 1rem;
  white-space: nowrap;
}

.table > tbody > tr > td { padding: 0.8rem 1rem; border-color: var(--ui-border); }
.table-sm > tbody > tr > td { padding: 0.55rem 1rem; }

/* ── Pestañas de Bootstrap ───────────────────────────────── */
.nav-tabs { border-bottom: 1px solid var(--ui-border); gap: 0.25rem; }

.nav-tabs .nav-link {
  border: 0 !important;
  border-bottom: 2px solid transparent !important;
  border-radius: 0;
  color: var(--ui-muted) !important;
  font-weight: 600;
  padding: 0.65rem 0.9rem;
  background: none !important;
}

.nav-tabs .nav-link:hover { color: var(--ui-text) !important; }
.nav-tabs .nav-link.active { color: var(--ui-accent) !important; border-bottom-color: var(--ui-accent) !important; }

.nav-pills .nav-link { border-radius: 999px; color: var(--ui-muted); font-weight: 600; }
.nav-pills .nav-link.active { background: var(--ui-text); color: #fff; }

/* ── Acordeones ──────────────────────────────────────────── */
.accordion {
  --bs-accordion-border-color: var(--ui-border);
  --bs-accordion-border-radius: var(--ui-radius-md);
  --bs-accordion-inner-border-radius: var(--ui-radius-md);
  --bs-accordion-btn-focus-box-shadow: var(--ui-focus);
  --bs-accordion-active-bg: var(--ui-surface-2);
  --bs-accordion-active-color: var(--ui-text);
}

.accordion-button { font-weight: 600; }

/* ── Paginación ──────────────────────────────────────────── */
.pagination { gap: 0.3rem; }

.page-link {
  border: 0 !important;
  border-radius: 999px !important;
  color: var(--ui-muted);
  font-weight: 600;
  min-width: 2.1rem;
  text-align: center;
}

.page-link:hover { background: var(--ui-bg); color: var(--ui-text); }
.page-item.active .page-link { background: var(--ui-text) !important; color: #fff !important; }
.page-item.disabled .page-link { background: transparent; color: var(--ui-subtle); }
.page-link:focus { box-shadow: var(--ui-focus); }

/* ── Alertas, modales, badges ────────────────────────────── */
.alert { border: 0; border-radius: var(--ui-radius-md); font-weight: 500; }
.alert-success { background: var(--ui-green-soft); color: #0b6b2b; }
.alert-danger { background: var(--ui-red-soft); color: #9b0512; }
.alert-warning { background: var(--ui-orange-soft); color: #8a5a00; }
.alert-info { background: var(--ui-blue-soft); color: #0b5582; }

.modal-content { border: 0; border-radius: 20px; box-shadow: var(--ui-shadow-lg); }
.modal-header, .modal-footer { border: 0; }
.modal-header { padding: 1.4rem 1.5rem 0.5rem; }
.modal-body { padding: 1rem 1.5rem; }
.modal-footer { padding: 0.5rem 1.5rem 1.4rem; }
.modal-title { font-weight: 700; }

.badge { border-radius: 999px; font-weight: 700; padding: 0.35em 0.7em; }
.bg-success { background-color: var(--ui-green) !important; }
.bg-primary { background-color: var(--ui-accent) !important; }

.dropdown-menu { border: 0; border-radius: var(--ui-radius-md); box-shadow: var(--ui-shadow-md); padding: 0.4rem; }
.dropdown-item { border-radius: var(--ui-radius-sm); padding: 0.45rem 0.75rem; }
.dropdown-item:active { background: var(--ui-accent-soft); color: var(--ui-accent-dark); }

/* ── Tarjetas de Bootstrap (.card) con el aspecto de .eli-card ── */
.card { background: var(--ui-surface); border: 0; border-radius: var(--ui-radius); box-shadow: var(--ui-shadow); overflow: hidden; }
.card.shadow-sm { box-shadow: var(--ui-shadow) !important; }
.card-header { background: var(--ui-surface) !important; color: var(--ui-text) !important; border-bottom: 1px solid var(--ui-border); padding: 1rem 1.5rem; font-weight: 700; }
.card-header.bg-primary { color: var(--ui-text) !important; }
.card-body { padding: 1.5rem; }
.card-footer { background: var(--ui-surface-2); border-top: 1px solid var(--ui-border); padding: 1rem 1.5rem; }
.card-title { font-size: 1.05rem; font-weight: 700; }

/* ── Badges de Bootstrap con el aspecto de <eli-badge> (fondo suave + texto de color) ── */
.badge { font-size: 0.74rem; padding: 0.3em 0.7em; }
.badge.bg-success, .badge.text-bg-success { background: var(--ui-green-soft) !important; color: #0b6b2b !important; }
.badge.bg-danger, .badge.text-bg-danger { background: var(--ui-red-soft) !important; color: var(--ui-red-dark) !important; }
.badge.bg-warning, .badge.text-bg-warning { background: var(--ui-orange-soft) !important; color: #8a5a00 !important; }
.badge.bg-info, .badge.text-bg-info, .badge.bg-primary, .badge.text-bg-primary { background: var(--ui-blue-soft) !important; color: #0b5582 !important; }
.badge.bg-secondary, .badge.text-bg-secondary, .badge.bg-light, .badge.text-bg-light, .badge.bg-dark, .badge.text-bg-dark { background: var(--ui-bg) !important; color: var(--ui-muted) !important; border: 0 !important; }

/* Tablas antiguas dentro de tarjetas: mismo marco que .eli-table-wrap */
.eli-card .table-responsive, .card-body .table-responsive { border: 1px solid var(--ui-border); border-radius: var(--ui-radius-md); }
.eli-card .table-responsive > .table, .card-body .table-responsive > .table { margin-bottom: 0; }
.eli-card .table-responsive > .table > tbody > tr:last-child > td { border-bottom: 0; }