/* ============================================================
   components-rabi.css — Componentes del nuevo design system
   ------------------------------------------------------------
   Convencion de namespace: TODAS las clases tienen sufijo -rabi
   o son hijas de un componente -rabi (.tabs-rabi .tab por ejemplo).
   No sobrescribe NINGUNA clase de Bootstrap 5 ni de los CSS legados
   (app.css, components.css legacy, panels.css, sidebar.css,
   landing.css, styles.css). Solo aplica donde se usen explicitamente
   las clases -rabi.

   Este archivo NO contiene reset tipografico global. El reset
   (body, h1-h6, p) se aplica en la Fase 11 al consolidar todo.

   Migracion: Fase 2 de 11. Fuente: Claude Design 2026-04-24.
   ============================================================ */

/* ============================================================
   TYPOGRAFIA — utilidades opcionales (sin tocar h1-h6 globales)
   Estas clases solo aplican cuando el .razor las invoca.
   ============================================================ */
.t-h1-rabi { font-size: var(--fs-h1); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); }
.t-h2-rabi { font-size: var(--fs-h2); line-height: var(--lh-tight); letter-spacing: var(--ls-tight); font-weight: var(--fw-semibold); margin: 0 0 var(--sp-4); }
.t-h3-rabi { font-size: var(--fs-h3); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }
.t-h4-rabi { font-size: var(--fs-h4); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  font-weight: var(--fw-semibold); margin: 0 0 var(--sp-3); }
.t-h5-rabi { font-size: var(--fs-h5); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }
.t-h6-rabi { font-size: var(--fs-h6); line-height: var(--lh-snug);  letter-spacing: var(--ls-snug);  font-weight: var(--fw-semibold); margin: 0 0 var(--sp-2); }

.t-body-rabi    { font-size: var(--fs-body); line-height: var(--lh-normal); color: var(--color-text); }
.t-body-sm-rabi { font-size: var(--fs-body-sm); line-height: var(--lh-normal); }
.t-small-rabi   { font-size: var(--fs-small); }
.t-caption-rabi { font-size: var(--fs-caption); line-height: var(--lh-normal); color: var(--color-text-muted); }
.t-label-up-rabi {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}
.t-muted-rabi     { color: var(--color-text-muted); }
.t-secondary-rabi { color: var(--color-text-secondary); }

a.link-rabi { color: var(--color-primary); text-decoration: none; transition: color var(--t-fast); }
a.link-rabi:hover { color: var(--color-primary-hover); text-decoration: underline; text-underline-offset: 3px; }

/* ============================================================
   BUTTONS — .btn-rabi + modificadores .is-*
   ============================================================ */
.btn-rabi {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  height: var(--ctrl-h);
  padding: 0 var(--sp-5);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  background: transparent;
  color: var(--color-text-secondary);
  transition: background var(--t-fast), border-color var(--t-fast),
              color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast);
}
.btn-rabi:focus-visible { outline: none; box-shadow: var(--ring-primary); }
.btn-rabi.is-sm  { height: var(--ctrl-h-sm); padding: 0 var(--sp-4); font-size: var(--fs-caption); }
.btn-rabi.is-lg  { height: var(--ctrl-h-lg); padding: 0 var(--sp-6); font-size: var(--fs-body); }
.btn-rabi.is-pill { border-radius: var(--r-pill); }
.btn-rabi.is-block { width: 100%; }
.btn-rabi.is-icon { width: var(--ctrl-h); padding: 0; }
.btn-rabi.is-icon.is-sm { width: var(--ctrl-h-sm); }
.btn-rabi.is-icon.is-lg { width: var(--ctrl-h-lg); }
.btn-rabi .bi { font-size: 1.05em; line-height: 0; }

.btn-rabi.is-primary {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  border-color: var(--color-primary);
}
.btn-rabi.is-primary:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.btn-rabi.is-primary:active { background: var(--color-primary-active); border-color: var(--color-primary-active); }

.btn-rabi.is-accent {
  background: var(--color-accent);
  color: var(--color-text-on-accent);
  border-color: var(--color-accent);
}
.btn-rabi.is-accent:hover { background: var(--color-accent-hover); border-color: var(--color-accent-hover); }
.btn-rabi.is-accent:active { background: var(--color-accent-active); border-color: var(--color-accent-active); }
.btn-rabi.is-accent:focus-visible { box-shadow: var(--sh-focus-accent); }

.btn-rabi.is-secondary {
  background: transparent;
  color: var(--color-primary);
  border-color: var(--color-primary);
}
.btn-rabi.is-secondary:hover { background: var(--color-primary-50); }
.btn-rabi.is-secondary:active { background: var(--color-primary-100); }

.btn-rabi.is-ghost {
  background: transparent;
  color: var(--color-text-secondary);
  border-color: transparent;
}
.btn-rabi.is-ghost:hover { background: rgba(0,0,0,0.04); color: var(--color-text); }
.btn-rabi.is-ghost:active { background: rgba(0,0,0,0.07); }

.btn-rabi.is-danger {
  background: var(--color-error);
  color: #fff;
  border-color: var(--color-error);
}
.btn-rabi.is-danger:hover { background: #C42D3C; border-color: #C42D3C; }
.btn-rabi.is-danger:focus-visible { box-shadow: var(--sh-focus-error); }

.btn-rabi:disabled,
.btn-rabi[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.btn-rabi.is-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn-rabi.is-loading::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  color: var(--color-text-inverse);
  animation: spin-rabi .7s linear infinite;
}
.btn-rabi.is-secondary.is-loading::after,
.btn-rabi.is-ghost.is-loading::after { color: var(--color-primary); }

@keyframes spin-rabi { to { transform: rotate(360deg); } }

/* ============================================================
   FORM CONTROLS — .input-rabi / .select-rabi / .label-rabi
   ============================================================ */
.label-rabi {
  display: block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  margin-bottom: var(--sp-2);
  letter-spacing: 0;
}
.label-rabi.is-required::after { content: " *"; color: var(--color-error); }

.input-rabi,
.select-rabi {
  display: block;
  width: 100%;
  height: var(--ctrl-h);
  padding: 0 var(--sp-4);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast), background var(--t-fast);
  -webkit-appearance: none; appearance: none;
}
textarea.input-rabi {
  height: auto;
  min-height: calc(var(--ctrl-h) * 2);
  padding: var(--sp-3) var(--sp-4);
  line-height: var(--lh-normal);
  resize: vertical;
}
.input-rabi::placeholder { color: var(--color-text-muted); }
.input-rabi:hover, .select-rabi:hover { border-color: var(--color-border-strong); }
.input-rabi:focus,
.select-rabi:focus {
  outline: none;
  border-color: var(--color-primary-bright);
  background: var(--color-surface);
  box-shadow: var(--sh-focus);
}
.input-rabi:disabled,
.select-rabi:disabled {
  background: var(--color-bg-lighter);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

.input-rabi.is-valid,
.select-rabi.is-valid {
  border-color: var(--color-success);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%2326b050'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 1.06 1.06l-8.485 8.485a.75.75 0 0 1-1.06 0L1.464 7.95a.75.75 0 1 1 1.06-1.06l3.005 3.005 7.956-7.965Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  padding-right: calc(var(--sp-4) * 2 + 16px);
}
.input-rabi.is-invalid,
.select-rabi.is-invalid {
  border-color: var(--color-error);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23dc3545'%3E%3Cpath d='M8 0a8 8 0 1 1 0 16A8 8 0 0 1 8 0Zm.93 4.412a.93.93 0 0 0-1.86 0V8.81a.93.93 0 0 0 1.86 0V4.412ZM8 12.5a1.05 1.05 0 1 0 0-2.1 1.05 1.05 0 0 0 0 2.1Z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 16px;
  padding-right: calc(var(--sp-4) * 2 + 16px);
}
.input-rabi.is-invalid:focus,
.select-rabi.is-invalid:focus { box-shadow: var(--sh-focus-error); }

.help-rabi {
  display: block;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--sp-2);
}
.error-rabi {
  display: flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--color-error);
  margin-top: var(--sp-2);
}

.select-rabi {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%23495057' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--sp-4) center;
  background-size: 12px 8px;
  padding-right: calc(var(--sp-5) + 12px);
}

.input-group-rabi {
  display: flex;
  align-items: stretch;
  position: relative;
}
.input-group-rabi .input-icon {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
  font-size: 1rem;
}
.input-group-rabi .input-rabi { padding-left: calc(var(--sp-4) + 24px); }

.check-rabi {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--ctrl-h-sm);
}
.check-rabi input[type="checkbox"],
.check-rabi input[type="radio"] {
  appearance: none;
  width: 18px; height: 18px;
  border: 1.5px solid var(--color-border-strong);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--t-fast), background var(--t-fast);
}
.check-rabi input[type="checkbox"] { border-radius: 4px; }
.check-rabi input[type="radio"]    { border-radius: 50%; }
.check-rabi input[type="checkbox"]:checked,
.check-rabi input[type="radio"]:checked { background: var(--color-primary); border-color: var(--color-primary); }
.check-rabi input[type="checkbox"]:checked {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23fff'%3E%3Cpath d='M13.485 1.929a.75.75 0 0 1 1.06 1.06l-8.485 8.485a.75.75 0 0 1-1.06 0L1.464 7.95a.75.75 0 1 1 1.06-1.06l3.005 3.005 7.956-7.965Z'/%3E%3C/svg%3E");
  background-size: 14px; background-position: center; background-repeat: no-repeat;
}
.check-rabi input[type="radio"]:checked { box-shadow: inset 0 0 0 4px #fff; }
.check-rabi input:focus-visible { outline: none; box-shadow: var(--sh-focus); }
.check-rabi label { font-size: var(--fs-body); color: var(--color-text); cursor: pointer; }

.switch-rabi {
  position: relative;
  width: 36px; height: 20px;
  background: var(--color-border-strong);
  border-radius: var(--r-pill);
  transition: background var(--t-fast);
  cursor: pointer; flex-shrink: 0;
  border: none; padding: 0;
}
.switch-rabi::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 16px; height: 16px;
  background: #fff; border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform var(--t-fast);
}
.switch-rabi[data-on="true"] { background: var(--color-success); }
.switch-rabi[data-on="true"]::after { transform: translateX(16px); }

/* ============================================================
   CARDS
   ============================================================ */
.card-rabi {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
}
.card-rabi.is-interactive { cursor: pointer; }
.card-rabi.is-interactive:hover { box-shadow: var(--sh-card-hover); transform: translateY(-1px); }
.card-rabi-header {
  padding: var(--card-pad);
  border-bottom: 1px solid var(--color-divider);
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
}
.card-rabi-title { font-size: var(--fs-h5); font-weight: var(--fw-semibold); margin: 0; color: var(--color-text); }
.card-rabi-body { padding: var(--card-pad); }
.card-rabi-footer {
  padding: var(--sp-4) var(--card-pad);
  border-top: 1px solid var(--color-divider);
  background: var(--color-bg-lighter);
  border-radius: 0 0 var(--r-xl) var(--r-xl);
}
.card-stat-rabi {
  padding: var(--card-pad);
  display: flex; flex-direction: column; gap: var(--sp-2);
}
.card-stat-rabi-label { font-size: var(--fs-caption); font-weight: var(--fw-semibold); letter-spacing: var(--ls-wide); text-transform: uppercase; color: var(--color-text-muted); }
.card-stat-rabi-value { font-size: 2rem; font-weight: var(--fw-bold); color: var(--color-text); line-height: 1.1; letter-spacing: var(--ls-tight); }
.card-stat-rabi-trend { font-size: var(--fs-small); display: inline-flex; align-items: center; gap: 4px; }
.card-stat-rabi-trend.is-up   { color: var(--color-success); }
.card-stat-rabi-trend.is-down { color: var(--color-error); }

/* ============================================================
   BADGES
   ============================================================ */
