/*
 * Maristas UI · sistema de diseño
 * Tokens (--maristas-*) y componentes (.mr-*) compartidos entre los sistemas Maristas.
 * Se apoya en Bootstrap 5; todo lo que cambia el aspecto de Bootstrap vive bajo .mr-scope.
 */

:root {
    /* Marca */
    --maristas-brand: #0b3a6f;
    --maristas-brand-strong: #082b54;
    --maristas-brand-soft: #e7eefb;
    --maristas-accent: #2f6fed;

    /* Neutros con sesgo azul */
    --maristas-ink: #172033;
    --maristas-ink-soft: #3f4a60;      /* texto largo secundario (citas, notas) */
    --maristas-muted: #6a7489;
    --maristas-line: #e6e9f1;
    --maristas-line-strong: #b8c0d0;   /* bordes punteados, casillas, interruptor apagado */
    --maristas-soft: #f4f6fb;
    --maristas-canvas: #f4f6fb;
    --maristas-surface: #ffffff;

    /* Estados (independientes de la marca) */
    --maristas-success: #12805c;   --maristas-success-soft: #e3f5ee;
    --maristas-warning: #a96a00;   --maristas-warning-soft: #fdf1d8;
    --maristas-danger: #c93a3a;    --maristas-danger-soft: #fce8e8;
    --maristas-info: #1f6aa8;      --maristas-info-soft: #e3f0fb;

    /* Tipografía */
    --maristas-font: 'Poppins', system-ui, -apple-system, 'Segoe UI', sans-serif;
    --maristas-text-2xs: .7rem;     /* encabezados en mayúsculas, atajos de teclado */
    --maristas-text-xs: .75rem;     /* fechas, contadores, leyendas */
    --maristas-text-sm: .8125rem;   /* etiquetas, texto secundario, controles sm */
    --maristas-text-base: .875rem;  /* controles, tablas, menús, texto de interfaz */
    --maristas-text-md: 1rem;
    --maristas-text-lg: 1.25rem;
    --maristas-text-xl: 1.6rem;

    /* Forma */
    --maristas-radius-xs: 6px;      /* código en línea, atajos, pestañas pequeñas */
    --maristas-radius-sm: 8px;
    --maristas-radius-md: 10px;
    --maristas-radius-lg: 16px;
    --maristas-shadow-sm: 0 1px 3px rgba(23, 32, 51, .12);                                   /* elementos sobre una imagen o pestaña activa */
    --maristas-shadow-card: 0 1px 2px rgba(23, 32, 51, .04), 0 6px 20px rgba(23, 32, 51, .05);
    --maristas-shadow-float: 0 12px 32px rgba(23, 32, 51, .14);                              /* menús, popovers, avisos, botones flotantes */
    --maristas-shadow-modal: 0 20px 50px rgba(23, 32, 51, .2);                               /* modales, paneles laterales, pantallas de acceso */
    --maristas-shadow-up: 0 -4px 18px rgba(23, 32, 51, .1);                                  /* barra fija al pie */
    --maristas-overlay: rgba(23, 32, 51, .45);                                               /* fondo detrás de un modal */

    /* Espaciado (múltiplos de 4px) */
    --maristas-space-1: .25rem; --maristas-space-2: .5rem; --maristas-space-3: .75rem;
    --maristas-space-4: 1rem;   --maristas-space-5: 1.5rem; --maristas-space-6: 2rem;

    /* Separación entre ícono y texto: una sola medida para botones, menús, navegación y avisos; -sm para pastillas */
    --maristas-icon-gap: .5rem;
    --maristas-icon-gap-sm: .35rem;

    /* Controles: botón, campo y selector del mismo tamaño miden lo mismo y usan la misma letra */
    --maristas-control-h-sm: 2rem;  --maristas-control-h: 2.5rem;  --maristas-control-h-lg: 3rem;
    --maristas-control-text-sm: var(--maristas-text-sm); --maristas-control-text: var(--maristas-text-base); --maristas-control-text-lg: var(--maristas-text-md);
    --maristas-label-text: var(--maristas-text-sm);

    /* Estados de interacción: uno solo para todo el kit */
    --maristas-hover: var(--maristas-soft);                       /* hover neutro; el azul claro es solo para lo activo o seleccionado */
    --maristas-focus-ring: 0 0 0 3px rgba(47, 111, 237, .15);    /* campos; botones y enlaces usan contorno de 2px */
    --maristas-disabled-opacity: .5;

    /* Margen lateral de la página (crece con la ventana; cada sistema puede redefinirlo en su :root) */
    --maristas-gutter: clamp(2rem, 7vw, 9rem);
}

body:has(.mr-scope) { background: var(--maristas-canvas); }
.mr-scope { color: var(--maristas-ink); font-family: var(--maristas-font); }
.mr-scope code { color: var(--maristas-brand); background: var(--maristas-brand-soft); padding: .1rem .35rem; border-radius: var(--maristas-radius-xs); font-size: .85em; }
.mr-scope pre code { background: none; color: inherit; padding: 0; }

.mr-scope .card { border: 0; border-radius: var(--maristas-radius-lg); box-shadow: var(--maristas-shadow-card); }
        .mr-scope .card-header { background: transparent; border-bottom: 0; padding: 1.1rem 1.25rem .4rem; }
        .mr-scope .card-header + .card-body.p-0 > :first-child { margin-top: .35rem; }

        /* Hero */
        .mr-hero { padding: 1.5rem 1.5rem 1.25rem; }
        .mr-hero-top { display: flex; flex-wrap: wrap; gap: 1.25rem; justify-content: space-between; align-items: flex-start; }
        .mr-person { display: flex; gap: 1rem; align-items: center; min-width: 0; }
        /* Obsoleto: usa <x-maristas::avatar size="lg"> (.mr-av-lg). Se conserva en la serie 1.x y se retira en la 2.0. */
        .mr-avatar { width: 64px; height: 64px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 1.35rem; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--maristas-brand), var(--maristas-accent)); }
        .mr-eyebrow { font-size: var(--maristas-text-sm); color: var(--maristas-muted); margin-bottom: .2rem; }
        .mr-name { font-size: var(--maristas-text-xl); line-height: 1.15; font-weight: 700; margin: 0 0 .2rem; text-wrap: balance; }
        .mr-relation { color: var(--maristas-muted); margin-bottom: .65rem; }
        .mr-chips { display: flex; flex-wrap: wrap; gap: .5rem; }
        .mr-chip { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap-sm); padding: .3rem .7rem; border-radius: 999px; background: var(--maristas-soft); color: var(--maristas-ink); font-size: var(--maristas-text-sm); text-decoration: none; transition: background .15s; }
        a.mr-chip:hover { background: var(--maristas-line); color: var(--maristas-ink); }
        .mr-chip i { color: var(--maristas-muted); }
.mr-block-head { display: flex; align-items: center; gap: .65rem; margin-bottom: .2rem; }
.mr-block-head .mr-eyebrow { margin: 0; }
/* Obsoleto: la acción de editar es un botón (mr-btn-dashed). Se conserva en la serie 1.x y se retira en la 2.0. */
.mr-chip-action { border: 1px dashed var(--maristas-line-strong); background: transparent; color: var(--maristas-accent); cursor: pointer; font-weight: 600; }
button.mr-chip-action:hover:not(:disabled) { background: var(--maristas-hover); }
.mr-chip-action i { color: inherit; }
.mr-chip-action:disabled { color: var(--maristas-muted); cursor: not-allowed; border-color: var(--maristas-line); }
/* Obsoleto: usa <x-maristas::state> (.mr-state). Se conserva en la serie 1.x y se retira en la 2.0. */
.mr-pill { display: inline-block; padding: .15rem .6rem; border-radius: 999px; background: var(--maristas-brand-soft); color: var(--maristas-brand); font-size: var(--maristas-text-xs); font-weight: 600; text-transform: capitalize; }
        .mr-actions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
        .mr-btn-main { border-radius: var(--maristas-radius-md); padding: .5rem 1rem; font-weight: 600; }

        /* Progreso del embudo */
        .mr-progress { margin-top: 1.5rem; }
        .mr-progress-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .85rem; }
        .mr-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0; }
        .mr-step { flex: 1; min-width: 0; }
        .mr-step-bar { height: 6px; border-radius: 999px; background: var(--maristas-line); margin-bottom: .45rem; }
        .mr-step-label { font-size: var(--maristas-text-sm); color: var(--maristas-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
        .mr-step.is-done .mr-step-bar { background: color-mix(in srgb, var(--maristas-accent) 50%, #fff); }
        .mr-step.is-current .mr-step-bar { background: var(--maristas-brand); }
        .mr-step.is-current .mr-step-label { color: var(--maristas-ink); font-weight: 600; }
        .mr-step.is-danger.is-current .mr-step-bar { background: var(--maristas-danger); }
        @media (max-width: 575.98px) { .mr-step:not(.is-current) .mr-step-label { visibility: hidden; } }

        /* Datos clave: una fila con divisores, sin cajas */
        .mr-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--maristas-line); }
        .mr-fact { min-width: 0; padding: .25rem 1.25rem; }
        .mr-fact:first-child { padding-left: 0; }
        .mr-fact + .mr-fact { border-left: 1px solid var(--maristas-line); }
        @media (max-width: 767.98px) { .mr-fact, .mr-fact:first-child { padding: .75rem 0; border-left: 0; } .mr-fact + .mr-fact { border-top: 1px solid var(--maristas-line); } }
        .mr-fact-value { font-weight: 600; line-height: 1.3; word-break: break-word; }
        .mr-fact-sub { font-size: var(--maristas-text-sm); color: var(--maristas-muted); line-height: 1.4; }
        .mr-fact .form-select { border-color: var(--maristas-line); background-color: #fff; font-weight: 600; }

        /* Bandeja de correo: lista a la izquierda, lectura a la derecha */
        .mr-inbox-bar { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: space-between; align-items: center; padding: .85rem 1.25rem; border-bottom: 1px solid var(--maristas-line); }
        .mr-inbox { display: grid; grid-template-columns: minmax(300px, 380px) 1fr; min-height: 520px; }
        .mr-mail-list { max-height: 720px; overflow-y: auto; border-right: 1px solid var(--maristas-line); }
        .mr-mail { border-bottom: 1px solid var(--maristas-line); }
        .mr-mail-row { display: flex; gap: .75rem; width: 100%; text-align: left; background: none; border: 0; padding: .85rem 1rem; color: inherit; align-items: flex-start; border-left: 3px solid transparent; }
        .mr-mail-row:hover { background: var(--maristas-soft); }
        .mr-mail.is-selected .mr-mail-row { background: var(--maristas-brand-soft); border-left-color: var(--maristas-brand); }
        .mr-mail-dir { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 1rem; background: var(--maristas-soft); color: var(--maristas-muted); position: relative; }
        .mr-mail.is-in .mr-mail-dir { background: var(--maristas-brand-soft); color: var(--maristas-brand); }
        .mr-mail.is-unread .mr-mail-dir::after { content: ''; position: absolute; top: -1px; right: -1px; width: 10px; height: 10px; border-radius: 50%; background: var(--maristas-accent); border: 2px solid var(--maristas-surface); }
        .mr-mail-main { flex: 1; min-width: 0; }
        .mr-mail-who { font-size: var(--maristas-text-base); color: var(--maristas-muted); }
        .mr-mail-date { font-size: var(--maristas-text-xs); color: var(--maristas-muted); white-space: nowrap; }
        .mr-mail.is-unread .mr-mail-who, .mr-mail.is-unread .mr-mail-subject { color: var(--maristas-ink); font-weight: 700; }
        .mr-mail-subject { font-weight: 600; margin: .1rem 0; }
        .mr-mail-snippet { color: var(--maristas-muted); font-size: var(--maristas-text-sm); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
        .mr-reader { display: flex; flex-direction: column; min-width: 0; }
        .mr-reader-head { padding: 1.1rem 1.5rem; border-bottom: 1px solid var(--maristas-line); }
        .mr-reader-body { flex: 1; background: #fff; }
        .mr-reader-foot { padding: .85rem 1.5rem; border-top: 1px solid var(--maristas-line); }
        .mr-reader-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: var(--maristas-muted); padding: 3rem 1.5rem; }
        @media (max-width: 991.98px) {
            .mr-inbox { grid-template-columns: 1fr; min-height: 0; }
            .mr-mail-list { border-right: 0; max-height: none; }
            .mr-inbox:not(.has-selection) .mr-reader { display: none; }
            .mr-inbox.has-selection .mr-mail-list { display: none; }
        }

        /* Pestañas */
        .mr-tabs { border-bottom: 1px solid var(--maristas-line) !important; gap: .25rem; }
        .mr-tabs .nav-link { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap); border: 0 !important; background: none !important; color: var(--maristas-muted) !important; font-weight: 600; padding: .75rem 1rem; border-radius: 0; }
        .mr-tabs .nav-link:hover { color: var(--maristas-ink) !important; }
        .mr-tabs .nav-link.active { color: var(--maristas-brand) !important; box-shadow: inset 0 -2px 0 var(--maristas-brand); }
        .mr-tabs .nav-link::after, .mr-tabs .nav-link::before { display: none !important; }

        /* Propiedades (pestaña Detalles) */
        .mr-prop { margin-bottom: .9rem; }
        .mr-prop:last-child { margin-bottom: 0; }
        .mr-prop-label { font-size: var(--maristas-label-text); font-weight: 500; color: var(--maristas-muted); margin-bottom: .15rem; }
        .min-w-0 { min-width: 0; }
        .mr-scope .card-title { font-weight: 700; font-size: 1rem; }

        /* Línea de tiempo */
        .mr-filters { display: flex; flex-wrap: wrap; gap: .35rem; }
        .mr-filter { border: 0; background: var(--maristas-soft); color: var(--maristas-muted); border-radius: 999px; padding: .25rem .8rem; font-size: var(--maristas-text-sm); font-weight: 600; cursor: pointer; transition: background-color .12s, color .12s, box-shadow .12s; }
        .mr-filter.is-active { background: var(--maristas-brand); color: #fff; }
        /* Obsoleto: usa la línea de tiempo .mr-tl (agrupada por día). Se conserva en la serie 1.x y se retira en la 2.0. */
        .mr-events { list-style: none; margin: 0; padding: 0; position: relative; }
        .mr-event { display: flex; gap: .9rem; padding-bottom: 1.25rem; position: relative; }
        .mr-event:not(:last-child)::before { content: ''; position: absolute; left: 17px; top: 38px; bottom: 0; width: 2px; background: var(--maristas-line); }
        .mr-event-icon { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: 1rem; }
        .mr-event-body { flex: 1; min-width: 0; padding: .3rem 0 .25rem; }
        .mr-event-title { font-weight: 600; margin: 0; }
        .mr-event-text { color: var(--maristas-ink-soft); margin: .25rem 0 .4rem; overflow-wrap: anywhere; }
        .mr-event-meta { font-size: var(--maristas-text-sm); color: var(--maristas-muted); display: flex; flex-wrap: wrap; gap: .25rem 1rem; }

/* ---------- Botones: una sola familia, mismos tamaños y estados ---------- */
.mr-scope .btn,
.mr-scope .mr-btn-ghost {
    display: inline-flex; align-items: center; justify-content: center; gap: var(--maristas-icon-gap);
    border-radius: var(--maristas-radius-md); font-weight: 600; font-size: var(--maristas-control-text); line-height: 1.25;
    min-height: var(--maristas-control-h); padding: .5rem 1rem; text-decoration: none; transition: background-color .15s, border-color .15s, color .15s;
}
.mr-scope .btn-sm { min-height: var(--maristas-control-h-sm); padding: .35rem .8rem; font-size: var(--maristas-control-text-sm); }
.mr-scope .btn-lg { min-height: var(--maristas-control-h-lg); padding: .65rem 1.5rem; font-size: var(--maristas-control-text-lg); border-radius: var(--maristas-radius-md); }
/* Un botón sin relleno (p-0) o de tipo enlace es texto: no fuerza altura mínima, para que quepa dentro de una pastilla o una línea de texto */
.mr-scope .btn.p-0, .mr-scope .btn-link { min-height: 0; }
/* Botón punteado: la acción de editar de un bloque («Editar contacto»). Es un botón, no un chip. */
.mr-scope .btn.mr-btn-dashed { background: transparent; border: 1px dashed var(--maristas-line-strong); color: var(--maristas-accent); }
.mr-scope .btn.mr-btn-dashed:hover:not(:disabled) { background: var(--maristas-hover); border-color: var(--maristas-accent); color: var(--maristas-accent); }

.mr-scope .btn:focus-visible, .mr-scope .mr-btn-ghost:focus-visible { outline: 2px solid var(--maristas-accent); outline-offset: 2px; box-shadow: none; }
.mr-scope .btn-primary { background: var(--maristas-brand); border-color: var(--maristas-brand); color: #fff; }
.mr-scope .btn-primary:hover, .mr-scope .btn-primary:focus, .mr-scope .btn-primary:active { background: var(--maristas-brand-strong); border-color: var(--maristas-brand-strong); color: #fff; }
.mr-scope .btn-light, .mr-scope .btn-outline-primary, .mr-scope .btn-outline-secondary, .mr-scope .btn-outline-info, .mr-scope .mr-btn-ghost {
    background: var(--maristas-surface); border: 1px solid var(--maristas-line); color: var(--maristas-ink);
}
.mr-scope .btn-light:hover, .mr-scope .btn-outline-primary:hover, .mr-scope .btn-outline-secondary:hover, .mr-scope .btn-outline-info:hover, .mr-scope .mr-btn-ghost:hover {
    background: var(--maristas-soft); border-color: var(--maristas-line); color: var(--maristas-ink);
}
.mr-scope .btn-danger { background: var(--maristas-danger); border-color: var(--maristas-danger); color: #fff; }
.mr-scope .btn-success { background: var(--maristas-success); border-color: var(--maristas-success); color: #fff; }
/* Deshabilitado: el mismo control con --maristas-disabled-opacity. El principal además cambia al azul claro de la marca, nunca a gris. */
.mr-scope .btn:disabled, .mr-scope .btn.disabled { opacity: var(--maristas-disabled-opacity); cursor: not-allowed; pointer-events: none; }
.mr-scope .btn-primary:disabled, .mr-scope .btn-primary.disabled { background: var(--maristas-brand-soft); border-color: var(--maristas-brand-soft); color: var(--maristas-brand); }

/* ---------- Formularios ---------- */
.mr-scope .form-control, .mr-scope .form-select {
    border-radius: var(--maristas-radius-md); border-color: var(--maristas-line); font-size: var(--maristas-control-text); padding: .5rem .8rem; min-height: var(--maristas-control-h);
}
.mr-scope .form-select { padding-right: 2.25rem; }
/* Tamaños: sm, normal (por defecto) y lg. Van después de la regla base para ganar por orden. */
.mr-scope .form-control-sm, .mr-scope .form-select-sm { padding: .3rem .65rem; font-size: var(--maristas-control-text-sm); border-radius: var(--maristas-radius-sm); min-height: var(--maristas-control-h-sm); }
.mr-scope .form-select-sm { padding-right: 2rem; }
.mr-scope .form-control-lg, .mr-scope .form-select-lg { padding: .65rem 1rem; font-size: var(--maristas-control-text-lg); min-height: var(--maristas-control-h-lg); border-radius: var(--maristas-radius-md); }
.mr-scope .form-select-lg { padding-right: 2.5rem; }
.mr-scope .input-group-sm > .form-control, .mr-scope .input-group-sm > .input-group-text, .mr-scope .input-group-sm > .btn { padding: .3rem .65rem; font-size: var(--maristas-control-text-sm); min-height: var(--maristas-control-h-sm); }
.mr-scope .input-group-lg > .form-control, .mr-scope .input-group-lg > .input-group-text, .mr-scope .input-group-lg > .btn { padding: .65rem 1rem; font-size: var(--maristas-control-text-lg); min-height: var(--maristas-control-h-lg); }
.mr-scope .form-control:focus, .mr-scope .form-select:focus { border-color: var(--maristas-accent); box-shadow: var(--maristas-focus-ring); }
.mr-scope .form-label { font-size: var(--maristas-label-text); color: var(--maristas-muted); font-weight: 500; }

/* ---------- Badges, alertas y modales ---------- */
.mr-scope .badge { font-weight: 600; }
.mr-scope .alert { border: 1px solid transparent; border-radius: var(--maristas-radius-md); color: var(--maristas-ink); font-size: var(--maristas-text-base); }
/* Alertas con los colores de estado del kit (no los de Bootstrap): fondo suave, borde tenue, ícono en el tono y texto oscuro para leerse bien */
.mr-scope .alert-info    { background: var(--maristas-info-soft);    border-color: color-mix(in srgb, var(--maristas-info) 25%, transparent); }
.mr-scope .alert-success { background: var(--maristas-success-soft); border-color: color-mix(in srgb, var(--maristas-success) 25%, transparent); }
.mr-scope .alert-warning { background: var(--maristas-warning-soft); border-color: color-mix(in srgb, var(--maristas-warning) 25%, transparent); }
.mr-scope .alert-danger  { background: var(--maristas-danger-soft);  border-color: color-mix(in srgb, var(--maristas-danger) 25%, transparent); }
.mr-scope .alert-info > i:first-child    { color: var(--maristas-info); }
.mr-scope .alert-success > i:first-child { color: var(--maristas-success); }
.mr-scope .alert-warning > i:first-child { color: var(--maristas-warning); }
.mr-scope .alert-danger > i:first-child  { color: var(--maristas-danger); }
.mr-scope .alert .alert-link { color: inherit; }
.mr-scope .alert-dismissible { padding-right: 1rem; }
.mr-scope .alert .btn-close { position: static; padding: .35rem; margin-left: auto; flex-shrink: 0; }
.mr-scope .modal-content { border: 0; border-radius: var(--maristas-radius-lg); box-shadow: var(--maristas-shadow-modal); }
.mr-scope .modal-header, .mr-scope .modal-footer { border-color: var(--maristas-line); }
/* Fondo de un modal que Livewire muestra o quita sin usar el JavaScript de Bootstrap */
.mr-scope .modal.mr-modal-open, .modal.mr-modal-open { display: block; background: var(--maristas-overlay); }

.mr-scroll { max-height: 190px; overflow-y: auto; }

/* ---------- Dato en línea con ícono e icono-botón ---------- */
.mr-fact-inline { display: inline-flex; align-items: center; gap: .6rem; padding: .6rem .9rem; border-radius: var(--maristas-radius-md); background: var(--maristas-soft); }
.mr-fact-inline i { font-size: 1.15rem; color: var(--maristas-brand); }
.mr-scope .btn.mr-btn-icon { width: var(--maristas-control-h); height: var(--maristas-control-h); min-height: 0; padding: 0; flex: none; }
.mr-scope .btn-sm.mr-btn-icon { width: var(--maristas-control-h-sm); height: var(--maristas-control-h-sm); }
.mr-scope .btn-lg.mr-btn-icon { width: var(--maristas-control-h-lg); height: var(--maristas-control-h-lg); }


/* ---------- Estados reutilizables ---------- */
.mr-state { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap-sm); padding: .2rem .65rem; border-radius: 999px; font-size: var(--maristas-text-xs); font-weight: 600; }
.mr-state-success { background: var(--maristas-success-soft); color: var(--maristas-success); }
.mr-state-warning { background: var(--maristas-warning-soft); color: var(--maristas-warning); }
.mr-state-danger  { background: var(--maristas-danger-soft);  color: var(--maristas-danger); }
.mr-state-info    { background: var(--maristas-info-soft);    color: var(--maristas-info); }
.mr-state-neutral { background: var(--maristas-soft);         color: var(--maristas-muted); }

.mr-empty { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; padding: 2.5rem 1rem; color: var(--maristas-muted); }
.mr-empty i { font-size: 2rem; }
.mr-empty-title { color: var(--maristas-ink); font-weight: 600; }


/* ---------- Foco visible y tipografía utilitaria ---------- */
.mr-scope a:focus-visible, .mr-scope button:focus-visible, .mr-scope .nav-link:focus-visible,
.mr-scope .page-link:focus-visible, .mr-scope .dropdown-item:focus-visible, .mr-scope summary:focus-visible {
    outline: 2px solid var(--maristas-accent); outline-offset: 2px; box-shadow: none;
}
.mr-h1 { font-size: var(--maristas-text-xl); font-weight: 700; line-height: 1.2; }
.mr-h2 { font-size: var(--maristas-text-lg); font-weight: 700; line-height: 1.25; }
.mr-h3 { font-size: 1.1rem; font-weight: 600; line-height: 1.3; }
.mr-body { font-size: var(--maristas-text-md); }
.mr-small { font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-caption { font-size: var(--maristas-text-xs); color: var(--maristas-muted); }
.mr-link, .mr-link-id { color: var(--maristas-accent); text-decoration: none; }
.mr-link:hover, .mr-link-id:hover { text-decoration: underline; }
/* Enlace principal de una fila de tabla (el que abre el registro: folio o nombre). Uno por fila. */
.mr-link-id { font-weight: 600; }

/* ---------- Tablas ---------- */
.mr-scope .table { --bs-table-bg: transparent; color: var(--maristas-ink); margin-bottom: 0; }
.mr-scope .table thead th { background: var(--maristas-soft); color: var(--maristas-muted); font-size: var(--maristas-text-xs); font-weight: 600; border-bottom: 1px solid var(--maristas-line); white-space: nowrap; padding: .7rem 1rem; }
.mr-scope .table td { border-color: var(--maristas-line); vertical-align: middle; padding: .8rem 1rem; font-size: var(--maristas-text-base); }
/* Celda de encabezado de fila (<th scope="row"> en el cuerpo): misma medida que una celda normal para alinearse con su encabezado de columna */
.mr-scope .table tbody th { border-color: var(--maristas-line); vertical-align: middle; padding: .8rem 1rem; font-size: var(--maristas-text-base); font-weight: 400; }
.mr-scope .table-hover > tbody > tr:hover > * { background: var(--maristas-soft); color: var(--maristas-ink); }
.mr-table-wrap { border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); overflow: hidden; background: var(--maristas-surface); }
.mr-table-wrap .table-responsive { margin: 0; }

/* ---------- Navegación ---------- */
.mr-scope .nav-pills .nav-link { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap); border-radius: 999px; color: var(--maristas-muted); font-weight: 600; font-size: var(--maristas-text-sm); padding: .4rem .9rem; }
.mr-scope .nav-pills .nav-link:hover { background: var(--maristas-soft); color: var(--maristas-ink); }
.mr-scope .nav-pills .nav-link.active { background: var(--maristas-brand); color: #fff; }
.mr-scope .page-link { border: 0; border-radius: var(--maristas-radius-sm); color: var(--maristas-ink); margin: 0 2px; font-size: var(--maristas-text-sm); min-width: 36px; text-align: center; }
.mr-scope .page-link:hover { background: var(--maristas-hover); color: var(--maristas-ink); }
.mr-scope .page-item.active .page-link { background: var(--maristas-brand); color: #fff; }
.mr-scope .page-item.disabled .page-link { background: transparent; color: var(--maristas-muted); opacity: var(--maristas-disabled-opacity); }
.mr-scope .dropdown-menu { border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); box-shadow: var(--maristas-shadow-float); padding: .35rem; }
.mr-scope .dropdown-item { color: var(--maristas-ink); border-radius: var(--maristas-radius-sm); font-size: var(--maristas-text-base); padding: .45rem .75rem; display: flex; align-items: center; gap: var(--maristas-icon-gap); }
.mr-scope .dropdown-item > i { font-size: 1rem; flex: none; }
.mr-scope .dropdown-item:hover, .mr-scope .dropdown-item:focus { background: var(--maristas-soft); color: var(--maristas-ink); }
.mr-scope .dropdown-item.active { background: var(--maristas-brand-soft); color: var(--maristas-brand); }
.mr-scope .dropdown-divider { border-color: var(--maristas-line); }
.mr-scope .breadcrumb { font-size: var(--maristas-text-sm); }

/* ---------- Disclosure y listas ---------- */
.mr-scope .accordion-item { border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); overflow: hidden; margin-bottom: .5rem; }
.mr-scope .accordion-button { font-weight: 600; font-size: var(--maristas-text-base); background: var(--maristas-surface); color: var(--maristas-ink); box-shadow: none; }
.mr-scope .accordion-button:not(.collapsed) { background: var(--maristas-brand-soft); color: var(--maristas-brand); }
.mr-scope .list-group-item { border-color: var(--maristas-line); font-size: var(--maristas-text-base); }
.mr-scope .list-group-item.active { background: var(--maristas-brand-soft); color: var(--maristas-brand); border-color: var(--maristas-line); font-weight: 600; }

/* ---------- Feedback ---------- */
.mr-scope .progress { height: 8px; border-radius: 999px; background: var(--maristas-line); }
.mr-scope .progress-bar { background: var(--maristas-brand); border-radius: 999px; }
.mr-scope .progress-bar.is-success { background: var(--maristas-success); }
.mr-scope .progress-bar.is-warning { background: var(--maristas-warning); }
.mr-scope .progress-bar.is-danger { background: var(--maristas-danger); }
.mr-scope .spinner-border { color: var(--maristas-brand); }
.mr-scope .toast { background: var(--maristas-surface); border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); box-shadow: var(--maristas-shadow-float); color: var(--maristas-ink); font-size: var(--maristas-text-base); }
/* Aviso temporal: fondo sólido (el de Bootstrap es semitransparente); el tono lo da el color del ícono */
.mr-scope .tooltip-inner { background: var(--maristas-ink); border-radius: var(--maristas-radius-sm); font-size: var(--maristas-text-xs); }
.mr-scope .popover { border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); box-shadow: var(--maristas-shadow-float); }
.mr-scope .offcanvas { border: 0; box-shadow: var(--maristas-shadow-modal); }
.mr-skeleton { display: block; border-radius: var(--maristas-radius-sm); background: linear-gradient(90deg, var(--maristas-line) 25%, var(--maristas-soft) 50%, var(--maristas-line) 75%); background-size: 200% 100%; animation: mr-shimmer 1.4s linear infinite; }
@keyframes mr-shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .mr-skeleton { animation: none; } }

/* ---------- Formularios: grupos, validación y controles ---------- */
.mr-scope .input-group-text { background: var(--maristas-soft); border-color: var(--maristas-line); color: var(--maristas-muted); font-size: var(--maristas-control-text); }
.mr-scope .input-group > .form-control:not(:first-child), .mr-scope .input-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.mr-scope .input-group > .form-control:not(:last-child), .mr-scope .input-group-text:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.mr-scope .form-control.is-invalid, .mr-scope .form-select.is-invalid { border-color: var(--maristas-danger); background-image: none; }
.mr-scope .form-control.is-invalid:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--maristas-danger) 15%, transparent); }
.mr-scope .form-control.is-valid, .mr-scope .form-select.is-valid { border-color: var(--maristas-success); background-image: none; }
.mr-scope .invalid-feedback { color: var(--maristas-danger); font-size: var(--maristas-text-sm); }
/* Campo obligatorio: asterisco en la etiqueta */
.mr-scope .form-label.mr-req::after { content: ' *'; color: var(--maristas-danger); font-weight: 600; }
/* Caja neutra para agrupar un bloque dentro de un formulario o modal */
.mr-box { padding: .85rem 1rem; background: var(--maristas-surface); border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); }
.mr-box.is-muted { opacity: .55; }
.mr-box.mr-box-sm { padding: .5rem .7rem; }
.mr-box.is-soft { background: var(--maristas-soft); }
.mr-box.is-warning { background: var(--maristas-warning-soft); border-color: var(--maristas-warning); }
/* Acciones al pie de un formulario o paso: separadas del contenido por una línea */
/* Secciones de un formulario largo: título, ayuda corta y los campos, separadas por una línea */
.mr-form-section + .mr-form-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--maristas-line); }
.mr-form-section-title { margin: 0 0 .15rem; font-size: 1rem; font-weight: 700; }
.mr-form-section-hint { margin: 0 0 1rem; font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-form-actions { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--maristas-line); }
/* Datos clave-valor para revisar antes de confirmar */
.mr-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: .9rem 1.5rem; margin: 0; }
.mr-kv dt { margin: 0 0 .1rem; font-size: var(--maristas-label-text); font-weight: 500; color: var(--maristas-muted); }
.mr-kv dd { margin: 0; font-weight: 600; word-break: break-word; }
.mr-kv .is-wide { grid-column: 1 / -1; }
/* Etiqueta con una acción a la derecha (por ejemplo un interruptor), sin desalinear los campos vecinos */
.mr-label-row { display: flex; align-items: center; justify-content: space-between; gap: .5rem; min-height: 1.3rem; margin-bottom: .25rem; }
.mr-label-row .form-label { margin: 0; }
.mr-label-row .form-check { min-height: 0; margin: 0; padding-top: 0; }
.mr-scope .valid-feedback { color: var(--maristas-success); font-size: var(--maristas-text-sm); }
.mr-scope .form-text { color: var(--maristas-muted); font-size: var(--maristas-text-sm); }
.mr-scope .form-control:disabled, .mr-scope .form-select:disabled { background: var(--maristas-soft); color: var(--maristas-muted); }
.mr-scope .form-check-input { border-color: var(--maristas-line-strong); }
.mr-scope .form-check-label { font-size: var(--maristas-control-text); }
.mr-scope .form-check.form-check-sm, .mr-scope .form-check.form-check-lg { display: flex; align-items: center; gap: .6rem; padding-left: 0; }
.mr-scope .form-check.form-check-sm .form-check-input, .mr-scope .form-check.form-check-lg .form-check-input { margin: 0; float: none; flex: none; }
.mr-scope .form-check.form-check-sm .form-check-label, .mr-scope .form-check.form-check-lg .form-check-label { margin: 0; }
.mr-scope .form-check.form-check-sm .form-check-input:not([role="switch"]) { width: 1rem; height: 1rem; }
.mr-scope .form-check.form-check-lg .form-check-input:not([role="switch"]) { width: 1.5rem; height: 1.5rem; }
.mr-scope .form-check.form-check-sm .form-check-label { font-size: var(--maristas-text-sm); }
.mr-scope .form-check.form-check-lg .form-check-label { font-size: 1rem; }
.mr-scope .form-check-input:checked { background-color: var(--maristas-brand); border-color: var(--maristas-brand); }
.mr-scope .form-check-input:focus { box-shadow: var(--maristas-focus-ring); border-color: var(--maristas-accent); }
.mr-scope .form-range::-webkit-slider-thumb { background: var(--maristas-brand); }