.badge-rabi {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px var(--sp-3);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  border-radius: var(--r-pill);
  white-space: nowrap;
}
.badge-rabi.is-square { border-radius: var(--r-sm); }
.badge-rabi.is-primary { background: var(--color-primary-50); color: var(--color-primary); }
.badge-rabi.is-accent  { background: var(--color-accent-50); color: var(--color-accent-active); }
.badge-rabi.is-success { background: var(--color-success-bg); color: #1a7d39; }
.badge-rabi.is-error   { background: var(--color-error-bg); color: #a8202d; }
.badge-rabi.is-warning { background: var(--color-warning-bg); color: #8a6500; }
.badge-rabi.is-info    { background: var(--color-info-bg); color: #066f86; }
.badge-rabi.is-muted   { background: var(--color-bg-light); color: var(--color-text-secondary); }
.badge-rabi.has-dot::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}

/* ============================================================
   ALERTS
   ============================================================ */
.alert-rabi {
  display: flex; align-items: flex-start; gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--r-lg);
  border: 1px solid;
  font-size: var(--fs-body-sm);
  color: var(--color-text);
}
.alert-rabi .alert-rabi-icon { font-size: 1.25rem; flex-shrink: 0; line-height: 1.4; }
.alert-rabi .alert-rabi-title { font-weight: var(--fw-semibold); margin: 0 0 2px; font-size: var(--fs-body); }
.alert-rabi.is-info    { background: var(--color-info-bg);    border-color: #B6E9F7; }
.alert-rabi.is-info    .alert-rabi-icon { color: #066f86; }
.alert-rabi.is-success { background: var(--color-success-bg); border-color: #B5E1C2; }
.alert-rabi.is-success .alert-rabi-icon { color: #1a7d39; }
.alert-rabi.is-warning { background: var(--color-warning-bg); border-color: #FCE39A; }
.alert-rabi.is-warning .alert-rabi-icon { color: #8a6500; }
.alert-rabi.is-error   { background: var(--color-error-bg);   border-color: #F4C0C5; }
.alert-rabi.is-error   .alert-rabi-icon { color: #a8202d; }

/* ============================================================
   TOAST
   ============================================================ */
.toast-rabi {
  display: flex; align-items: center; gap: var(--sp-3);
  min-width: 320px; max-width: 420px;
  padding: var(--sp-4) var(--sp-5);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-primary);
  border-radius: var(--r-md);
  box-shadow: var(--sh-popover);
  font-size: var(--fs-body-sm);
}
.toast-rabi.is-success { border-left-color: var(--color-success); }
.toast-rabi.is-error   { border-left-color: var(--color-error); }
.toast-rabi.is-warning { border-left-color: var(--color-warning); }
.toast-rabi .toast-rabi-icon { font-size: 1.25rem; flex-shrink: 0; }
.toast-rabi .toast-rabi-icon.is-success { color: var(--color-success); }
.toast-rabi .toast-rabi-icon.is-error   { color: var(--color-error); }
.toast-rabi .toast-rabi-icon.is-warning { color: var(--color-warning); }
.toast-rabi .toast-rabi-icon.is-info    { color: var(--color-info); }
.toast-rabi .toast-rabi-body { flex: 1; min-width: 0; }
.toast-rabi .toast-rabi-title { font-weight: var(--fw-semibold); }
.toast-rabi .toast-rabi-msg   { color: var(--color-text-secondary); margin-top: 2px; }
.toast-rabi .toast-rabi-close {
  background: none; border: none; cursor: pointer;
  color: var(--color-text-muted); padding: 4px; border-radius: 4px;
}
.toast-rabi .toast-rabi-close:hover { background: rgba(0,0,0,0.05); color: var(--color-text); }

/* ============================================================
   MODAL — variante oscura por defecto (sello de marca)
   ============================================================ */
.modal-rabi {
  background: var(--color-modal-bg);
  color: var(--color-modal-text);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-modal);
  border: 1px solid var(--color-modal-border);
  overflow: hidden;
  width: 100%;
  max-width: 520px;
}
.modal-rabi-header {
  display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
}
.modal-rabi-title {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-modal-text);
  margin: 0;
}
.modal-rabi-subtitle {
  font-size: var(--fs-small);
  color: var(--color-modal-label);
  margin-top: 4px;
}
.modal-rabi-close {
  background: transparent; border: none; cursor: pointer;
  width: 32px; height: 32px; border-radius: var(--r-sm);
  color: rgba(255,255,255,0.7);
  display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.modal-rabi-close:hover { background: rgba(255,255,255,0.08); color: #fff; }
.modal-rabi-body { padding: var(--sp-3) var(--sp-5) var(--sp-5); font-size: var(--fs-body-sm); color: rgba(255,255,255,0.85); }
.modal-rabi-body .label-rabi { color: var(--color-modal-label); }
.modal-rabi-body .input-rabi,
.modal-rabi-body .select-rabi {
  background: rgba(255,255,255,0.06);
  border-color: var(--color-modal-border);
  color: #fff;
}
.modal-rabi-body .input-rabi::placeholder { color: rgba(255,255,255,0.4); }
.modal-rabi-body .input-rabi:focus,
.modal-rabi-body .select-rabi:focus {
  background: rgba(255,255,255,0.10);
  border-color: var(--color-primary-bright);
  box-shadow: var(--sh-focus);
}
.modal-rabi-footer {
  padding: var(--sp-4) var(--sp-5);
  background: rgba(255,255,255,0.03);
  border-top: 1px solid var(--color-modal-border);
  display: flex; justify-content: flex-end; gap: var(--sp-3);
}
.modal-rabi-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,12,28,0.65);
  backdrop-filter: blur(4px);
  z-index: var(--z-modal);
}

.modal-rabi.is-light {
  background: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}
.modal-rabi.is-light .modal-rabi-title { color: var(--color-text); }
.modal-rabi.is-light .modal-rabi-subtitle { color: var(--color-text-muted); }
.modal-rabi.is-light .modal-rabi-close { color: var(--color-text-muted); }
.modal-rabi.is-light .modal-rabi-close:hover { background: var(--color-bg-light); color: var(--color-text); }
.modal-rabi.is-light .modal-rabi-body { color: var(--color-text); }
.modal-rabi.is-light .modal-rabi-body .label-rabi { color: var(--color-text-secondary); }
.modal-rabi.is-light .modal-rabi-body .input-rabi { background: #fff; border-color: var(--color-border); color: var(--color-text); }
.modal-rabi.is-light .modal-rabi-footer { background: var(--color-bg-lighter); border-color: var(--color-divider); }

/* ============================================================
   TABLE
   ============================================================ */
.table-rabi {
  width: 100%;
  background: var(--color-surface);
  border-radius: var(--r-lg);
  border: 1px solid var(--color-border);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  font-size: var(--fs-body-sm);
}
.table-rabi thead th {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  background: var(--color-bg-lighter);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.table-rabi thead th.is-sortable { cursor: pointer; user-select: none; }
.table-rabi thead th.is-sortable:hover { color: var(--color-text); }
.table-rabi thead th .sort-ico { opacity: 0.5; margin-left: 4px; font-size: 0.85em; }
.table-rabi thead th.is-sorted .sort-ico { opacity: 1; color: var(--color-primary); }
.table-rabi tbody td {
  padding: var(--sp-3) var(--sp-4);
  height: var(--row-h);
  border-bottom: 1px solid var(--color-divider);
  color: var(--color-text);
  vertical-align: middle;
}
.table-rabi tbody tr:last-child td { border-bottom: none; }
.table-rabi tbody tr:hover { background: var(--color-bg-lighter); }
.table-rabi .col-actions { text-align: right; white-space: nowrap; }

.table-pagination-rabi {
  display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  font-size: var(--fs-small);
  color: var(--color-text-muted);
}
.table-pagination-rabi .pager { display: flex; gap: 4px; align-items: center; }
.table-pagination-rabi .pager button {
  width: 32px; height: 32px;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  border-radius: var(--r-sm);
  color: var(--color-text-secondary);
  font-size: var(--fs-small); font-weight: var(--fw-medium);
  cursor: pointer; transition: all var(--t-fast);
}
.table-pagination-rabi .pager button:hover:not(:disabled) { border-color: var(--color-primary); color: var(--color-primary); }
.table-pagination-rabi .pager button[aria-current="page"] {
  background: var(--color-primary); border-color: var(--color-primary); color: #fff;
}
.table-pagination-rabi .pager button:disabled { opacity: 0.4; cursor: not-allowed; }

/* ============================================================
   TABS
   ============================================================ */
.tabs-rabi {
  display: flex; gap: var(--sp-1);
  border-bottom: 1px solid var(--color-border);
}
.tabs-rabi .tab-rabi {
  position: relative;
  padding: var(--sp-3) var(--sp-4);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text-muted);
  background: transparent;
  border: none;
  cursor: pointer;
  transition: color var(--t-fast);
}
.tabs-rabi .tab-rabi::after {
  content: ""; position: absolute; left: var(--sp-3); right: var(--sp-3); bottom: -1px;
  height: 2px; background: transparent; border-radius: 2px 2px 0 0;
  transition: background var(--t-fast);
}
.tabs-rabi .tab-rabi:hover { color: var(--color-text); }
.tabs-rabi .tab-rabi.is-active { color: var(--color-primary); font-weight: var(--fw-semibold); }
.tabs-rabi .tab-rabi.is-active::after { background: var(--color-primary); }
.tabs-rabi .tab-rabi .tab-rabi-count {
  display: inline-flex; align-items: center; justify-content: center;
  margin-left: var(--sp-2);
  min-width: 20px; height: 18px; padding: 0 6px;
  font-size: 11px; font-weight: var(--fw-semibold);
  background: var(--color-bg-light); color: var(--color-text-secondary);
  border-radius: var(--r-pill);
}
.tabs-rabi .tab-rabi.is-active .tab-rabi-count { background: var(--color-primary-50); color: var(--color-primary); }

/* ============================================================
   TOOLTIP
   ============================================================ */
.tooltip-rabi {
  position: absolute;
  padding: 6px 10px;
  background: var(--color-modal-bg);
  color: #fff;
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  border-radius: var(--r-sm);
  white-space: nowrap;
  box-shadow: var(--sh-popover);
  pointer-events: none;
  z-index: var(--z-tooltip);
}
.tooltip-rabi::after {
  content: ""; position: absolute;
  border: 5px solid transparent;
}
.tooltip-rabi.is-top    { bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); }
.tooltip-rabi.is-top::after    { top: 100%; left: 50%; transform: translateX(-50%); border-top-color: var(--color-modal-bg); }

/* ============================================================
   AVATAR
   ============================================================ */
.avatar-rabi {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px;
  border-radius: var(--r-pill);
  background: var(--color-primary-100);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  font-size: var(--fs-small);
  flex-shrink: 0;
  overflow: hidden;
  text-transform: uppercase;
  position: relative;
}
.avatar-rabi.is-sm { width: 28px; height: 28px; font-size: var(--fs-caption); }
.avatar-rabi.is-lg { width: 56px; height: 56px; font-size: var(--fs-h5); }
.avatar-rabi.is-xl { width: 80px; height: 80px; font-size: var(--fs-h3); }
.avatar-rabi.is-accent  { background: var(--color-accent-50);  color: var(--color-accent-active); }
.avatar-rabi.is-success { background: var(--color-success-bg); color: #1a7d39; }
.avatar-rabi.is-muted   { background: var(--color-bg-light);   color: var(--color-text-secondary); }
.avatar-rabi img { width: 100%; height: 100%; object-fit: cover; }
.avatar-rabi .status-dot-rabi {
  position: absolute; bottom: 0; right: 0;
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--color-success);
  border: 2px solid #fff;
}
.avatar-stack-rabi { display: inline-flex; }
.avatar-stack-rabi .avatar-rabi { margin-left: -8px; box-shadow: 0 0 0 2px #fff; }
.avatar-stack-rabi .avatar-rabi:first-child { margin-left: 0; }

/* ============================================================
   STATES — skeleton, empty, error
   ============================================================ */
.skeleton-rabi {
  display: block;
  background: linear-gradient(90deg, #ECEFF3 0%, #F5F7FA 50%, #ECEFF3 100%);
  background-size: 200% 100%;
  animation: shimmer-rabi 1.4s linear infinite;
  border-radius: var(--r-sm);
}
.skeleton-rabi.is-line   { height: 12px; margin-bottom: var(--sp-2); }
.skeleton-rabi.is-line.is-lg { height: 18px; }
.skeleton-rabi.is-circle { border-radius: 50%; }
.skeleton-rabi.is-block  { height: 120px; border-radius: var(--r-md); }
@keyframes shimmer-rabi {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.empty-state-rabi {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center;
  padding: var(--sp-7) var(--sp-5);
  gap: var(--sp-4);
}
.empty-state-rabi-illu {
  width: 120px; height: 120px;
  border-radius: 50%;
  background: var(--color-primary-50);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-size: 3rem;
}
.empty-state-rabi-title { font-size: var(--fs-h5); font-weight: var(--fw-semibold); margin: 0; }
.empty-state-rabi-desc  { font-size: var(--fs-body-sm); color: var(--color-text-muted); max-width: 360px; margin: 0; line-height: var(--lh-normal); }
.empty-state-rabi-actions { display: flex; gap: var(--sp-3); margin-top: var(--sp-2); }

.empty-state-rabi.is-error .empty-state-rabi-illu {
  background: var(--color-error-bg);
  color: var(--color-error);
}

/* ============================================================
   SIDEBAR (privado)
   ============================================================ */
.sidebar-rabi {
  width: var(--sidebar-w);
  background: linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
  color: #fff;
  display: flex; flex-direction: column;
  height: 100%;
  font-size: var(--fs-body-sm);
}
.sidebar-rabi-brand {
  position: relative;
  padding: var(--sp-6) var(--sp-4) var(--sp-5);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  border-bottom: 1px solid rgba(255,255,255,0.12);
}
.sidebar-rabi-brand-mark {
  width: 36px; height: 36px;
  border-radius: var(--r-md);
  background: #fff;
  display: flex; align-items: center; justify-content: center;
  color: var(--color-primary);
  font-weight: var(--fw-bold); font-size: 1.1rem;
  flex-shrink: 0;
}
.sidebar-rabi-brand-name {
  font-weight: var(--fw-semibold); font-size: var(--fs-h5);
  letter-spacing: var(--ls-snug);
}
.sidebar-rabi-brand-role { font-size: var(--fs-caption); color: rgba(255,255,255,0.75); margin-top: 1px; }

.sidebar-rabi-section {
  padding: var(--sp-4) var(--sp-3) var(--sp-2);
  font-size: 11px; font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide); text-transform: uppercase;
  color: rgba(255,255,255,0.65);
}
.sidebar-rabi-nav {
  flex: 1; overflow-y: auto;
  padding: var(--sp-2) var(--sp-3);
  display: flex; flex-direction: column; gap: 2px;
}
.sidebar-rabi-link {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-2) var(--sp-3);
  color: rgba(255,255,255,0.92);
  border-radius: var(--r-md);
  font-weight: var(--fw-medium);
  font-size: var(--fs-body-sm);
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
  position: relative;
  min-height: 40px;
}
.sidebar-rabi-link .bi { font-size: 1.05rem; width: 20px; text-align: center; flex-shrink: 0; }
.sidebar-rabi-link:hover { background: rgba(255,255,255,0.10); color: #fff; text-decoration: none; }
.sidebar-rabi-link.is-active {
  background: #fff;
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  box-shadow: 0 1px 2px rgba(0,0,0,0.08);
}
.sidebar-rabi-link.is-active::before {
  content: ""; position: absolute; left: -12px; top: 8px; bottom: 8px;
  width: 3px; background: var(--color-accent); border-radius: 0 3px 3px 0;
}
.sidebar-rabi-link .badge-rabi { margin-left: auto; }
.sidebar-rabi-footer {
  padding: var(--sp-3) var(--sp-4);
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; gap: var(--sp-3);
}
.sidebar-rabi-footer .avatar-rabi { background: rgba(255,255,255,0.18); color: #fff; }
.sidebar-rabi-footer .user-info { flex: 1; min-width: 0; }
.sidebar-rabi-footer .user-name { font-weight: var(--fw-semibold); font-size: var(--fs-body-sm); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-rabi-footer .user-meta { font-size: var(--fs-caption); color: rgba(255,255,255,0.7); }
.sidebar-rabi-footer .icon-btn-rabi {
  background: transparent; border: none; color: rgba(255,255,255,0.7);
  width: 32px; height: 32px; border-radius: var(--r-sm); cursor: pointer;
}
.sidebar-rabi-footer .icon-btn-rabi:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ============================================================
   PUBLIC NAVBAR — fixed top (siempre visible), contenido centrado
   ============================================================ */
/* Compensa altura del navbar fixed cuando se navega via #anclas (#inicio, #nosotros, etc.) */
html { scroll-padding-top: var(--topbar-h); scroll-behavior: smooth; }

.navbar-rabi {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-topbar);
  display: flex; align-items: center; justify-content: center;
  gap: var(--sp-5);
  padding: 0 var(--sp-6);
  height: var(--topbar-h);
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}
@media (max-width: 991.98px) {
  .navbar-rabi {
    justify-content: space-between;
    gap: var(--sp-3);
    padding: 0 var(--sp-4);
  }
}

/* Logo del navbar — solo imagen, sin texto */
.navbar-rabi-logo {
  width: 50px;
  height: 50px;
  object-fit: contain;
  background: transparent;
  display: block;
}

/* Compensación de altura para wrappers que contengan PublicNavbar fixed */
.landing-rabi,
.blog-rabi-page,
.login-rabi-wrap {
  padding-top: var(--topbar-h);
}
.login-rabi-wrap { min-height: calc(100vh - var(--topbar-h)); }

/* Botones de accion del navbar sobre fondo oscuro */
.navbar-rabi.is-transparent .btn-rabi.is-ghost {
  color: var(--color-text-on-dark);
  border-color: var(--color-border-on-dark-strong);
}
.navbar-rabi.is-transparent .btn-rabi.is-ghost:hover {
  background: var(--color-surface-on-dark-hover);
  color: var(--color-text-on-dark);
}

/* Menu movil pegado al navbar fixed */
.navbar-rabi-mobile {
  position: fixed;
  top: var(--topbar-h); left: 0; right: 0;
  z-index: calc(var(--z-topbar) - 1);
  max-height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}
.navbar-rabi-brand { display: flex; align-items: center; gap: var(--sp-3); font-weight: var(--fw-semibold); font-size: var(--fs-h5); color: var(--color-primary); }
.navbar-rabi-brand .brand-mark {
  width: 36px; height: 36px; border-radius: var(--r-md);
  background: var(--color-primary); color: var(--color-text-on-primary);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--fw-bold);
}
.navbar-rabi-links { display: flex; gap: var(--sp-2); align-items: center; }
.navbar-rabi-links a {
  display: inline-flex;
  align-items: center;
  height: var(--ctrl-h);
  padding: 0 var(--sp-3);
  color: var(--color-text-secondary);
  font-weight: var(--fw-medium);
  font-size: var(--fs-small);
  border-radius: var(--r-sm);
  text-decoration: none;
}
.navbar-rabi-links a:hover { background: var(--color-bg-lighter); color: var(--color-text); text-decoration: none; }
.navbar-rabi-links a.is-active { color: var(--color-primary); }
.navbar-rabi-actions { display: flex; gap: var(--sp-2); align-items: center; }

/* ============================================================
   FOOTERS
   ============================================================ */
/* ============================================================
   FOOTER PUBLICO — rediseñado al nivel del landing
   - Fondo: gradiente sutil sobre --color-primary (continuidad con navbar)
   - Acento decorativo arriba (border accent) + radial gradient para profundidad
   - 4 columnas: Brand / Enlaces / Programas / Contacto
   - Cero hardcoded colors (todo via tokens)
   ============================================================ */
.footer-public-rabi {
  position: relative;
  background:
    radial-gradient(circle at 15% 0%, rgba(255, 255, 255, 0.06) 0%, transparent 45%),
    radial-gradient(circle at 85% 100%, rgba(255, 255, 255, 0.04) 0%, transparent 50%),
    linear-gradient(180deg, var(--color-primary) 0%, var(--color-primary) 65%, color-mix(in srgb, var(--color-primary) 90%, #000) 100%);
  color: var(--color-text-on-dark-soft);
  padding: var(--sp-8) var(--sp-6) var(--sp-5);
  font-size: var(--fs-body-sm);
  overflow: hidden;
}
/* Acento decorativo: barra de color en el borde superior */
.footer-public-rabi::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--color-primary-bright) 0%,
    var(--color-accent) 50%,
    var(--color-primary-bright) 100%);
  opacity: 0.85;
}

.footer-public-rabi-inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.3fr;
  gap: var(--sp-7);
  max-width: var(--container-max);
  margin: 0 auto;
  position: relative;
  z-index: 1;
}
@media (max-width: 992px) {
  .footer-public-rabi-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-6);
  }
  .footer-public-rabi-brand {
    grid-column: 1 / -1;
  }
}
@media (max-width: 576px) {
  .footer-public-rabi-inner {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
  .footer-public-rabi { padding: var(--sp-7) var(--sp-5) var(--sp-4); }
}

/* ===== BRAND ===== */
.footer-public-rabi-brand {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.footer-public-rabi-logo-row {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
}
.footer-public-rabi-logo {
  width: 52px;
  height: 52px;
  object-fit: contain;
  background: var(--color-text-on-dark);
  border-radius: var(--radius-md);
  padding: 4px;
  box-shadow: var(--sh-card);
}
.footer-public-rabi-brand-name {
  color: var(--color-text-on-dark);
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  line-height: 1;
  letter-spacing: 0.02em;
}
.footer-public-rabi-brand-tag {
  color: var(--color-text-on-dark-soft);
  font-size: var(--fs-caption);
  margin-top: 4px;
  letter-spacing: 0.02em;
}
.footer-public-rabi-desc {
  color: var(--color-text-on-dark-soft);
  line-height: var(--lh-relaxed);
  margin: 0;
  max-width: 38ch;
}

/* ===== SOCIALS (consistente con .landing-rabi-social) ===== */
.footer-public-rabi-socials {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  margin-top: var(--sp-2);
}
.footer-public-rabi-social {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.08);
  color: var(--color-text-on-dark);
  border: 1px solid var(--color-border-on-dark);
  font-size: 1rem;
  text-decoration: none;
  transition: background var(--t-base), color var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.footer-public-rabi-social:hover {
  background: var(--color-accent);
  color: var(--color-text-on-primary);
  border-color: var(--color-accent);
  transform: translateY(-3px) scale(1.05);
  text-decoration: none;
}

/* ===== COLUMNAS (titulos + listas) ===== */
.footer-public-rabi-col {
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-public-rabi-title {
  position: relative;
  color: var(--color-text-on-dark);
  font-size: var(--fs-small);
  margin: 0 0 var(--sp-3);
  padding-bottom: var(--sp-2);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  font-weight: var(--fw-semibold);
}
.footer-public-rabi-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 32px;
  height: 2px;
  background: var(--color-accent);
  border-radius: 2px;
}

/* Links con chevron animado */
.footer-public-rabi-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
}
.footer-public-rabi-links a {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  color: var(--color-text-on-dark-soft);
  text-decoration: none;
  font-size: var(--fs-body-sm);
  transition: color var(--t-fast), transform var(--t-fast);
}
.footer-public-rabi-links a i {
  font-size: 0.7rem;
  color: var(--color-accent);
  transition: transform var(--t-base);
}
.footer-public-rabi-links a:hover {
  color: var(--color-text-on-dark);
  text-decoration: none;
  transform: translateX(3px);
}
.footer-public-rabi-links a:hover i {
  transform: translateX(2px);
}

/* Lista de contacto con iconos circulares chicos */
.footer-public-rabi-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.footer-public-rabi-contact-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-3);
}
.footer-public-rabi-contact-icon {
  flex: 0 0 auto;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.10);
  color: var(--color-text-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  border: 1px solid var(--color-border-on-dark);
}
.footer-public-rabi-contact-text {
  color: var(--color-text-on-dark-soft);
  font-size: var(--fs-body-sm);
  line-height: var(--lh-snug);
  word-break: break-word;
  text-decoration: none;
  padding-top: 3px;
  transition: color var(--t-fast);
}
a.footer-public-rabi-contact-text:hover {
  color: var(--color-text-on-dark);
  text-decoration: underline;
}

/* ===== BOTTOM BAR ===== */
.footer-public-rabi-bottom {
  margin-top: var(--sp-7);
  padding-top: var(--sp-4);
  border-top: 1px solid var(--color-border-on-dark);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: var(--fs-caption);
  color: var(--color-text-on-dark-muted);
  max-width: var(--container-max);
  margin-left: auto;
  margin-right: auto;
  flex-wrap: wrap;
  gap: var(--sp-2);
  position: relative;
  z-index: 1;
}
.footer-public-rabi-bottom-meta {
  color: var(--color-text-on-dark-muted);
}
@media (max-width: 576px) {
  .footer-public-rabi-bottom {
    flex-direction: column;
    text-align: center;
    margin-top: var(--sp-6);
  }
}

.footer-private-rabi {
  background: var(--color-surface);
  border-top: 1px solid var(--color-divider);
  padding: var(--sp-3) var(--sp-5);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  display: flex; justify-content: space-between; align-items: center;
  height: var(--footer-h);
}
.footer-private-rabi a { color: var(--color-text-secondary); }

/* ============================================================
   SIDEBAR EXTENSIONS (Fase 4) — collapsed, toggle, submenus, tooltips
   ============================================================ */
.sidebar-rabi.is-collapsed {
  width: var(--sidebar-w-collap);
}
.sidebar-rabi.is-collapsed .sidebar-rabi-link .nav-rabi-label,
.sidebar-rabi.is-collapsed .sidebar-rabi-section,
.sidebar-rabi.is-collapsed .sidebar-rabi-brand-name,
.sidebar-rabi.is-collapsed .sidebar-rabi-brand-role,
.sidebar-rabi.is-collapsed .sidebar-rabi-link .submenu-arrow,
.sidebar-rabi.is-collapsed .badge-rabi {
  display: none;
}
.sidebar-rabi.is-collapsed .sidebar-rabi-link {
  justify-content: center;
  padding: var(--sp-2) 0;
}
.sidebar-rabi.is-collapsed .sidebar-rabi-brand {
  flex-direction: column;
  justify-content: center;
  padding: var(--sp-4) var(--sp-2) var(--sp-3);
  gap: var(--sp-3);
}
.sidebar-rabi.is-collapsed .sidebar-rabi-toggle {
  position: static;
  margin: 0;
}

.sidebar-rabi-toggle {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  background: rgba(255,255,255,0.12);
  color: #fff;
  border: none;
  width: 26px; height: 26px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.75rem;
  transition: background var(--t-fast), transform var(--t-fast);
  z-index: 2;
}
.sidebar-rabi-toggle:hover { background: rgba(255,255,255,0.22); transform: scale(1.05); }

.sidebar-rabi-logo {
  width: 96px; height: 96px;
  flex-shrink: 0;
  object-fit: contain;
}
.sidebar-rabi.is-collapsed .sidebar-rabi-logo { width: 36px; height: 36px; }

/* Submenu (item con sub-items) */
.sidebar-rabi-group { position: relative; }
.sidebar-rabi-link.is-submenu .submenu-arrow {
  margin-left: auto;
  font-size: 0.85rem;
  opacity: 0.7;
}
.sidebar-rabi-submenu {
  display: flex; flex-direction: column;
  gap: 1px;
  padding-left: var(--sp-5);
  margin-top: 2px;
  margin-bottom: var(--sp-2);
}
.sidebar-rabi-submenu-item {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  color: rgba(255,255,255,0.85);
  border-radius: var(--r-sm);
  font-size: var(--fs-caption);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-fast), color var(--t-fast);
  text-decoration: none;
  min-height: 32px;
}
.sidebar-rabi-submenu-item:hover { background: rgba(255,255,255,0.10); color: #fff; }
.sidebar-rabi-submenu-item.is-active {
  background: rgba(255,255,255,0.18);
  color: #fff;
  font-weight: var(--fw-semibold);
}
.sidebar-rabi-submenu-item .bi { font-size: 0.95rem; width: 16px; text-align: center; }

/* Tooltip flyout (cuando sidebar esta colapsado y hay un grupo con submenu) */
.sidebar-rabi-tooltip {
  position: absolute;
  left: calc(100% + 8px);
  top: 0;
  min-width: 200px;
  background: var(--color-modal-bg);
  color: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--sh-popover);
  padding: var(--sp-2);
  z-index: var(--z-tooltip);
  display: none;
}
.sidebar-rabi-group:hover .sidebar-rabi-tooltip,
.sidebar-rabi-link:hover + .sidebar-rabi-tooltip { display: block; }
.sidebar-rabi-tooltip-header {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  padding: var(--sp-2) var(--sp-3) var(--sp-2);
  border-bottom: 1px solid rgba(255,255,255,0.12);
  margin-bottom: var(--sp-1);
}
.sidebar-rabi-tooltip .sidebar-rabi-submenu-item { padding: var(--sp-2) var(--sp-3); }

/* Dropdown del usuario en el sidebar footer */
.sidebar-rabi-user-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  flex: 1;
  background: transparent;
  border: none;
  color: #fff;
  padding: var(--sp-2) var(--sp-2);
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-body-sm);
  text-align: left;
  min-width: 0;
  transition: background var(--t-fast);
}
.sidebar-rabi-user-btn:hover { background: rgba(255,255,255,0.10); }
.sidebar-rabi-user-btn .bi { font-size: 1.25rem; flex-shrink: 0; }
.sidebar-rabi-user-btn .user-rabi-name {
  flex: 1; min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-weight: var(--fw-semibold);
}

/* ============================================================
   PUBLIC NAVBAR EXTENSIONS (Fase 4) — transparent / scrolled / dropdown / mobile
   ============================================================ */
.navbar-rabi.is-transparent {
  background: var(--color-primary);
  border-bottom: none;
  color: var(--color-text-on-dark);
}
.navbar-rabi.is-transparent .navbar-rabi-brand { color: var(--color-text-on-dark); }
.navbar-rabi.is-transparent .navbar-rabi-brand .brand-mark {
  background: var(--color-bg-white); color: var(--color-primary);
}
.navbar-rabi.is-transparent .navbar-rabi-links a {
  color: var(--color-text-on-dark-soft);
}
.navbar-rabi.is-transparent .navbar-rabi-links a:hover {
  background: var(--color-surface-on-dark); color: var(--color-text-on-dark);
}
.navbar-rabi.is-transparent .navbar-rabi-links a.is-active { color: var(--color-text-on-dark); }
.navbar-rabi.is-scrolled {
  box-shadow: var(--sh-card);
}

/* Dropdown de usuario en navbar */
.navbar-rabi-user {
  position: relative;
}
.navbar-rabi-user-btn {
  display: flex; align-items: center; gap: var(--sp-2);
  background: transparent;
  border: 1px solid transparent;
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-md);
  color: inherit;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  cursor: pointer;
  transition: background var(--t-fast), border-color var(--t-fast);
}
.navbar-rabi-user-btn:hover { background: var(--color-bg-lighter); }
.navbar-rabi.is-transparent .navbar-rabi-user-btn { color: var(--color-text-on-dark); }
.navbar-rabi.is-transparent .navbar-rabi-user-btn:hover { background: var(--color-surface-on-dark); }
.navbar-rabi-user-name { font-weight: var(--fw-semibold); }
.navbar-rabi-role-badge {
  font-size: var(--fs-caption);
  background: var(--color-primary-50);
  color: var(--color-primary);
  padding: 2px var(--sp-2);
  border-radius: var(--r-pill);
  font-weight: var(--fw-semibold);
}
.navbar-rabi.is-transparent .navbar-rabi-role-badge {
  background: var(--color-surface-on-dark-hover); color: var(--color-text-on-dark);
}

.navbar-rabi-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  box-shadow: var(--sh-popover);
  padding: var(--sp-2);
  z-index: var(--z-dropdown);
}
.navbar-rabi-menu-header {
  display: flex; align-items: center; gap: var(--sp-3);
  padding: var(--sp-3);
  border-bottom: 1px solid var(--color-divider);
  margin-bottom: var(--sp-2);
}
.navbar-rabi-menu-header .bi { font-size: 2rem; color: var(--color-primary); }
.navbar-rabi-menu-name { font-weight: var(--fw-semibold); }
.navbar-rabi-menu-role { font-size: var(--fs-caption); color: var(--color-text-muted); }
.navbar-rabi-menu-item {
  display: flex; align-items: center; gap: var(--sp-2);
  width: 100%;
  background: transparent;
  border: none;
  padding: var(--sp-2) var(--sp-3);
  font-size: var(--fs-body-sm);
  color: var(--color-text);
  border-radius: var(--r-sm);
  cursor: pointer;
  text-align: left;
  transition: background var(--t-fast);
}
.navbar-rabi-menu-item:hover { background: var(--color-bg-lighter); }
.navbar-rabi-menu-item.is-danger { color: var(--color-error); }
.navbar-rabi-menu-divider {
  height: 1px;
  background: var(--color-divider);
  margin: var(--sp-2) 0;
}
.navbar-rabi-overlay {
  position: fixed; inset: 0;
  z-index: calc(var(--z-dropdown) - 1);
}