/* ---------- Interruptores (switch): normal, sm y lg ---------- */
.mr-scope .form-switch { --mr-sw-w: 2.75rem; --mr-sw-h: 1.5rem; padding-left: 0; min-height: var(--mr-sw-h); display: flex; align-items: center; gap: .75rem; }
.mr-scope .form-switch .form-check-input {
    width: var(--mr-sw-w); height: var(--mr-sw-h); margin: 0; float: none; flex: none;
    border-radius: 999px; cursor: pointer; background-color: var(--maristas-line-strong); border-color: var(--maristas-line-strong);
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); background-size: contain; background-position: left center; background-repeat: no-repeat;
    transition: background-color .15s, background-position .15s;
}
.mr-scope .form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); border-color: var(--maristas-accent); box-shadow: var(--maristas-focus-ring); }
.mr-scope .form-switch .form-check-input:checked { background-color: var(--maristas-brand); border-color: var(--maristas-brand); background-position: right center; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.mr-scope .form-switch .form-check-input:disabled { opacity: var(--maristas-disabled-opacity); cursor: not-allowed; }
.mr-scope .form-switch .form-check-label { cursor: pointer; font-size: var(--maristas-control-text); margin: 0; }
.mr-scope .form-switch.form-switch-sm { --mr-sw-w: 2.1rem; --mr-sw-h: 1.15rem; }
.mr-scope .form-switch.form-switch-sm .form-check-label { font-size: var(--maristas-text-sm); }
.mr-scope .form-switch.form-switch-lg { --mr-sw-w: 3.5rem; --mr-sw-h: 1.9rem; }
.mr-scope .form-switch.form-switch-lg .form-check-label { font-size: 1rem; }
@media (prefers-reduced-motion: reduce) { .mr-scope .form-switch .form-check-input { transition: none; } }

/* ---------- Tarjetas y KPI ---------- */
.mr-card-flat { box-shadow: none !important; border: 1px solid var(--maristas-line) !important; }
.mr-card-accent { border-left: 4px solid var(--maristas-brand) !important; }
/* Dentro de una fila de la cuadrícula todas las tarjetas miden lo mismo */
.mr-stat { padding: 1.1rem 1.25rem; }
.row > * > .mr-stat { height: 100%; }
.mr-stat-label { font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-stat-value { font-size: var(--maristas-text-xl); font-weight: 700; line-height: 1.15; margin: .15rem 0; font-variant-numeric: tabular-nums; overflow-wrap: normal; }
.mr-stat-delta { font-size: var(--maristas-text-xs); font-weight: 600; }
.mr-stat-delta.is-up { color: var(--maristas-success); }
.mr-stat-delta.is-down { color: var(--maristas-danger); }
/* Con ícono: si la tarjeta es angosta, el ícono pasa arriba en vez de apretar el valor */
.mr-stat-with-icon { display: flex; flex-flow: row wrap; align-items: center; align-content: flex-start; gap: .75rem .9rem; }
.mr-stat-body { flex: 1 1 5.5rem; min-width: 0; }
.mr-stat-hint { font-size: var(--maristas-text-xs); color: var(--maristas-muted); }
/* Distribución: barra segmentada y leyenda con punto de color */
.mr-seg { display: flex; height: .6rem; border-radius: 999px; overflow: hidden; background: var(--maristas-soft); gap: 2px; }
.mr-seg > span { display: block; min-width: 3px; }
.mr-dot { display: inline-block; width: .6rem; height: .6rem; border-radius: 50%; flex: none; background: var(--maristas-muted); }
.mr-tone-success { background: var(--maristas-success); }
.mr-tone-warning { background: var(--maristas-warning); }
.mr-tone-danger  { background: var(--maristas-danger); }
.mr-tone-info    { background: var(--maristas-info); }
.mr-tone-brand   { background: var(--maristas-brand); }
.mr-tone-muted   { background: var(--maristas-line); }
.mr-legend { list-style: none; margin: 1rem 0 0; padding: 0; display: grid; gap: .55rem; }
.mr-legend a, .mr-legend li > div { display: flex; align-items: center; gap: .55rem; color: var(--maristas-ink); text-decoration: none; font-size: var(--maristas-text-base); }
.mr-legend a:hover { color: var(--maristas-brand); }
.mr-legend .mr-legend-value { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }

/* ---------- Avatares ---------- */
.mr-av { display: inline-grid; place-items: center; line-height: 1; padding-top: 1px; box-sizing: border-box; border-radius: 50%; font-weight: 700; flex: none; color: #fff; background: linear-gradient(135deg, var(--maristas-brand), var(--maristas-accent)); }
.mr-av-sm { width: 32px; height: 32px; font-size: var(--maristas-text-xs); }
.mr-av-md { width: 44px; height: 44px; font-size: var(--maristas-text-md); }
.mr-av-lg { width: 64px; height: 64px; font-size: 1.35rem; }
.mr-av-soft { background: var(--maristas-brand-soft); color: var(--maristas-brand); }
.mr-av-stack { display: inline-flex; }
.mr-av-stack .mr-av + .mr-av { margin-left: -10px; box-shadow: 0 0 0 2px var(--maristas-surface); }

/* ---------- Reglas de uso (sí / no) ---------- */
.mr-rule { border-radius: var(--maristas-radius-md); padding: .85rem 1rem; background: var(--maristas-surface); border: 1px solid var(--maristas-line); border-top-width: 3px; font-size: var(--maristas-text-sm); height: 100%; }
.mr-rule-do { border-top-color: var(--maristas-success); }
.mr-rule-dont { border-top-color: var(--maristas-danger); }
.mr-rule strong { display: block; margin-bottom: .25rem; }
.mr-rule-do strong { color: var(--maristas-success); }
.mr-rule-dont strong { color: var(--maristas-danger); }

/* ---------- Íconos ---------- */
.mr-icons { display: grid; grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); gap: .5rem; }
.mr-icon-tile { display: flex; flex-direction: column; align-items: center; gap: .35rem; padding: .85rem .5rem; border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); background: var(--maristas-surface); color: var(--maristas-ink); font-size: var(--maristas-text-xs); cursor: pointer; text-align: center; }
.mr-icon-tile i { font-size: 1.4rem; color: var(--maristas-brand); }
.mr-icon-tile:hover { background: var(--maristas-hover); }

/* ---------- Documentación del kit (/ui-kit) ---------- */
.mr-doc-nav { position: sticky; top: 1.5rem; max-height: calc(100vh - 3rem); overflow-y: auto; display: flex; flex-direction: column; gap: .15rem; padding-right: .25rem; scrollbar-width: thin; }
.mr-doc-nav a { padding: .35rem .75rem; border-radius: var(--maristas-radius-sm); color: var(--maristas-muted); text-decoration: none; font-size: var(--maristas-text-sm); }
.mr-doc-nav a:hover { background: var(--maristas-hover); color: var(--maristas-ink); }
.mr-doc-nav a.is-active { background: var(--maristas-brand-soft); color: var(--maristas-brand); font-weight: 600; }
.mr-doc-section { scroll-margin-top: 1.5rem; }
/* En el kit el salto a una sección es directo: la animación de Bootstrap recorre miles de píxeles y desorienta */
:root:has(.mr-doc-nav) { scroll-behavior: auto; }
.mr-doc-section > h2 { font-size: var(--maristas-text-lg); font-weight: 700; margin-bottom: .25rem; }
.mr-doc-section > .lead-text { color: var(--maristas-muted); margin-bottom: 1.25rem; max-width: 70ch; }
.mr-example-title { font-weight: 600; margin-bottom: .5rem; }
.mr-example-preview { background: var(--maristas-surface); border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); padding: 1.25rem; display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.mr-example-preview.is-block { display: block; }
.mr-example-code summary { cursor: pointer; font-size: var(--maristas-text-sm); color: var(--maristas-accent); padding: .5rem 0; }
.mr-example-code pre { background: #101828; color: #e5eaf5; border-radius: var(--maristas-radius-md); padding: 1rem; font-size: var(--maristas-text-sm); overflow-x: auto; margin: 0; }
.mr-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .75rem; }
.mr-swatch { border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); overflow: hidden; background: var(--maristas-surface); }
.mr-swatch-color { height: 56px; }
.mr-swatch-meta { padding: .5rem .65rem; font-size: var(--maristas-text-xs); }
.mr-swatch-meta code { display: block; color: var(--maristas-ink); font-size: var(--maristas-text-xs); }
.mr-type-row { display: flex; align-items: baseline; gap: 1.25rem; padding: .6rem 0; border-bottom: 1px solid var(--maristas-line); }
.mr-type-row:last-child { border-bottom: 0; }
.mr-type-row code { width: 150px; flex: none; font-size: var(--maristas-text-xs); color: var(--maristas-muted); }