/* Toggle hamburguesa */
.navbar-rabi-toggle {
  background: transparent;
  border: 1px solid transparent;
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  color: inherit;
  font-size: 1.4rem;
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast);
}
.navbar-rabi-toggle:hover { background: var(--color-bg-lighter); }
.navbar-rabi.is-transparent .navbar-rabi-toggle:hover { background: var(--color-surface-on-dark); }

/* Mobile menu */
.navbar-rabi-mobile {
  display: flex; flex-direction: column;
  background: var(--color-primary);
  color: var(--color-text-on-dark);
  padding: var(--sp-4) var(--sp-5);
  gap: var(--sp-1);
  border-top: 1px solid var(--color-surface-on-dark);
}
.navbar-rabi-mobile a {
  padding: var(--sp-3);
  color: var(--color-text-on-dark-strong);
  border-radius: var(--r-sm);
  text-decoration: none;
  font-weight: var(--fw-medium);
}
.navbar-rabi-mobile a:hover { background: var(--color-surface-on-dark); color: var(--color-text-on-dark); }

/* Banner mustChangePassword (alerta inline) */
.banner-must-change-rabi {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-3) var(--sp-5);
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning-border);
  color: #8a6500;
  font-size: var(--fs-body-sm);
}
.banner-must-change-rabi a {
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  text-decoration: underline;
}

/* Banner expiracion de sesion (top fijo) */
.banner-expiring-rabi {
  position: fixed; top: 0; left: 0; right: 0;
  padding: var(--sp-2) var(--sp-4);
  background: var(--color-warning-bg);
  border-bottom: 1px solid var(--color-warning-border);
  color: #8a6500;
  font-size: var(--fs-body-sm);
  z-index: var(--z-toast);
  display: flex; align-items: center; justify-content: center; gap: var(--sp-3);
  box-shadow: var(--sh-card);
}