/* ---------- Barra de navegación principal ---------- */
.mr-topbar { background: var(--maristas-brand); color: #fff; border-radius: var(--maristas-radius-md); }
.mr-topbar-main { display: flex; align-items: center; gap: .75rem; padding: .6rem 1rem; }
.mr-topbar-brand { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 500; font-size: var(--maristas-text-md); text-decoration: none; }
.mr-topbar-brand:hover { color: #fff; }
.mr-topbar-tools { margin-left: auto; display: flex; align-items: center; gap: .35rem; }
.mr-topbar-toggler { display: none; background: transparent; border: 0; color: #fff; font-size: 1.5rem; line-height: 1; padding: .15rem .4rem; border-radius: var(--maristas-radius-sm); }
.mr-topbar-toggler:hover { background: rgba(255,255,255,.12); }
.mr-topbar-btn { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap); background: transparent; border: 0; color: #fff; border-radius: var(--maristas-radius-sm); padding: .4rem .6rem; font-size: var(--maristas-text-sm); font-weight: 500; position: relative; }
.mr-topbar-btn:hover, .mr-topbar-btn.show { background: rgba(255,255,255,.14); color: #fff; }
.mr-topbar-btn i { font-size: 1.15rem; }
.mr-topbar-btn::after { display: none; }
.mr-topbar-btn:has(.mr-topbar-count) { padding: .4rem .75rem; }
.mr-topbar-count { position: absolute; top: -.05rem; right: -.1rem; min-width: .9rem; height: .9rem; padding: 0 .25rem; border-radius: 999px; background: var(--maristas-danger); color: #fff; font-size: .62rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; border: 2px solid var(--maristas-brand); box-sizing: content-box; }
.mr-topbar-inst { max-width: 24rem; }
.mr-topbar-inst span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-topbar-nav { background: var(--maristas-brand-strong); border-radius: 0 0 var(--maristas-radius-md) var(--maristas-radius-md); padding: 0 .75rem; }
.mr-topbar-nav ul { display: flex; flex-wrap: wrap; gap: .15rem; list-style: none; margin: 0; padding: 0; }
.mr-topbar-link { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap); color: rgba(255,255,255,.78); padding: .7rem .8rem; font-size: var(--maristas-text-sm); font-weight: 500; text-decoration: none; background: transparent; border: 0; border-bottom: 2px solid transparent; border-radius: 0; }
.mr-topbar-link:hover, .mr-topbar-link.show { color: #fff; background: rgba(255,255,255,.08); }
.mr-topbar-link.is-active { color: #fff; font-weight: 600; border-bottom-color: #fff; }
.mr-topbar-link.dropdown-toggle::after { border-width: .28em .28em 0; margin-left: .15rem; }
/* Los menús de la barra usan el mismo menú que el resto del kit (.dropdown-menu / .dropdown-item); aquí solo cambia su posición. */
.mr-scope .mr-topbar .dropdown-menu { margin-top: .35rem; min-width: 14rem; }
.mr-scope .dropdown-item:active { background: var(--maristas-brand-soft); color: var(--maristas-brand); }
.mr-menu-head { padding: .5rem .75rem .6rem; border-bottom: 1px solid var(--maristas-line); margin-bottom: .35rem; }
.mr-menu-head strong { display: block; font-size: var(--maristas-text-sm); color: var(--maristas-ink); }
.mr-menu-head span { font-size: var(--maristas-text-xs); color: var(--maristas-muted); }
.mr-notif { display: flex; gap: .65rem; padding: .6rem .75rem; border-radius: var(--maristas-radius-sm); color: var(--maristas-ink); text-decoration: none; font-size: var(--maristas-text-sm); }
.mr-notif:hover { background: var(--maristas-soft); color: var(--maristas-ink); }
.mr-notif.is-new { background: var(--maristas-brand-soft); }
.mr-notif .mr-notif-time { display: block; font-size: var(--maristas-text-2xs); color: var(--maristas-muted); margin-top: .1rem; }
.mr-topbar-panel { width: 22rem; max-width: calc(100vw - 2rem); }
@media (max-width: 991.98px) {
    .mr-topbar-toggler { display: inline-flex; }
    .mr-topbar-inst-label { display: none; }
    .mr-topbar-user-name { display: none; }
    .mr-topbar-nav { display: none; }
    .mr-topbar-nav.is-open { display: block; padding: .5rem; }
    .mr-topbar-nav ul { flex-direction: column; }
    .mr-topbar-link { width: 100%; padding: .65rem .75rem; border-bottom: 0; border-radius: var(--maristas-radius-sm); }
    .mr-topbar-link.is-active { background: rgba(255,255,255,.14); }
    .mr-scope .mr-topbar-nav .dropdown-menu { position: static !important; transform: none !important; width: 100%; box-shadow: none; margin: .15rem 0 .35rem; }
}

.mr-scroll-menu { max-height: 20rem; overflow-y: auto; }
button.mr-notif { width: 100%; border: 0; background: transparent; }
.mr-notif-icon i { font-size: 1rem; }
.mr-notif-info { background: var(--maristas-info-soft); color: var(--maristas-info); }
.mr-notif-success { background: var(--maristas-success-soft); color: var(--maristas-success); }
.mr-notif-neutral { background: var(--maristas-soft); color: var(--maristas-muted); }
.mr-notif-dot { width: .5rem; height: .5rem; border-radius: 50%; background: var(--maristas-accent); flex: none; align-self: center; }

@keyframes mr-spin { to { transform: rotate(360deg); } }
.mr-spin { display: inline-block; animation: mr-spin .8s linear infinite; }

/* ---------- Línea de tiempo agrupada por día ---------- */
.mr-day { display: flex; align-items: center; gap: .75rem; margin: 1.4rem 0 .5rem; font-size: var(--maristas-text-xs); font-weight: 600; color: var(--maristas-muted); }
.mr-day::after { content: ''; flex: 1; height: 1px; background: var(--maristas-line); }
.mr-tl { list-style: none; margin: 0; padding: 0; position: relative; }
.mr-tl::before { content: ''; position: absolute; left: 15px; top: 1rem; bottom: 1rem; width: 2px; background: var(--maristas-line); }
.mr-tl-item { position: relative; display: flex; gap: .75rem; padding: .45rem 0; align-items: flex-start; }
.mr-tl-dot { width: 32px; height: 32px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: var(--maristas-text-md); box-shadow: 0 0 0 4px var(--maristas-surface); position: relative; }
.mr-tl-main { flex: 1; min-width: 0; padding-top: .2rem; }
.mr-tl-line { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; font-size: var(--maristas-text-base); min-height: 1.5rem; }
.mr-tl-time { margin-left: auto; font-size: var(--maristas-text-xs); color: var(--maristas-muted); white-space: nowrap; }
.mr-tl-quote { margin-top: .2rem; color: var(--maristas-ink-soft); font-size: var(--maristas-text-sm); overflow-wrap: anywhere; }
.mr-tl-note { margin-top: .35rem; padding: .65rem .85rem; background: var(--maristas-soft); border-radius: var(--maristas-radius-md); color: var(--maristas-ink); font-size: var(--maristas-text-base); overflow-wrap: anywhere; }
.mr-filter-count { margin-left: .4rem; opacity: .7; font-weight: 500; }
.mr-filter:focus-visible { outline: 2px solid var(--maristas-accent); outline-offset: 2px; }
.mr-filter i { margin-right: var(--maristas-icon-gap-sm); }
/* Chips de urgencia: llevan el color del tono desde el inicio para que se lean como accionables. */
.mr-filter-danger  { background: var(--maristas-danger-soft);  color: var(--maristas-danger);  border: 1px solid var(--maristas-danger); }
.mr-filter-warning { background: var(--maristas-warning-soft); color: var(--maristas-warning); border: 1px solid var(--maristas-warning); }
.mr-filter-danger:hover  { background: var(--maristas-danger);  color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--maristas-danger) 30%, transparent); }
.mr-filter-warning:hover { background: var(--maristas-warning); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--maristas-warning) 30%, transparent); }
.mr-filter-danger.is-active  { background: var(--maristas-danger);  color: #fff; }
.mr-filter-warning.is-active { background: var(--maristas-warning); color: #fff; }
.mr-tl-author { display: inline-block; max-width: 14rem; overflow: hidden; text-overflow: ellipsis; vertical-align: bottom; }

/* =====================================================================
   Documentación: barra superior, índice, contenido y "en esta página"
   ===================================================================== */
.mr-docs { background: var(--maristas-canvas); }
.mr-docbar { position: sticky; top: 0; z-index: 1040; height: 60px; display: flex; align-items: center; gap: 1rem; padding: 0 1.25rem; background: var(--maristas-brand-strong); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.08); }
.mr-docbar-brand { display: inline-flex; align-items: center; gap: .7rem; color: #fff; text-decoration: none; }
.mr-docbar-brand img { height: 30px; width: auto; }
.mr-docbar-tag { padding: .15rem .55rem; border: 1px solid rgba(255,255,255,.35); border-radius: 999px; font-size: var(--maristas-text-2xs); letter-spacing: .06em; text-transform: uppercase; font-weight: 600; }
.mr-docbar-menu { display: none; background: transparent; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; padding: .2rem .4rem; border-radius: var(--maristas-radius-sm); }
.mr-docbar-search { position: relative; margin-left: auto; width: 20rem; max-width: 40vw; display: flex; align-items: center; gap: .5rem; height: 36px; padding: 0 2.6rem 0 2.2rem; border-radius: var(--maristas-radius-md); border: 1px solid rgba(255,255,255,.18); background: rgba(255,255,255,.08); color: rgba(255,255,255,.6); font-size: var(--maristas-text-sm); text-align: left; cursor: pointer; transition: background .15s, border-color .15s; }
.mr-docbar-search:hover { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.4); color: #fff; }
.mr-docbar-search span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mr-docbar-search i { position: absolute; left: .75rem; top: 50%; transform: translateY(-50%); color: rgba(255,255,255,.6); }
.mr-docbar-search kbd { position: absolute; right: .55rem; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,.14); color: rgba(255,255,255,.8); font-size: var(--maristas-text-2xs); padding: .05rem .4rem; border-radius: var(--maristas-radius-xs); }
.mr-docbar-version { font-size: var(--maristas-text-xs); color: rgba(255,255,255,.7); }

.mr-doclayout { display: grid; grid-template-columns: 17rem minmax(0, 1fr) 15rem; gap: 2rem; max-width: 1500px; margin: 0 auto; padding: 0 1.5rem; }
.mr-docside { position: sticky; top: 60px; align-self: start; height: calc(100vh - 60px); overflow-y: auto; padding: 1.5rem 0 2rem; border-right: 1px solid var(--maristas-line); padding-right: 1rem; }
.mr-docmain { min-width: 0; padding: 2rem 0 4rem; max-width: 56rem; transition: opacity .12s ease; }
.mr-doctoc { position: sticky; top: 60px; align-self: start; padding: 2rem 0; }
.mr-doctoc-inner { border-left: 1px solid var(--maristas-line); padding-left: 1rem; }
.mr-doctoc nav { display: flex; flex-direction: column; gap: .1rem; margin-top: .5rem; max-height: calc(100vh - 12rem); overflow-y: auto; }
.mr-doctoc nav a { color: var(--maristas-muted); text-decoration: none; font-size: var(--maristas-text-sm); padding: .25rem 0; line-height: 1.35; }
.mr-doctoc nav a:hover { color: var(--maristas-brand); }
.mr-doctoc nav a.is-active { color: var(--maristas-brand); font-weight: 600; }
@media (max-width: 1199.98px) { .mr-doclayout { grid-template-columns: 17rem minmax(0, 1fr); } }
@media (max-width: 991.98px) {
    .mr-doclayout { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .mr-docbar-menu { display: inline-flex; }
    .mr-docbar-search { max-width: 50vw; }
    .mr-docbar-version { display: none; }
}

.mr-docnav { display: flex; flex-direction: column; gap: 1.1rem; }
.mr-docnav-group { display: flex; flex-direction: column; gap: .1rem; }
.mr-docnav-group .mr-caption { padding: 0 .75rem; margin-bottom: .2rem; text-transform: uppercase; letter-spacing: .06em; font-size: var(--maristas-text-2xs); font-weight: 700; color: var(--maristas-muted); }
.mr-docnav a { padding: .38rem .75rem; border-radius: var(--maristas-radius-sm); color: var(--maristas-ink); text-decoration: none; font-size: var(--maristas-text-sm); }
.mr-docnav a:hover { background: var(--maristas-hover); color: var(--maristas-ink); }
.mr-docnav a.is-active { background: var(--maristas-brand-soft); color: var(--maristas-brand); font-weight: 600; }
.mr-docnav [hidden] { display: none !important; }

.mr-pagehead { margin-bottom: 1.75rem; }
.mr-crumbs { display: flex; align-items: center; gap: .15rem; font-size: var(--maristas-text-xs); color: var(--maristas-muted); margin-bottom: .5rem; }
.mr-pagetitle { font-size: 2rem; font-weight: 700; letter-spacing: -.01em; margin: 0 0 .5rem; }
.mr-pagelead { font-size: 1rem; color: var(--maristas-muted); max-width: 62ch; margin: 0; }
.mr-pager { display: flex; justify-content: space-between; gap: 1rem; margin-top: 2.5rem; padding-top: 1.5rem; border-top: 1px solid var(--maristas-line); }
.mr-pager-link { display: flex; flex-direction: column; gap: .15rem; min-width: 12rem; padding: .85rem 1.1rem; border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); background: var(--maristas-surface); text-decoration: none; color: var(--maristas-ink); }
.mr-pager-link:hover { border-color: var(--maristas-accent); }
.mr-pager-link strong { font-size: var(--maristas-text-base); color: var(--maristas-brand); }
.mr-pager-link.is-next { text-align: right; margin-left: auto; }
.mr-tile { display: flex; align-items: center; gap: .9rem; padding: 1rem 1.1rem; border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); background: var(--maristas-surface); text-decoration: none; color: var(--maristas-ink); transition: border-color .15s, box-shadow .15s; }
.mr-tile:hover { border-color: var(--maristas-accent); box-shadow: var(--maristas-shadow-card); color: var(--maristas-ink); }
.mr-tile-icon { width: 42px; height: 42px; border-radius: var(--maristas-radius-md); flex: none; display: grid; place-items: center; font-size: 1.3rem; background: var(--maristas-brand-soft); color: var(--maristas-brand); }

/* Ejemplos con pestañas Vista previa / Código */
.mr-example { margin-bottom: 2rem; scroll-margin-top: 80px; }
.mr-example-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: .5rem; }
.mr-example-head .mr-example-title { margin: 0; }
.mr-example-tabs { display: inline-flex; background: var(--maristas-soft); border-radius: var(--maristas-radius-sm); padding: 2px; }
.mr-example-tabs button { border: 0; background: transparent; padding: .22rem .7rem; font-size: var(--maristas-text-xs); font-weight: 600; color: var(--maristas-muted); border-radius: var(--maristas-radius-xs); }
.mr-example-tabs button.is-active { background: var(--maristas-surface); color: var(--maristas-brand); box-shadow: var(--maristas-shadow-sm); }
.mr-example-codebox { position: relative; border-radius: var(--maristas-radius-md); background: #0f1b33; }
.mr-example-codebox pre { color: #d6e2ff; margin: 0; padding: 1rem 1.1rem; overflow: auto; max-height: 26rem; }
.mr-example-codebox code { color: #d6e2ff; font-size: var(--maristas-text-xs); background: none; }
.mr-example-codebox[hidden] { display: none; }
.mr-copy { position: absolute; top: .6rem; right: .6rem; display: inline-flex; align-items: center; gap: var(--maristas-icon-gap-sm); border: 0; border-radius: var(--maristas-radius-sm); padding: .25rem .6rem; font-size: var(--maristas-text-2xs); font-weight: 600; background: rgba(255,255,255,.12); color: #d6e2ff; }
.mr-copy:hover { background: rgba(255,255,255,.22); }

/* Introducción: plano arquitectónico (blueprint) con el logo */
.mr-blueprint { position: relative; overflow: hidden; border-radius: var(--maristas-radius-lg); min-height: 21rem; display: grid; place-items: center; padding: 1rem; color: rgba(255,255,255,.75);
    background-color: #0a3d78;
    background-image:
        linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px),
        linear-gradient(rgba(255,255,255,.15) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.15) 1px, transparent 1px),
        radial-gradient(ellipse at center, rgba(47,111,237,.35), transparent 65%);
    background-size: 24px 24px, 24px 24px, 120px 120px, 120px 120px, 100% 100%;
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), var(--maristas-shadow-card); }
.mr-blueprint-marks { position: absolute; inset: 0; width: 100%; height: 100%; }
.mr-blueprint-figure { position: relative; height: 13rem; aspect-ratio: 1; margin: 1rem 2.5rem 2.5rem 0; outline: 1px dashed rgba(255,255,255,.4); outline-offset: 0; }
.mr-blueprint-logo { width: 100%; height: 100%; display: block; }
.mr-dim { position: absolute; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,.85); }
.mr-dim b { padding: .05rem .4rem; background: #0a3d78; font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; position: relative; }
.mr-dim-h { left: 0; right: 0; bottom: -1.6rem; height: 0; border-top: 1px solid currentColor; }
.mr-dim-h::before, .mr-dim-h::after { content: ''; position: absolute; top: -6px; height: 12px; border-left: 1px solid currentColor; }
.mr-dim-h::before { left: 0; } .mr-dim-h::after { right: 0; }
.mr-dim-v { top: 0; bottom: 0; right: -1.6rem; width: 0; border-left: 1px solid currentColor; }
.mr-dim-v::before, .mr-dim-v::after { content: ''; position: absolute; left: -6px; width: 12px; border-top: 1px solid currentColor; }
.mr-dim-v::before { top: 0; } .mr-dim-v::after { bottom: 0; }
.mr-dim-v b { transform: rotate(-90deg); white-space: nowrap; }
.mr-blueprint-label { position: absolute; transform: translate(-50%, -50%); padding: .05rem .4rem; background: #0a3d78; font: 600 .68rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .06em; color: rgba(255,255,255,.85); }
.mr-blueprint-title { position: absolute; right: 1.25rem; bottom: 1.1rem; display: flex; border: 1px solid rgba(255,255,255,.55); background: rgba(10,61,120,.85); }
.mr-blueprint-title > div { padding: .3rem .75rem; display: flex; flex-direction: column; border-right: 1px solid rgba(255,255,255,.35); }
.mr-blueprint-title > div:last-child { border-right: 0; }
.mr-blueprint-title span { font: 500 .6rem/1.2 ui-monospace, Menlo, monospace; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.6); }
.mr-blueprint-title strong { font: 600 .78rem/1.3 ui-monospace, Menlo, monospace; color: #fff; }
@media (max-width: 575.98px) { .mr-blueprint { min-height: 15rem; } .mr-blueprint-label { display: none; } .mr-blueprint-title strong { font-size: var(--maristas-text-2xs); } }

/* Tablas de datos */
.mr-dt-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .75rem; }
.mr-dt-search { position: relative; flex: 1 1 14rem; max-width: 22rem; }
.mr-dt-search i { position: absolute; left: .7rem; top: 50%; transform: translateY(-50%); color: var(--maristas-muted); pointer-events: none; }
.mr-scope .mr-dt-search input.form-control { padding-left: 2.1rem; }
.mr-dt td, .mr-dt th { white-space: nowrap; }
.mr-dt-filter { width: auto; }
.mr-dt-bulk { display: flex; align-items: center; gap: .6rem; margin-left: auto; padding: .25rem .5rem .25rem .8rem; background: var(--maristas-brand-soft); border-radius: var(--maristas-radius-md); font-size: var(--maristas-text-sm); color: var(--maristas-brand); }
.mr-dt-bulk[hidden] { display: none; }
.mr-dt-footer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-top: .75rem; }
.mr-dt-toolbar-end { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-left: auto; }
.mr-dt-panel { margin-bottom: .75rem; padding: 1rem; background: var(--maristas-soft); border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); }
.mr-dt-footer .pagination { margin: 0; }
.mr-dt-footer nav { display: flex; }
.mr-dt th[data-mr-sort] { cursor: pointer; user-select: none; white-space: nowrap; }
.mr-dt th[data-mr-sort]::after { content: '\21C5'; margin-left: .35rem; font-size: var(--maristas-text-xs); opacity: .35; }
.mr-dt th[aria-sort="ascending"]::after { content: '\2191'; opacity: 1; color: var(--maristas-brand); }
.mr-dt th[aria-sort="descending"]::after { content: '\2193'; opacity: 1; color: var(--maristas-brand); }
.mr-dt tr[hidden] { display: none; }
/* Fila resaltada por un conflicto o error */
.mr-scope .table > tbody > tr.mr-row-danger > * { background-color: var(--maristas-danger-soft); }
/* Barra de acciones fija al pie de la pantalla mientras haya algo seleccionado */
.mr-action-bar { position: sticky; bottom: 0; z-index: 1020; display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-top: 1rem; padding: .85rem 1.25rem; background: var(--maristas-surface); border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); box-shadow: var(--maristas-shadow-up); }

/* Etiquetas, carga de archivos y pasos */
.mr-tags { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; min-height: var(--maristas-control-h); padding: .3rem .5rem; border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); background: var(--maristas-surface); cursor: text; }
.mr-tags:focus-within { border-color: var(--maristas-accent); box-shadow: var(--maristas-focus-ring); }
.mr-tags input[type="text"] { flex: 1; min-width: 6rem; border: 0; outline: none; background: transparent; font-size: var(--maristas-control-text); padding: .15rem; }
.mr-tag { display: inline-flex; align-items: center; gap: var(--maristas-icon-gap-sm); padding: .15rem .3rem .15rem .65rem; border-radius: 999px; background: var(--maristas-brand-soft); color: var(--maristas-brand); font-size: var(--maristas-text-sm); font-weight: 600; }
.mr-tag button { border: 0; background: transparent; color: inherit; line-height: 1; font-size: 1rem; width: 1.2rem; height: 1.2rem; border-radius: 50%; padding: 0; }
.mr-tag button:hover { background: color-mix(in srgb, var(--maristas-brand) 15%, transparent); }
.mr-multi .dropdown-toggle::after { display: none; }
.mr-multi-options { max-height: 15rem; overflow-y: auto; }
.mr-multi-options label[hidden] { display: none !important; }
.mr-multi-chips { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .5rem; }
.mr-multi-chips:empty { display: none; }
.mr-dropzone { display: flex; flex-direction: column; align-items: center; gap: .25rem; padding: 2rem 1rem; border: 2px dashed var(--maristas-line-strong); border-radius: var(--maristas-radius-md); background: var(--maristas-soft); cursor: pointer; text-align: center; transition: border-color .15s, background .15s; }
.mr-dropzone i { font-size: 2rem; color: var(--maristas-accent); }
.mr-dropzone:hover, .mr-dropzone.is-over { border-color: var(--maristas-accent); background: var(--maristas-brand-soft); }
.mr-files { list-style: none; margin: .75rem 0 0; padding: 0; display: flex; flex-direction: column; gap: .5rem; }
.mr-file { display: flex; align-items: center; gap: .75rem; padding: .65rem .85rem; border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-md); background: var(--maristas-surface); font-size: var(--maristas-text-sm); }
.mr-file > i { font-size: 1.4rem; color: var(--maristas-muted); }
.mr-stepper { list-style: none; margin: 0; padding: 0; display: flex; gap: .5rem; }
.mr-stepper-item { flex: 1; display: flex; align-items: center; gap: .6rem; position: relative; font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-stepper:not(.mr-stepper-vertical) .mr-stepper-item:not(:last-child)::after { content: ''; flex: 1; height: 2px; background: var(--maristas-line); margin: 0 .25rem; }
.mr-stepper-dot { width: 28px; height: 28px; border-radius: 50%; flex: none; display: grid; place-items: center; font-size: var(--maristas-text-xs); font-weight: 700; background: var(--maristas-soft); color: var(--maristas-muted); border: 2px solid var(--maristas-line); }
.mr-stepper-label { font-weight: 600; }
/* Paso en el que se puede hacer clic (volver a un paso completado) */
.mr-stepper-link { display: flex; align-items: center; gap: .6rem; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.mr-stepper-link:disabled { cursor: default; }
.mr-stepper-link:focus-visible { outline: 2px solid var(--maristas-accent); outline-offset: 2px; border-radius: 999px; }
.mr-stepper-item.is-done .mr-stepper-dot { background: var(--maristas-brand); border-color: var(--maristas-brand); color: #fff; }
.mr-stepper-item.is-done::after { background: var(--maristas-brand) !important; }
.mr-stepper-item.is-done { color: var(--maristas-ink); }
.mr-stepper-item.is-current { color: var(--maristas-brand); }
.mr-stepper-item.is-current .mr-stepper-dot { background: var(--maristas-surface); border-color: var(--maristas-brand); color: var(--maristas-brand); box-shadow: 0 0 0 4px var(--maristas-brand-soft); }
.mr-stepper-vertical { flex-direction: column; gap: 1.2rem; }
.mr-stepper-vertical .mr-stepper-item { align-items: flex-start; }
.mr-stepper-vertical .mr-stepper-item:not(:last-child)::before { content: ''; position: absolute; left: 13px; top: 32px; bottom: -1.1rem; width: 2px; background: var(--maristas-line); }
.mr-stepper-vertical .mr-stepper-item.is-done:not(:last-child)::before { background: var(--maristas-brand); }
@media (max-width: 575.98px) { .mr-stepper:not(.mr-stepper-vertical) .mr-stepper-label { display: none; } .mr-stepper-item.is-current .mr-stepper-label { display: inline; } }


/* Transición suave al cambiar de página */
.mr-docmain.is-loading { opacity: .55; }

/* Paleta de búsqueda (Cmd/Ctrl + K) */
.mr-palette { position: fixed; inset: 0; z-index: 2000; display: flex; justify-content: center; align-items: flex-start; padding: 12vh 1rem 1rem; background: var(--maristas-overlay); backdrop-filter: blur(3px); }
.mr-palette[hidden] { display: none; }
body.mr-palette-open { overflow: hidden; }
.mr-palette-box { width: 100%; max-width: 40rem; max-height: 70vh; display: flex; flex-direction: column; background: var(--maristas-surface); border-radius: var(--maristas-radius-lg); box-shadow: var(--maristas-shadow-modal); overflow: hidden; }
.mr-palette-head { display: flex; align-items: center; gap: .7rem; padding: .85rem 1rem; border-bottom: 1px solid var(--maristas-line); }
.mr-palette-head > i { font-size: 1.15rem; color: var(--maristas-muted); }
.mr-palette-head input { flex: 1; border: 0; outline: none; background: transparent; font-size: 1rem; color: var(--maristas-ink); min-width: 0; }
.mr-palette kbd { background: var(--maristas-soft); border: 1px solid var(--maristas-line); border-radius: var(--maristas-radius-xs); padding: .05rem .4rem; font: 600 var(--maristas-text-2xs)/1.4 var(--maristas-font); color: var(--maristas-muted); }
.mr-palette-list { overflow-y: auto; padding: .4rem; }
.mr-palette-group { padding: .6rem .7rem .25rem; font-size: var(--maristas-text-2xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--maristas-muted); }
.mr-palette-item { display: flex; align-items: center; gap: .75rem; padding: .55rem .7rem; border-radius: var(--maristas-radius-md); text-decoration: none; color: var(--maristas-ink); }
.mr-palette-item > i { font-size: 1.1rem; color: var(--maristas-muted); flex: none; }
.mr-palette-item kbd { visibility: hidden; margin-left: auto; }
.mr-palette-item.is-active { background: var(--maristas-brand-soft); }
.mr-palette-item.is-active > i { color: var(--maristas-brand); }
.mr-palette-item.is-active kbd { visibility: visible; }
.mr-palette-body { display: flex; flex-direction: column; min-width: 0; }
.mr-palette-body strong { font-size: var(--maristas-text-base); font-weight: 600; }
.mr-palette-body mark { background: transparent; color: var(--maristas-accent); padding: 0; }
.mr-palette-sub { font-size: var(--maristas-text-xs); color: var(--maristas-muted); }
.mr-palette-empty { padding: 2rem 1rem; text-align: center; color: var(--maristas-muted); font-size: var(--maristas-text-base); }
.mr-palette-foot { display: flex; gap: 1rem; padding: .55rem 1rem; border-top: 1px solid var(--maristas-line); background: var(--maristas-soft); font-size: var(--maristas-text-2xs); color: var(--maristas-muted); }
.mr-palette-foot kbd { margin-right: .2rem; }

/* Botón de cerrar flotante dentro de un modal sin encabezado propio */
.mr-scope .modal-content .mr-modal-close { position: absolute; top: 1rem; right: 1rem; z-index: 5; }

/* Pantallas de acceso (login, aviso de privacidad) */
.mr-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--maristas-soft); }
.mr-auth-card { display: grid; grid-template-columns: 1fr; width: 100%; max-width: 980px; background: var(--maristas-surface); border-radius: var(--maristas-radius-lg); box-shadow: var(--maristas-shadow-modal); overflow: hidden; }
.mr-auth-card.is-wide { max-width: 1100px; }
.mr-auth-card.is-narrow { max-width: 460px; }
.mr-auth-brand { display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; padding: 1.5rem; color: #fff; background: linear-gradient(155deg, var(--maristas-brand) 0%, color-mix(in srgb, var(--maristas-brand) 70%, var(--maristas-accent)) 100%); }
.mr-auth-brand img.mr-auth-logo { height: 24px; width: auto; }
.mr-auth-brand p { margin: 0; color: rgba(255, 255, 255, .8); }
.mr-auth-crest { display: none; align-self: center; width: 9rem; height: 9rem; opacity: .95; }
.mr-auth-form { padding: 2rem 1.5rem; display: flex; flex-direction: column; justify-content: center; }
.mr-auth-title { margin: 0 0 .25rem; font-size: 1.5rem; font-weight: 700; }
.mr-auth-lead { margin: 0 0 1.75rem; color: var(--maristas-muted); }
@media (min-width: 576px) { .mr-auth-form { padding: 3rem 3.25rem; } }
@media (min-width: 992px) {
    .mr-auth-card.has-brand { grid-template-columns: 5fr 6fr; }
    .mr-auth-brand { padding: 2.5rem; min-height: 28rem; }
    .mr-auth-crest { display: block; }
}
/* Sin panel lateral, el bloque de marca es una franja arriba */
.mr-auth-card:not(.has-brand) .mr-auth-brand { min-height: 0; flex-direction: row; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; padding: 1.75rem 1.5rem; }
@media (min-width: 576px) { .mr-auth-card:not(.has-brand) .mr-auth-brand { padding: 2rem 3rem; } }
/* Documento largo (por ejemplo el aviso de privacidad) */
.mr-auth-doc { padding: 2rem 1.5rem; max-width: 62rem; }
@media (min-width: 576px) { .mr-auth-doc { padding: 2.5rem 3rem; } }
.mr-auth-doc p, .mr-auth-doc li { line-height: 1.65; }
/* Contraseña con botón para mostrar u ocultar */
.mr-password { position: relative; }
.mr-password .form-control { padding-right: 2.9rem; }
.mr-password-toggle { position: absolute; right: .4rem; top: 50%; transform: translateY(-50%); width: 2rem; height: 2rem; display: grid; place-items: center; border: 0; border-radius: var(--maristas-radius-sm); background: transparent; color: var(--maristas-muted); }
.mr-password-toggle:hover { background: var(--maristas-soft); color: var(--maristas-ink); }
.mr-password-toggle:focus-visible { outline: 2px solid var(--maristas-accent); outline-offset: 2px; }
.mr-auth-badge { width: 3rem; height: 3rem; display: grid; place-items: center; margin-bottom: 1rem; border-radius: var(--maristas-radius-md); background: var(--maristas-brand-soft); color: var(--maristas-brand); font-size: 1.5rem; }

/* Barra de título con migas de pan */
.mr-pagebar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .5rem 1rem; margin: 0 0 1.25rem; }
.mr-pagebar-title { margin: 0; font-size: var(--maristas-text-md); font-weight: 700; letter-spacing: .02em; text-transform: uppercase; }
.mr-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; margin: 0; padding: 0; list-style: none; font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-breadcrumb li + li::before { content: '\203A'; margin: 0 .5rem; opacity: .6; }
.mr-breadcrumb a { color: var(--maristas-muted); text-decoration: none; }
.mr-breadcrumb a:hover { color: var(--maristas-brand); text-decoration: underline; }
.mr-breadcrumb [aria-current] { color: var(--maristas-ink); }
/* Banner de encabezado de pantalla */
.mr-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 1.5rem; margin-bottom: 1.25rem; padding: 1.25rem 1.5rem; color: #fff; border-radius: var(--maristas-radius-lg); background: linear-gradient(105deg, var(--maristas-brand-strong), var(--maristas-brand)); }
.mr-banner-main { display: flex; align-items: center; gap: 1rem; min-width: 0; }
.mr-banner-icon { display: grid; place-items: center; flex: none; width: 2.75rem; height: 2.75rem; border-radius: var(--maristas-radius-md); background: rgb(255 255 255 / .14); font-size: 1.4rem; }
.mr-banner-eyebrow { font-size: var(--maristas-text-2xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.mr-banner-title { margin: 0; font-size: 1.4rem; font-weight: 600; line-height: 1.25; color: inherit; }
.mr-banner-lead { margin: .2rem 0 0; font-size: var(--maristas-text-base); opacity: .85; max-width: 62ch; }
.mr-banner-actions { display: flex; flex-wrap: wrap; gap: .5rem; }
.mr-scope .mr-banner-actions .btn-light { background: #fff; border-color: #fff; color: var(--maristas-brand); }
.mr-scope .mr-banner-actions .btn-light:hover, .mr-scope .mr-banner-actions .btn-light:focus { background: rgb(255 255 255 / .88); border-color: transparent; color: var(--maristas-brand-strong); }
/* Botón fantasma para fondos oscuros (banner, hero): transparente, borde tenue; al hover se aclara. */
.mr-scope .btn-outline-light { background: transparent; border-color: rgb(255 255 255 / .55); color: #fff; }
.mr-scope .btn-outline-light:hover, .mr-scope .btn-outline-light:focus, .mr-scope .btn-outline-light:active { background: rgb(255 255 255 / .16); border-color: #fff; color: #fff; }
@media (max-width: 575.98px) {
    .mr-banner { padding: 1rem; gap: .85rem; }
    .mr-banner-icon { display: none; }
    .mr-banner-title { font-size: 1.2rem; }
    .mr-banner-lead { font-size: var(--maristas-text-sm); }
    .mr-banner-actions { width: 100%; gap: .5rem; }
    .mr-banner-actions .btn { flex: 1 1 7.5rem; justify-content: center; padding: .45rem .6rem; font-size: var(--maristas-text-sm); white-space: nowrap; }
}
/* Tarjeta con portada */
.mr-cover-card { overflow: hidden; transition: transform .2s ease, box-shadow .2s ease; }
.mr-cover-card:hover { transform: translateY(-3px); }
.mr-cover { position: relative; height: 180px; display: grid; place-items: center; background: var(--maristas-soft) center / cover no-repeat; }
.mr-cover-empty { font-size: 2.5rem; color: var(--maristas-muted); }
.mr-cover-tags { position: absolute; top: .9rem; left: .9rem; right: .9rem; display: flex; justify-content: space-between; align-items: flex-start; gap: .5rem; }
.mr-cover-tags .mr-state { box-shadow: var(--maristas-shadow-sm); }
.mr-cover-body { display: flex; flex-direction: column; padding: 1.25rem; }
.mr-cover-title { margin: 0 0 .25rem; font-size: var(--maristas-text-md); font-weight: 600; color: var(--maristas-ink); }
.mr-cover-subtitle { margin-bottom: .75rem; font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-cover-meta { display: flex; flex-direction: column; gap: .4rem; margin: .5rem 0 1rem; font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-cover-meta > * { display: flex; align-items: flex-start; gap: .5rem; }
.mr-cover-text { margin: 0 0 1rem; font-size: var(--maristas-text-sm); line-height: 1.5; color: var(--maristas-muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.mr-cover-actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: auto; padding-top: .5rem; }
.mr-cover-actions > .btn:only-child { flex: 1 1 100%; }
/* Botón para volver arriba */
.mr-backtop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 2.75rem; height: 2.75rem; display: grid; place-items: center; border: 0; border-radius: 50%; background: var(--maristas-brand); color: #fff; font-size: 1.5rem; box-shadow: var(--maristas-shadow-float); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .15s, transform .15s, visibility .15s; }
.mr-backtop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mr-backtop:hover { background: var(--maristas-brand-strong); }
.mr-backtop:focus-visible { outline: 2px solid var(--maristas-accent); outline-offset: 2px; }
/* Margen lateral de página: contenido, barra principal y pie comparten --maristas-gutter para alinearse */
.mr-page { padding-left: var(--maristas-gutter); padding-right: var(--maristas-gutter); }
.mr-topbar-full, .mr-topbar-full .mr-topbar-nav { border-radius: 0; }
.mr-topbar-full .mr-topbar-main, .mr-topbar-full .mr-topbar-nav { padding-left: var(--maristas-gutter); padding-right: var(--maristas-gutter); }
.mr-footer.mr-footer-full { padding-left: var(--maristas-gutter); padding-right: var(--maristas-gutter); }

/* Pie de página */
.mr-footer { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.5rem; border-top: 1px solid var(--maristas-line); font-size: var(--maristas-text-sm); color: var(--maristas-muted); }
.mr-toast-success { color: var(--maristas-success); }
.mr-toast-danger { color: var(--maristas-danger); }
.mr-toast-warning { color: var(--maristas-warning); }
.mr-toast-info { color: var(--maristas-info); }