/* ============================================================
   TOAST EXTENSIONS (Fase 5) — stack, animaciones, progreso, dismiss
   ============================================================ */
.toast-stack-rabi {
  position: fixed;
  top: var(--sp-5);
  right: var(--sp-5);
  display: flex; flex-direction: column;
  gap: var(--sp-3);
  z-index: var(--z-toast);
  pointer-events: none;
}
.toast-stack-rabi .toast-rabi {
  pointer-events: auto;
  position: relative;
  overflow: hidden;
}
.toast-rabi.is-entering { animation: toast-rabi-in 240ms ease both; }
.toast-rabi.is-exiting  { animation: toast-rabi-out 240ms ease forwards; }

@keyframes toast-rabi-in {
  from { transform: translateX(110%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes toast-rabi-out {
  from { transform: translateX(0); opacity: 1; }
  to   { transform: translateX(110%); opacity: 0; }
}

.toast-rabi-progress {
  position: absolute;
  bottom: 0; left: 0;
  width: 100%; height: 2px;
  background: rgba(0,0,0,0.05);
}
.toast-rabi-progress-bar {
  height: 100%;
  background: var(--color-primary);
  transform-origin: left center;
  animation: toast-rabi-progress linear forwards;
}
.toast-rabi.is-success .toast-rabi-progress-bar { background: var(--color-success); }
.toast-rabi.is-error   .toast-rabi-progress-bar { background: var(--color-error); }
.toast-rabi.is-warning .toast-rabi-progress-bar { background: var(--color-warning); }

@keyframes toast-rabi-progress {
  from { transform: scaleX(1); }
  to   { transform: scaleX(0); }
}

/* ============================================================
   CONFIRM DELETE MODAL — small variant
   ============================================================ */
.modal-rabi.is-sm-rabi {
  max-width: 380px;
}
.modal-rabi-confirm {
  text-align: center;
  padding: var(--sp-6) var(--sp-5) var(--sp-3);
}
.modal-rabi-confirm-icon {
  font-size: 2.5rem;
  color: var(--color-error);
  display: block;
  margin-bottom: var(--sp-3);
}
.modal-rabi-confirm-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  margin: 0 0 var(--sp-2);
  color: var(--color-modal-text);
}
.modal-rabi-confirm-desc {
  font-size: var(--fs-small);
  color: var(--color-modal-label);
  margin: 0;
  line-height: var(--lh-normal);
}

/* ============================================================
   LOGIN PAGE (Fase 6)
   ============================================================ */
.login-rabi-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: var(--sp-7) var(--sp-4);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
}
.login-rabi-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  box-shadow: var(--sh-modal);
}
.login-rabi-logo {
  width: 88px; height: 88px;
  object-fit: contain;
}

.password-rabi-wrap {
  position: relative;
}
.password-rabi-wrap .input-rabi {
  padding-right: calc(var(--sp-5) + 16px);
}
.password-rabi-toggle {
  position: absolute;
  right: var(--sp-3);
  top: 50%;
  transform: translateY(-50%);
  background: transparent;
  border: none;
  width: 32px; height: 32px;
  border-radius: var(--r-sm);
  color: var(--color-text-muted);
  cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background var(--t-fast), color var(--t-fast);
}
.password-rabi-toggle:hover {
  background: var(--color-bg-lighter);
  color: var(--color-text-secondary);
}

.password-rabi-checklist {
  list-style: none;
  padding: 0;
  margin: var(--sp-3) 0 0;
  display: flex; flex-direction: column;
  gap: var(--sp-1);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}
.password-rabi-checklist li {
  display: flex; align-items: center; gap: var(--sp-2);
  transition: color var(--t-fast);
}
.password-rabi-checklist li.is-ok {
  color: var(--color-success);
  font-weight: var(--fw-medium);
}
.password-rabi-checklist .bi { font-size: 0.95rem; }

/* ============================================================
   BLOG PAGE (Fase 6)
   ============================================================ */
.blog-rabi-page {
  background: var(--color-bg-light);
  min-height: 100vh;
  display: flex; flex-direction: column;
}
.blog-rabi-hero {
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
  color: #fff;
  padding: calc(var(--topbar-h) + var(--sp-7)) var(--sp-5) var(--sp-7);
  text-align: center;
}
.blog-rabi-hero-content {
  max-width: 720px;
  margin: 0 auto;
}
.blog-rabi-hero-content h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  margin: 0 0 var(--sp-3);
  color: #fff;
}
.blog-rabi-hero-content p {
  font-size: var(--fs-h5);
  color: rgba(255,255,255,0.85);
  margin: 0 0 var(--sp-5);
}
.blog-rabi-hero-search {
  position: relative;
  max-width: 560px;
  margin: 0 auto;
}
.blog-rabi-hero-search .bi {
  position: absolute;
  left: var(--sp-4);
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  font-size: 1.1rem;
  pointer-events: none;
}
.blog-rabi-hero-search input {
  width: 100%;
  height: var(--ctrl-h-lg);
  padding: 0 var(--sp-5) 0 calc(var(--sp-5) + 16px);
  background: var(--color-surface);
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font-size: var(--fs-body);
  font-family: var(--font-sans);
  color: var(--color-text);
  box-shadow: var(--sh-card);
}
.blog-rabi-hero-search input:focus {
  outline: none;
  box-shadow: var(--sh-card), var(--sh-focus);
}

.blog-rabi-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: var(--sp-6);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-6) var(--sp-5);
  width: 100%;
}
@media (max-width: 992px) {
  .blog-rabi-layout { grid-template-columns: 1fr; }
}

.blog-rabi-main { min-width: 0; }
.blog-rabi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: var(--sp-5);
}
.blog-rabi-card {
  display: flex;
  flex-direction: column;
  text-decoration: none;
  color: inherit;
  overflow: hidden;
}
.blog-rabi-card:hover { text-decoration: none; }
.blog-rabi-card-img {
  width: 100%; height: 180px;
  background: var(--color-bg-lighter);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  font-size: 2.5rem;
  overflow: hidden;
}
.blog-rabi-card-img img {
  width: 100%; height: 100%; object-fit: cover;
}
.blog-rabi-card-meta {
  display: flex; gap: var(--sp-4);
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-bottom: var(--sp-2);
  flex-wrap: wrap;
}
.blog-rabi-card-meta .bi { margin-right: 4px; }
.blog-rabi-card-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
  letter-spacing: var(--ls-snug);
  line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-rabi-card-summary {
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
  line-height: var(--lh-normal);
  margin: 0 0 var(--sp-3);
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-rabi-card-link {
  display: inline-flex; align-items: center; gap: var(--sp-1);
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
}
.blog-rabi-card:hover .blog-rabi-card-link { color: var(--color-primary-hover); }

.blog-rabi-aside {
  display: flex; flex-direction: column;
  gap: var(--sp-4);
  min-width: 0;
}
.blog-rabi-aside-section .card-rabi-title {
  display: flex; align-items: center;
  font-size: var(--fs-body);
  margin: 0;
}
.blog-rabi-aside-item {
  display: flex; gap: var(--sp-3);
  padding: var(--sp-3) var(--card-pad);
  text-decoration: none;
  color: inherit;
  border-bottom: 1px solid var(--color-divider);
  transition: background var(--t-fast);
}
.blog-rabi-aside-item:last-child { border-bottom: none; }
.blog-rabi-aside-item:hover { background: var(--color-bg-lighter); text-decoration: none; }
.blog-rabi-aside-thumb {
  width: 64px; height: 50px;
  border-radius: var(--r-sm);
  background: var(--color-bg-lighter);
  display: flex; align-items: center; justify-content: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  overflow: hidden;
}
.blog-rabi-aside-thumb img { width: 100%; height: 100%; object-fit: cover; }
.blog-rabi-aside-info { flex: 1; min-width: 0; }
.blog-rabi-aside-info h4 {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 4px;
  line-height: var(--lh-snug);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden;
}
.blog-rabi-aside-info span {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
}

/* ============================================================
   BLOG ARTICLE PAGE (Fase 6)
   ============================================================ */
.article-rabi-hero {
  position: relative;
  width: 100%;
  height: 420px;
  background: var(--color-primary);
  overflow: hidden;
}
.article-rabi-hero img {
  width: 100%; height: 100%; object-fit: cover;
}
.article-rabi-hero-placeholder {
  width: 100%; height: 100%;
  display: flex; align-items: center; justify-content: center;
  color: rgba(255,255,255,0.5);
  font-size: 5rem;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
}
.article-rabi-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,29,61,0.85) 0%, rgba(0,29,61,0.40) 60%, rgba(0,29,61,0.20) 100%);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--sp-7) var(--sp-6);
  color: #fff;
}
.article-rabi-hero-overlay h1 {
  font-size: var(--fs-h1);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-tight);
  line-height: var(--lh-tight);
  color: #fff;
  margin: 0 0 var(--sp-3);
  max-width: 920px;
}
.article-rabi-hero-meta {
  display: flex; gap: var(--sp-5); flex-wrap: wrap;
  font-size: var(--fs-body-sm);
  color: rgba(255,255,255,0.9);
}
.article-rabi-hero-meta span {
  display: inline-flex; align-items: center; gap: var(--sp-2);
}

.article-rabi-back-row {
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
  padding: var(--sp-4) var(--sp-5) 0;
}

.article-rabi-layout {
  display: grid;
  grid-template-columns: 240px 1fr 320px;
  gap: var(--sp-5);
  max-width: var(--container-max);
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-5) var(--sp-7);
  width: 100%;
  align-items: start;
}
@media (max-width: 1200px) {
  .article-rabi-layout { grid-template-columns: 1fr 320px; }
  .article-rabi-left { display: none; }
}
@media (max-width: 992px) {
  .article-rabi-layout { grid-template-columns: 1fr; }
}

.article-rabi-left { position: sticky; top: var(--sp-5); }
.article-rabi-summary { background: var(--color-surface); }

.article-rabi-main { min-width: 0; }
.article-rabi-body {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  padding: var(--sp-6);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--color-text);
  box-shadow: var(--sh-card);
}
.article-rabi-body h1, .article-rabi-body h2 {
  font-size: var(--fs-h2);
  font-weight: var(--fw-semibold);
  margin: var(--sp-6) 0 var(--sp-3);
  letter-spacing: var(--ls-tight);
}
.article-rabi-body h3 {
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  margin: var(--sp-5) 0 var(--sp-3);
}
.article-rabi-body p { margin: 0 0 var(--sp-4); }
.article-rabi-body a { color: var(--color-primary); }
.article-rabi-body img {
  max-width: 100%; height: auto;
  border-radius: var(--r-md);
  margin: var(--sp-4) 0;
}
.article-rabi-body blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--sp-2) var(--sp-4);
  margin: var(--sp-4) 0;
  background: var(--color-bg-lighter);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--color-text-secondary);
  font-style: italic;
}

/* ============================================================
   PANEL / DASHBOARD LAYOUT (Fase 7)
   ============================================================ */
.page-rabi {
  padding: var(--sp-5);
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 768px) { .page-rabi { padding: var(--sp-4); } }

.page-rabi-header {
  display: flex; flex-direction: column;
  justify-content: space-between;
  gap: var(--sp-3);
  margin-bottom: var(--sp-5);
}
@media (min-width: 768px) {
  .page-rabi-header { flex-direction: row; align-items: center; }
}
.page-rabi-header-actions {
  display: flex; gap: var(--sp-2); flex-wrap: wrap;
}

/* KPI grid (responsive) */
.kpi-rabi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.kpi-rabi-row {
  display: flex; align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--card-pad);
}
.kpi-rabi-icon {
  width: 48px; height: 48px;
  border-radius: var(--r-md);
  display: flex; align-items: center; justify-content: center;
  color: #fff;
  font-size: 1.4rem;
  flex-shrink: 0;
}

/* Dashboard 3-column grid (2/3 + 1/3) */
.dash-rabi-cols {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
@media (min-width: 992px) {
  .dash-rabi-cols { grid-template-columns: 2fr 1fr 1fr; }
}

/* Sector header clickable item */
.dash-rabi-sector-header {
  display: flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--r-sm);
  cursor: pointer;
  transition: background var(--t-fast);
}
.dash-rabi-sector-header:hover { background: var(--color-bg-lighter); }
.dash-rabi-sector-header > i { color: var(--color-primary-bright); font-size: 1.1rem; }

/* Course / Item card (for student/teacher dashboards) */
.dash-rabi-item {
  display: flex; align-items: center;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--card-pad);
  border-bottom: 1px solid var(--color-divider);
  cursor: pointer;
  transition: background var(--t-fast);
  text-decoration: none;
  color: inherit;
}
.dash-rabi-item:last-child { border-bottom: none; }
.dash-rabi-item:hover { background: var(--color-bg-lighter); text-decoration: none; }
.dash-rabi-item-icon {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--color-primary-50);
  color: var(--color-primary);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.25rem;
  flex-shrink: 0;
}
.dash-rabi-item-body { flex: 1; min-width: 0; }
.dash-rabi-item-title {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0;
}
.dash-rabi-item-meta {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: 2px;
}
.dash-rabi-item-actions {
  display: flex; gap: var(--sp-1);
  flex-shrink: 0;
}

/* Form grid 2-column responsive (para perfiles, modales largos) */
.form-rabi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 768px) {
  .form-rabi-grid { grid-template-columns: 1fr 1fr; }
  .form-rabi-grid .is-full { grid-column: span 2; }
}

/* Profile page layout */
.profile-rabi-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--sp-4);
}
@media (min-width: 992px) {
  .profile-rabi-grid { grid-template-columns: 320px 1fr; align-items: start; }
}
.profile-rabi-info { position: sticky; top: var(--sp-4); }
.profile-rabi-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--sp-2) 0;
  border-bottom: 1px solid var(--color-divider);
}

/* ============================================================
   LANDING REDESIGN (rediseño 2026-04-25) — Hero
   Fondo azul institucional + canvas de particulas dinamicas + viewport-height
   ============================================================ */
.landing-rabi {
  background: var(--color-bg-white);
}

.landing-rabi-hero {
  position: relative;
  min-height: calc(100vh - var(--topbar-h));
  display: flex;
  align-items: center;
  padding: var(--sp-7) var(--sp-6);
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
  overflow: hidden;
}
/* Tablet/Mobile: el contenido stackeado es mas alto que el viewport,
   no forzamos min-height para evitar contenido recortado / desbalance visual */
@media (max-width: 991.98px) {
  .landing-rabi-hero {
    min-height: auto;
    padding: var(--sp-7) var(--sp-5);
    align-items: stretch;
  }
}
@media (max-width: 768px) {
  .landing-rabi-hero { padding: var(--sp-6) var(--sp-4); }
}

/* Canvas de particulas: detras del contenido, ocupa todo el hero */
.landing-rabi-hero-particles {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

.landing-rabi-hero-grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: var(--sp-7);
  align-items: center;
  max-width: var(--container-max);
  margin: 0 auto;
  width: 100%;
}
@media (max-width: 992px) {
  .landing-rabi-hero-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.landing-rabi-hero-content { min-width: 0; }

.landing-rabi-hero-logo {
  width: 125px;
  height: 125px;
  object-fit: contain;
  margin-bottom: var(--sp-4);
  filter: drop-shadow(var(--sh-logo-glow));
}
@media (max-width: 768px) {
  .landing-rabi-hero-logo { width: 94px; height: 94px; }
}

.landing-rabi-hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: var(--fw-bold);
  line-height: 1.05;
  letter-spacing: -0.025em;
  color: var(--color-text-on-dark);
  margin: 0 0 var(--sp-3);
  text-shadow: var(--sh-text-glow);
}

.landing-rabi-hero-subtitle {
  font-size: var(--fs-h4);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  margin: 0 0 var(--sp-4);
  line-height: var(--lh-snug);
  letter-spacing: -0.01em;
}

.landing-rabi-hero-desc {
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--color-text-on-dark-strong);
  margin: 0 0 var(--sp-5);
  max-width: 540px;
}

.landing-rabi-hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  margin-bottom: var(--sp-6);
}

/* "Ver programas" sobre fondo oscuro: blanco por defecto, vuelve al estilo
   estandar (.btn-rabi.is-secondary normal: texto azul / fondo claro) en hover */
.landing-rabi-hero .btn-rabi.is-secondary {
  color: var(--color-text-on-dark);
  border-color: var(--color-border-on-dark-strong);
  background: transparent;
}
.landing-rabi-hero .btn-rabi.is-secondary:hover {
  background: var(--color-bg-white);
  color: var(--color-primary);
  border-color: var(--color-bg-white);
}
.landing-rabi-hero .btn-rabi.is-secondary:active {
  background: var(--color-primary-100);
  color: var(--color-primary);
  border-color: var(--color-primary-100);
}

.landing-rabi-hero-kpis {
  display: flex;
  gap: var(--sp-6);
  padding-top: var(--sp-5);
  border-top: 1px solid var(--color-border-on-dark);
  flex-wrap: wrap;
}
.landing-rabi-hero-kpis > div { color: var(--color-text-on-dark-soft); }
.landing-rabi-hero-kpis .t-caption-rabi { color: var(--color-text-on-dark-muted); }
.landing-rabi-hero-kpi-value {
  font-size: 2rem;
  font-weight: var(--fw-bold);
  color: var(--color-accent);
  line-height: 1;
  letter-spacing: -0.02em;
}

/* Eyebrow del hero sobre azul: usar accent y mejorar contraste */
.landing-rabi-hero-content .t-label-up-rabi {
  color: var(--color-accent) !important;
}

/* ===== Carrusel del Hero ===== */
.landing-rabi-hero-carousel {
  position: relative;
  width: 100%;
  height: 600px;
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-hero-image);
  border: 1px solid var(--color-border-on-dark);
}
@media (max-width: 992px) { .landing-rabi-hero-carousel { height: 360px; } }
@media (max-width: 480px) { .landing-rabi-hero-carousel { height: 280px; } }

.landing-rabi-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 600ms ease;
  pointer-events: none;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.landing-rabi-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.landing-rabi-hero-slide-icon {
  font-size: 9rem;
  color: var(--color-border-on-dark);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -55%);
}

.landing-rabi-hero-slide-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--sp-5) var(--sp-5) var(--sp-6);
  background: var(--overlay-image-bottom);
  color: var(--color-text-on-dark);
}

.landing-rabi-hero-dots {
  position: absolute;
  bottom: var(--sp-3);
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: var(--sp-2);
  z-index: 2;
}
.landing-rabi-hero-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-dot-on-dark);
  border: none;
  padding: 0;
  cursor: pointer;
  transition: width var(--t-base), background var(--t-fast);
}
.landing-rabi-hero-dot:hover { background: var(--color-dot-on-dark-hover); }
.landing-rabi-hero-dot.is-active {
  width: 28px;
  border-radius: 4px;
  background: var(--color-accent);
}

/* ============================================================
   LANDING REDESIGN — secciones genericas + Nosotros
   ============================================================ */

/* Container con max-width institucional */
.landing-rabi-container {
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 var(--sp-6);
  width: 100%;
}
@media (max-width: 768px) {
  .landing-rabi-container { padding: 0 var(--sp-4); }
}

/* Seccion generica: padding vertical generoso, fondo blanco por defecto */
.landing-rabi-section {
  padding: var(--sp-8) 0;
  background: var(--color-bg-white);
}
@media (max-width: 768px) {
  .landing-rabi-section { padding: var(--sp-7) 0; }
}

/* Variante alternativa: fondo gris claro para alternar secciones */
.landing-rabi-section-alt {
  background: var(--color-bg-lighter);
}

/* Grid de 2 columnas (imagen + texto, info + visual) */
.landing-rabi-2cols {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: var(--sp-7);
  align-items: center;
}
@media (max-width: 992px) {
  .landing-rabi-2cols {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

/* Eyebrow naranja sobre fondo claro (titulo de seccion previo al h2) */
.landing-rabi-eyebrow {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: var(--sp-2);
}

/* Heading de seccion alineado a izquierda (h2 grande, semibold) */
.landing-rabi-h2 {
  font-size: clamp(1.75rem, 3vw, 2.25rem);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-text);
  margin: 0 0 var(--sp-4);
}

/* Lead paragraph alineado a izquierda (texto introductorio mas grande que el body) */
.landing-rabi-lead {
  font-size: 1.0625rem;
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin: 0 0 var(--sp-5);
  max-width: 540px;
}

/* ===== Section header CENTRADO (Sobre Nosotros, Programas, etc.) ===== */
.landing-rabi-section-head-center {
  text-align: center;
  margin-bottom: var(--sp-7);
  display: flex;
  flex-direction: column;
  align-items: center;
}
.landing-rabi-section-title {
  font-size: clamp(1.875rem, 3.5vw, 2.5rem);
  font-weight: var(--fw-bold);
  line-height: var(--lh-tight);
  letter-spacing: var(--ls-tight);
  color: var(--color-primary);
  margin: 0 0 var(--sp-3);
}
.landing-rabi-section-divider {
  width: 80px;
  height: 4px;
  background: var(--color-accent);
  border-radius: var(--r-pill);
  margin: 0 0 var(--sp-4);
}
.landing-rabi-section-lead {
  font-size: 1.0625rem;
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  max-width: 720px;
  margin: 0;
}

/* ===== Feature cards (Mision/Vision/Valores y similares: 3 cards horizontales) ===== */
.landing-rabi-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 992px) {
  .landing-rabi-feature-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .landing-rabi-feature-grid { grid-template-columns: 1fr; }
}

.landing-rabi-feature-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  text-align: center;
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  cursor: default;
}
.landing-rabi-feature-card:hover {
  box-shadow: var(--sh-hero-image);
  transform: translateY(-8px);
  border-top-color: var(--color-accent);
}

.landing-rabi-feature-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-bright);
  color: var(--color-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin: 0 auto var(--sp-4);
  transition: transform var(--t-base), background var(--t-base);
}
.landing-rabi-feature-card:hover .landing-rabi-feature-icon {
  transform: scale(1.1) rotate(-6deg);
  background: var(--color-accent);
}

.landing-rabi-feature-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  margin: 0 0 var(--sp-3);
}

.landing-rabi-feature-desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   LANDING REDESIGN — Historia (timeline sobre fondo azul institucional)
   Hereda el sello visual del Hero (gradiente primary) para continuidad de marca.
   ============================================================ */
.landing-rabi-history {
  position: relative;
  padding: var(--sp-8) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
@media (max-width: 768px) {
  .landing-rabi-history { padding: var(--sp-7) 0; }
}
/* El contenido (header + timeline) por encima del canvas de particulas */
.landing-rabi-history > .landing-rabi-container {
  position: relative;
  z-index: 1;
}

/* Variante "dark" del header centrado (texto blanco sobre azul) */
.landing-rabi-section-head-center--dark .landing-rabi-section-title {
  color: var(--color-text-on-dark);
}
.landing-rabi-section-head-center--dark .landing-rabi-section-lead {
  color: var(--color-text-on-dark-soft);
}

/* ===== Timeline ===== */
.landing-rabi-timeline {
  position: relative;
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}
/* Eje vertical central (desktop) */
.landing-rabi-timeline::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: 2px;
  background: var(--color-border-on-dark);
  transform: translateX(-50%);
}

/* Item de timeline: grid de 2 columnas (marcador + card) */
.landing-rabi-timeline-item {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}

/* Alternancia: items impares card a la derecha del eje, marcador izq */
.landing-rabi-timeline-item:nth-child(odd) .landing-rabi-timeline-marker {
  justify-self: end;
}
.landing-rabi-timeline-item:nth-child(odd) .landing-rabi-timeline-card {
  justify-self: start;
}

/* Items pares: invertir orden (card izq, marcador der) */
.landing-rabi-timeline-item:nth-child(even) .landing-rabi-timeline-marker {
  order: 2;
  justify-self: start;
}
.landing-rabi-timeline-item:nth-child(even) .landing-rabi-timeline-card {
  order: 1;
  justify-self: end;
  text-align: right;
}

/* Marcador circular naranja con año en blanco (sello del sistema) */
.landing-rabi-timeline-marker {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-on-accent);
  font-weight: var(--fw-bold);
  font-size: var(--fs-h5);
  box-shadow: 0 0 0 6px var(--color-surface-on-dark), var(--sh-card-hover);
  z-index: 1;
  flex-shrink: 0;
}
.landing-rabi-timeline-marker > span {
  letter-spacing: -0.02em;
}

/* Card con la descripcion del milestone (blanca sobre azul institucional) */
.landing-rabi-timeline-card {
  background: var(--color-surface);
  border-radius: var(--r-xl);
  padding: var(--sp-5);
  box-shadow: var(--sh-card-hover);
  max-width: 460px;
  width: 100%;
}
.landing-rabi-timeline-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  margin: 0 0 var(--sp-2);
  line-height: var(--lh-snug);
}
.landing-rabi-timeline-desc {
  font-size: var(--fs-body-sm);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ===== Responsive: tablet/mobile -> eje a la izquierda, todo a la derecha ===== */
@media (max-width: 768px) {
  .landing-rabi-timeline { gap: var(--sp-5); padding-left: var(--sp-2); }
  .landing-rabi-timeline::before {
    left: 32px;
    transform: none;
  }

  .landing-rabi-timeline-item {
    grid-template-columns: 64px 1fr;
    gap: var(--sp-4);
    align-items: start;
  }

  /* Reset alternancia en mobile: todos los items igual layout */
  .landing-rabi-timeline-item:nth-child(odd) .landing-rabi-timeline-marker,
  .landing-rabi-timeline-item:nth-child(even) .landing-rabi-timeline-marker {
    justify-self: center;
    order: initial;
  }
  .landing-rabi-timeline-item:nth-child(odd) .landing-rabi-timeline-card,
  .landing-rabi-timeline-item:nth-child(even) .landing-rabi-timeline-card {
    justify-self: stretch;
    order: initial;
    text-align: left;
  }

  /* Marcador mas pequeño en mobile */
  .landing-rabi-timeline-marker {
    width: 64px;
    height: 64px;
    font-size: var(--fs-body-sm);
    box-shadow: 0 0 0 4px var(--color-surface-on-dark), var(--sh-card);
  }
}

/* ============================================================
   LANDING REDESIGN — Equipo Directivo (4 cards centradas con avatar)
   ============================================================ */
.landing-rabi-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 992px) {
  .landing-rabi-team-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .landing-rabi-team-grid { grid-template-columns: 1fr; }
}

.landing-rabi-team-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-4);
  text-align: center;
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  display: flex;
  flex-direction: column;
  align-items: center;
  cursor: default;
  /* Reservar opacity inicial para animacion fadeInUp (animate.css define from { opacity:0 }) */
  animation-fill-mode: both;
}
.landing-rabi-team-card:hover {
  box-shadow: var(--sh-hero-image);
  transform: translateY(-8px);
  border-top-color: var(--color-accent);
}

.landing-rabi-team-avatar {
  position: relative;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: var(--color-primary-bright);
  color: var(--color-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.6rem;
  margin-bottom: var(--sp-4);
  overflow: hidden;
  flex-shrink: 0;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.landing-rabi-team-card:hover .landing-rabi-team-avatar {
  transform: scale(1.06);
  box-shadow: 0 0 0 4px var(--color-accent-50);
}
.landing-rabi-team-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-rabi-team-role {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  margin: 0 0 var(--sp-2);
}

.landing-rabi-team-name {
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  margin-bottom: var(--sp-3);
  line-height: var(--lh-snug);
}

.landing-rabi-team-desc {
  font-size: var(--fs-small);
  line-height: var(--lh-relaxed);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================================
   LANDING REDESIGN — Stats (fondo azul institucional con wave superior)
   ============================================================ */
.landing-rabi-stats-section {
  position: relative;
  /* Padding reducido ~20% respecto a la altura anterior. Top compensa el wave (140px) + sp-6 */
  padding: calc(var(--sp-6) + 110px) 0 var(--sp-6);
  /* Mismo gradiente que el Hero/Historia para coherencia visual + sello de marca */
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
@media (max-width: 768px) {
  .landing-rabi-stats-section { padding: calc(var(--sp-5) + 70px) 0 var(--sp-5); }
}
/* Contenido por encima del canvas de particulas */
.landing-rabi-stats-section > .landing-rabi-container {
  position: relative;
  z-index: 1;
}

/* Wave superior: pinta el "espacio blanco" que viene de la seccion anterior.
   Va por encima del canvas de particulas para que la curva se vea limpia. */
.landing-rabi-stats-wave {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 140px;
  pointer-events: none;
  color: var(--color-bg-white);
  z-index: 1;
}
.landing-rabi-stats-wave svg {
  display: block;
  width: 100%;
  height: 100%;
}
.landing-rabi-stats-wave svg path {
  fill: currentColor;
}
@media (max-width: 768px) {
  .landing-rabi-stats-wave { height: 90px; }
}

.landing-rabi-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--sp-5);
  position: relative;
  z-index: 1;
}
@media (max-width: 992px) {
  .landing-rabi-stats-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-6); }
}
@media (max-width: 480px) {
  .landing-rabi-stats-grid { grid-template-columns: 1fr; }
}

.landing-rabi-stats-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-2);
}
.landing-rabi-stats-item > i {
  font-size: 2.4rem;
  color: var(--color-text-on-dark-soft);
  margin-bottom: var(--sp-1);
}
.landing-rabi-stats-value {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: var(--fw-bold);
  line-height: 1;
  color: var(--color-text-on-dark);
  letter-spacing: -0.02em;
}
.landing-rabi-stats-label {
  font-size: var(--fs-body-sm);
  color: var(--color-text-on-dark-soft);
  font-weight: var(--fw-medium);
}

/* ============================================================
   LANDING REDESIGN — Boton flotante WhatsApp
   ============================================================ */
.landing-rabi-whatsapp {
  position: fixed;
  bottom: var(--sp-5);
  right: var(--sp-5);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-text-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.85rem;
  box-shadow: var(--sh-hero-image);
  z-index: var(--z-toast);
  text-decoration: none;
  transition: transform var(--t-base), box-shadow var(--t-base);
  animation: whatsapp-pulse 2.4s ease-in-out infinite;
}
.landing-rabi-whatsapp:hover {
  transform: scale(1.08);
  box-shadow: 0 8px 24px var(--color-surface-on-dark-hover), var(--sh-hero-image);
  text-decoration: none;
  color: var(--color-text-on-dark);
}
.landing-rabi-whatsapp:active {
  transform: scale(0.96);
}
@media (max-width: 768px) {
  .landing-rabi-whatsapp {
    width: 52px;
    height: 52px;
    bottom: var(--sp-4);
    right: var(--sp-4);
    font-size: 1.6rem;
  }
}
@keyframes whatsapp-pulse {
  0%, 100% { box-shadow: var(--sh-hero-image), 0 0 0 0 var(--color-success-bg); }
  50%      { box-shadow: var(--sh-hero-image), 0 0 0 10px transparent; }
}

/* ============================================================
   LANDING REDESIGN — Programas Academicos
   Cards centradas: icono circular azul + titulo upper + badge plan + lista info
   ============================================================ */
.landing-rabi-program-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
  /* Cards 30% mas angostas: limitar ancho del grid y centrar */
  max-width: 70%;
  margin: 0 auto;
}
@media (max-width: 992px) {
  .landing-rabi-program-grid {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .landing-rabi-program-grid { grid-template-columns: 1fr; }
}

.landing-rabi-program-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: var(--sp-6) var(--sp-5);
  box-shadow: var(--sh-card);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  cursor: default;
  /* Reservar opacity inicial para animacion fadeInUp */
  animation-fill-mode: both;
}
.landing-rabi-program-card:hover {
  box-shadow: var(--sh-hero-image);
  transform: translateY(-8px);
  border-top-color: var(--color-accent);
}

.landing-rabi-program-icon {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: var(--sp-4);
  transition: transform var(--t-base), background var(--t-base);
}
.landing-rabi-program-card:hover .landing-rabi-program-icon {
  transform: scale(1.08) rotate(-6deg);
  background: var(--color-accent);
}

.landing-rabi-program-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--ls-snug);
  margin: 0 0 var(--sp-3);
}

.landing-rabi-program-badge {
  display: inline-block;
  background: var(--color-primary-50);
  color: var(--color-primary);
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  margin-bottom: var(--sp-4);
  line-height: var(--lh-snug);
}

.landing-rabi-program-divider {
  width: 100%;
  height: 1px;
  background: var(--color-divider);
  margin: 0 0 var(--sp-4);
}

.landing-rabi-program-info {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  width: 100%;
}
.landing-rabi-program-info li {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-align: left;
  font-size: var(--fs-body-sm);
  color: var(--color-text-secondary);
}
.landing-rabi-program-info li > i {
  color: var(--color-primary);
  font-size: 1.1rem;
  flex-shrink: 0;
  width: 20px;
  text-align: center;
}

/* ============================================================
   LANDING REDESIGN — Maestros (carrusel horizontal scroll-snap)
   Responsive escalonado: 5 / 4 / 3 / 2 / 1 cards visibles segun viewport
   ============================================================ */

/* Wrapper del carrusel: relativo (para botones absolutos) + padding lateral
   (solo desktop, para que los botones de nav no toquen el borde). */
.landing-rabi-maestros-carousel {
  position: relative;
  padding: 0 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  /* Tablet/mobile: sin botones de nav -> sin padding extra */
  .landing-rabi-maestros-carousel { padding: 0; }
}

/* Track scrollable horizontal con snap. Width 100% del wrapper, sin overflow propagado. */
.landing-rabi-maestros-track {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--sp-2) 0;
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.landing-rabi-maestros-track::-webkit-scrollbar { display: none; }

/* Card: width explicito + flex-shrink/grow 0 (mas robusto que flex-basis con calc).
   min-width evita que se aplasten demasiado en pantallas raras. */
.landing-rabi-maestros-card {
  flex-shrink: 0;
  flex-grow: 0;
  width: calc((100% - (var(--sp-3) * 4)) / 5);
  min-width: 180px;
  box-sizing: border-box;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-base), transform var(--t-base);
  display: flex;
  flex-direction: column;
}
.landing-rabi-maestros-card:hover {
  box-shadow: var(--sh-card-hover);
  transform: translateY(-4px);
}

/* === Responsive escalonado === */
/* Desktop chico/Laptop: 4 cards */
@media (max-width: 1199.98px) {
  .landing-rabi-maestros-card {
    width: calc((100% - (var(--sp-3) * 3)) / 4);
  }
}
/* Tablet (>=768 y <992): 3 cards. Sin botones de nav. */
@media (max-width: 991.98px) {
  .landing-rabi-maestros-card {
    width: calc((100% - (var(--sp-3) * 2)) / 3);
  }
}
/* Mobile grande (480-767): 2 cards */
@media (max-width: 767.98px) {
  .landing-rabi-maestros-card {
    width: calc((100% - var(--sp-3)) / 2);
    min-width: 160px;
  }
}
/* Mobile chico (<480): 1 card y un poquito de la siguiente asoma para sugerir scroll */
@media (max-width: 479.98px) {
  .landing-rabi-maestros-card {
    width: 85%;
    min-width: 0;
  }
}

/* Foto del maestro: cuadrada, fondo placeholder cuando no hay imagen */
.landing-rabi-maestros-photo {
  width: 100%;
  aspect-ratio: 1 / 1;
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-primary);
  font-size: 4rem;
}
.landing-rabi-maestros-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Body: nombre prominente arriba, especialidad como subtitulo debajo */
.landing-rabi-maestros-body {
  padding: var(--sp-4);
  text-align: center;
}
.landing-rabi-maestros-name {
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  line-height: var(--lh-snug);
  margin-bottom: var(--sp-2);
  /* Truncar a 2 lineas si nombre muy largo */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.landing-rabi-maestros-specialty {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-accent);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
}

/* Botones de navegacion (solo desktop ≥992px) */
.landing-rabi-maestros-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--sh-card);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.landing-rabi-maestros-nav:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  transform: translateY(-50%) scale(1.05);
}
.landing-rabi-maestros-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.landing-rabi-maestros-nav.is-prev { left: 4px; }
.landing-rabi-maestros-nav.is-next { right: 4px; }

/* Mobile/tablet: ocultamos los botones (swipe nativo es mejor UX) */
@media (max-width: 991.98px) {
  .landing-rabi-maestros-nav { display: none; }
}

/* ============================================================
   LANDING REDESIGN — Sectores / Filiales (carrusel auto-play)
   Mismo patron que Maestros: track scrollable + botones nav + cards
   ============================================================ */
.landing-rabi-sectors-carousel {
  position: relative;
  padding: 0 56px;
  box-sizing: border-box;
  width: 100%;
  max-width: 100%;
  overflow: hidden;
}
@media (max-width: 991.98px) {
  .landing-rabi-sectors-carousel { padding: 0; }
}

.landing-rabi-sectors-track {
  display: flex;
  gap: var(--sp-4);
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  padding: var(--sp-2) 0;
  width: 100%;
  box-sizing: border-box;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.landing-rabi-sectors-track::-webkit-scrollbar { display: none; }

/* Cada sector: ancho calculado para 3 visibles en desktop */
.landing-rabi-sectors-track .landing-rabi-sector-card {
  flex-shrink: 0;
  flex-grow: 0;
  width: calc((100% - (var(--sp-4) * 2)) / 3);
  min-width: 240px;
  scroll-snap-align: start;
}
@media (max-width: 991.98px) {
  /* Tablet: 2 visibles */
  .landing-rabi-sectors-track .landing-rabi-sector-card {
    width: calc((100% - var(--sp-4)) / 2);
  }
}
@media (max-width: 560px) {
  /* Mobile: 1 card + asomada */
  .landing-rabi-sectors-track .landing-rabi-sector-card {
    width: 85%;
    min-width: 0;
  }
}

/* Botones de nav (solo desktop ≥992px) */
.landing-rabi-sectors-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  color: var(--color-primary);
  cursor: pointer;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  box-shadow: var(--sh-card);
  transition: background var(--t-fast), color var(--t-fast), transform var(--t-fast);
}
.landing-rabi-sectors-nav:hover {
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  transform: translateY(-50%) scale(1.05);
}
.landing-rabi-sectors-nav:active {
  transform: translateY(-50%) scale(0.95);
}
.landing-rabi-sectors-nav.is-prev { left: 4px; }
.landing-rabi-sectors-nav.is-next { right: 4px; }
@media (max-width: 991.98px) {
  .landing-rabi-sectors-nav { display: none; }
}

.landing-rabi-sector-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid transparent;
  border-radius: var(--r-xl);
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  box-shadow: var(--sh-card);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
  cursor: default;
  animation-fill-mode: both;
}
.landing-rabi-sector-card:hover {
  box-shadow: var(--sh-hero-image);
  transform: translateY(-6px);
  border-top-color: var(--color-accent);
}

.landing-rabi-sector-icon {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--color-primary-bright);
  color: var(--color-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: var(--sp-3);
  transition: transform var(--t-base), background var(--t-base);
}
.landing-rabi-sector-card:hover .landing-rabi-sector-icon {
  transform: scale(1.08) rotate(-6deg);
  background: var(--color-accent);
}

.landing-rabi-sector-name {
  font-size: var(--fs-h6);
  font-weight: var(--fw-bold);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: var(--ls-snug);
  margin: 0;
  line-height: var(--lh-snug);
}

/* Stats internos del sector (Programas / Ciclos / Cursos) */
.landing-rabi-sector-stats {
  display: flex;
  justify-content: space-around;
  width: 100%;
  padding-top: var(--sp-3);
  border-top: 1px solid var(--color-divider);
  gap: var(--sp-2);
}
.landing-rabi-sector-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
}
.landing-rabi-sector-stat-value {
  font-size: var(--fs-h4);
  font-weight: var(--fw-bold);
  color: var(--color-primary);
  line-height: 1;
  letter-spacing: -0.02em;
}
.landing-rabi-sector-stat-label {
  font-size: var(--fs-caption);
  color: var(--color-text-muted);
  margin-top: var(--sp-1);
  text-transform: uppercase;
  letter-spacing: var(--ls-wide);
  font-weight: var(--fw-medium);
}

/* ============================================================
   LandingCmsPanel — editor de sectorsLanding (lista de sectores)
   ============================================================ */
.sectors-cms-grid {
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  border: 1px solid var(--color-border);
  border-radius: var(--r-md);
  padding: var(--sp-3);
  background: var(--color-bg-lighter);
}

.sectors-cms-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: var(--sp-3) var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--r-sm);
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.sectors-cms-item:hover {
  border-color: var(--color-border-strong);
}
.sectors-cms-item.is-selected {
  border-left: 3px solid var(--color-accent);
  background: var(--color-primary-50);
}

.sectors-cms-item-info {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  flex: 1;
  min-width: 0;
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-medium);
  color: var(--color-text);
}
.sectors-cms-item-info > i {
  color: var(--color-primary);
  font-size: 1.1rem;
}

.sectors-cms-item-actions {
  display: flex;
  gap: var(--sp-1);
  flex-shrink: 0;
}

.sectors-cms-divider {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding: var(--sp-3) 0 var(--sp-1);
  margin-top: var(--sp-2);
  border-top: 1px solid var(--color-divider);
}

/* ============================================================
   LANDING REDESIGN — Blog (fondo azul institucional + particulas)
   Mismo sello visual del Hero/Historia/Stats para coherencia.
   ============================================================ */
.landing-rabi-blog-section {
  position: relative;
  padding: var(--sp-8) 0;
  background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-bright) 100%);
  color: var(--color-text-on-dark);
  overflow: hidden;
}
@media (max-width: 768px) {
  .landing-rabi-blog-section { padding: var(--sp-7) 0; }
}
/* Contenido (header + grid + cta) por encima del canvas de particulas */
.landing-rabi-blog-section > .landing-rabi-container {
  position: relative;
  z-index: 1;
}

/* Grid de 3 cards de blog */
.landing-rabi-blog-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-5);
}
@media (max-width: 992px) {
  .landing-rabi-blog-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .landing-rabi-blog-grid { grid-template-columns: 1fr; }
}

/* Card blanca destacada sobre el fondo azul */
.landing-rabi-blog-card {
  display: flex;
  flex-direction: column;
  background: var(--color-surface);
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--sh-hero-image);
  text-decoration: none;
  color: inherit;
  transition: transform var(--t-base), box-shadow var(--t-base);
}
.landing-rabi-blog-card:hover {
  transform: translateY(-6px);
  text-decoration: none;
  color: inherit;
}

/* Imagen / placeholder de cada card */
.landing-rabi-blog-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  background: linear-gradient(135deg, var(--color-primary-100) 0%, var(--color-primary-50) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  color: var(--color-primary);
  font-size: 3rem;
}
.landing-rabi-blog-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.landing-rabi-blog-body {
  padding: var(--sp-5);
  display: flex;
  flex-direction: column;
  gap: var(--sp-2);
  flex: 1;
}

.landing-rabi-blog-title {
  font-size: var(--fs-h5);
  font-weight: var(--fw-semibold);
  color: var(--color-text);
  line-height: var(--lh-snug);
  margin: var(--sp-1) 0 var(--sp-2);
  /* Truncar a 2 lineas para alturas consistentes */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* CTA "Ver todos" centrado abajo */
.landing-rabi-blog-cta {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-7);
}

/* ============================================================
   LANDING REDESIGN — Contacto
   Grid 2 cols (info izq / mapa der). Iconos circulares azules
   consistentes con .landing-rabi-feature-icon. Sin colores hardcoded.
   ============================================================ */
.landing-rabi-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-7);
  align-items: stretch;
}
@media (max-width: 992px) {
  .landing-rabi-contact-grid {
    grid-template-columns: 1fr;
    gap: var(--sp-6);
  }
}

.landing-rabi-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--sp-6);
}

/* Lista de items (direccion / telefono / email) */
.landing-rabi-contact-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}

.landing-rabi-contact-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--sh-card);
  transition: box-shadow var(--t-base), transform var(--t-base), border-color var(--t-base);
}
.landing-rabi-contact-item:hover {
  box-shadow: var(--sh-hero-image);
  transform: translateY(-3px);
  border-color: var(--color-primary-bright);
}

.landing-rabi-contact-icon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--color-primary-bright);
  color: var(--color-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  transition: transform var(--t-base), background var(--t-base);
}
.landing-rabi-contact-item:hover .landing-rabi-contact-icon {
  transform: scale(1.08) rotate(-6deg);
  background: var(--color-accent);
}

.landing-rabi-contact-text {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  min-width: 0;
  flex: 1;
}

.landing-rabi-contact-label {
  font-size: var(--fs-caption);
  font-weight: var(--fw-semibold);
  color: var(--color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.landing-rabi-contact-value {
  font-size: var(--fs-body);
  color: var(--color-text);
  line-height: var(--lh-snug);
  word-break: break-word;
}

.landing-rabi-contact-link {
  text-decoration: none;
  transition: color var(--t-base);
}
.landing-rabi-contact-link:hover {
  color: var(--color-primary-bright);
  text-decoration: underline;
}

/* Botones sociales — circulares con primary, accent en hover */
.landing-rabi-contact-socials {
  display: flex;
  gap: var(--sp-3);
  flex-wrap: wrap;
  align-items: center;
}

.landing-rabi-social {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-text-on-primary);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.05rem;
  text-decoration: none;
  transition: background var(--t-base), transform var(--t-base), box-shadow var(--t-base);
  box-shadow: var(--sh-card);
}
.landing-rabi-social:hover {
  background: var(--color-accent);
  color: var(--color-text-on-primary);
  transform: translateY(-3px) scale(1.05);
  box-shadow: var(--sh-hero-image);
}

/* Mapa — iframe a la derecha, mismo radio y sombra que las cards */
.landing-rabi-contact-map {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--sh-card);
  border: 1px solid var(--color-border);
  min-height: 420px;
  background: var(--color-surface);
}
.landing-rabi-contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 420px;
  border: 0;
  display: block;
}
@media (max-width: 992px) {
  .landing-rabi-contact-map,
  .landing-rabi-contact-map iframe {
    min-height: 320px;
  }
}

/* Placeholder cuando no hay MapEmbedUrl */
.landing-rabi-contact-map-placeholder {
  width: 100%;
  height: 100%;
  min-height: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-3);
  padding: var(--sp-6);
  text-align: center;
  color: var(--color-text-secondary);
  background: var(--color-surface-alt);
}
.landing-rabi-contact-map-placeholder i {
  font-size: 2.6rem;
  color: var(--color-primary-bright);
}
.landing-rabi-contact-map-placeholder p {
  margin: 0;
  font-size: var(--fs-body-sm);
}