/* Mentorix Eventos — Design System v0.1
   Fuente única de tokens y componentes base.
   Admin, Door y Público cargan este archivo.
   #B00020 está reservado para rechazo / error crítico (--me-ko, --me-danger).
*/

:root {
    /* Marca */
    --me-brand: #1b3a4b;
    --me-brand-hover: #142c39;
    --me-brand-soft: #e6eef2;

    /* Fondos */
    --me-bg: #f4f4f2;
    --me-surface: #ffffff;
    --me-card: #ffffff;
    --me-header-bg: #ffffff;

    /* Texto */
    --me-text: #1a1a1a;
    --me-text-secondary: #3d3d3d;
    --me-muted: #555555;

    /* Bordes */
    --me-border: #d8d8d4;
    --me-border-strong: #b9b9b3;

    /* Estados */
    --me-ok: #1b4332;
    --me-success: var(--me-ok);
    --me-success-soft: #e7f3ec;
    --me-warn: #b45309;
    --me-warning: var(--me-warn);
    --me-warning-soft: #fff4e5;
    --me-ko: #B00020;
    --me-danger: var(--me-ko);
    --me-danger-soft: #fde8eb;
    --me-info: #1e4d7b;
    --me-info-soft: #e7f0f7;

    /* Acento operativo (Door puede sobreescribir por sector) */
    --me-accent: var(--me-ok);

    /* Radio / sombra */
    --me-radius-sm: 0.25rem;
    --me-radius: 0.45rem;
    --me-radius-lg: 0.75rem;
    --me-shadow: 0 1px 2px rgb(0 0 0 / 7%), 0 4px 12px rgb(0 0 0 / 4%);
    --me-shadow-sm: 0 1px 2px rgb(0 0 0 / 8%);

    /* Espaciado (escala 4px) */
    --me-space-1: 0.25rem;
    --me-space-2: 0.5rem;
    --me-space-3: 0.75rem;
    --me-space-4: 1rem;
    --me-space-5: 1.25rem;
    --me-space-6: 1.5rem;
    --me-space-8: 2rem;
    --me-space-10: 2.5rem;
    --me-space-12: 3rem;

    /* Tipografía */
    --me-font: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, Cantarell, "Noto Sans", sans-serif;
    --me-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    --me-fs-display: 1.85rem;
    --me-fs-h1: 1.5rem;
    --me-fs-h2: 1.2rem;
    --me-fs-h3: 1.05rem;
    --me-fs-body: 1rem;
    --me-fs-small: 0.875rem;
    --me-fs-label: 0.8125rem;
    --me-fs-caption: 0.75rem;
    --me-lh: 1.5;
    --me-fw-regular: 400;
    --me-fw-medium: 550;
    --me-fw-bold: 700;

    /* Controles / contenedores */
    --me-control-h: 2.5rem;
    --me-container-admin: 72rem;
    --me-container-door: 36rem;
    --me-container-public: 28rem;
    --me-container-narrow: 24rem;
    --me-pad-x: 1.25rem;

    /* Motion */
    --me-ease: 0.15s ease;
    --me-focus: 0 0 0 3px rgb(27 58 75 / 28%);
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

html {
    margin: 0;
    padding: 0;
}

body {
    margin: 0;
    padding: 0;
}

body.me-shell {
    font-family: var(--me-font);
    font-size: var(--me-fs-body);
    line-height: var(--me-lh);
    background: var(--me-bg);
    color: var(--me-text);
    min-height: 100vh;
}

img {
    max-width: 100%;
    height: auto;
}

a {
    color: var(--me-brand);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.15em;
}

a:hover {
    color: var(--me-brand-hover);
}

:focus-visible {
    outline: 2px solid var(--me-brand);
    outline-offset: 2px;
}

.me-display {
    font-size: var(--me-fs-display);
    font-weight: var(--me-fw-bold);
    line-height: 1.2;
    letter-spacing: -0.02em;
    margin: 0 0 var(--me-space-3);
}

h1,
.me-h1 {
    font-size: var(--me-fs-h1);
    font-weight: var(--me-fw-bold);
    line-height: 1.25;
    margin: 0 0 var(--me-space-4);
}

h2,
.me-h2 {
    font-size: var(--me-fs-h2);
    font-weight: var(--me-fw-medium);
    line-height: 1.3;
    margin: 1.5rem 0 var(--me-space-3);
}

h3,
.me-h3 {
    font-size: var(--me-fs-h3);
    font-weight: var(--me-fw-medium);
    line-height: 1.35;
    margin: 1.25rem 0 var(--me-space-2);
}

.me-small,
small {
    font-size: var(--me-fs-small);
}

.me-caption {
    font-size: var(--me-fs-caption);
    color: var(--me-muted);
}

.me-muted {
    color: var(--me-muted);
}

.me-container {
    width: 100%;
    margin: 0 auto;
    padding: var(--me-space-6) var(--me-pad-x) var(--me-space-10);
    max-width: var(--me-container-admin);
}

.me-container--admin {
    max-width: var(--me-container-admin);
}

.me-container--door {
    max-width: var(--me-container-door);
}

.me-container--publico {
    max-width: var(--me-container-public);
}

.me-container--narrow {
    max-width: var(--me-container-narrow);
}

.me-section {
    margin: 0 0 var(--me-space-6);
}

.me-card {
    background: var(--me-card);
    border: 1px solid var(--me-border);
    border-radius: var(--me-radius);
    box-shadow: var(--me-shadow-sm);
    padding: var(--me-space-5);
}

.me-card + .me-card {
    margin-top: var(--me-space-4);
}

.me-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--me-space-4);
    padding: var(--me-space-3) var(--me-pad-x);
    background: var(--me-header-bg);
    border-bottom: 1px solid var(--me-border);
}

.me-event-context {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--me-space-2);
    min-width: 0;
    flex: 1 1 12rem;
}

.me-event-context__label {
    font-size: var(--me-fs-caption);
    color: var(--me-muted);
    margin: 0;
}

.me-event-context__nombre {
    font-size: var(--me-fs-small);
    color: var(--me-text);
    min-width: 0;
}

.me-event-context select {
    min-width: 10rem;
    max-width: 18rem;
}

.me-topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--me-space-2);
    color: var(--me-brand);
    font-weight: var(--me-fw-bold);
    letter-spacing: 0.01em;
}

.me-topbar__brand a {
    display: flex;
    align-items: center;
    gap: var(--me-space-2);
    color: inherit;
    text-decoration: none;
}

.me-topbar__meta {
    display: flex;
    align-items: center;
    gap: var(--me-space-3);
    font-size: var(--me-fs-small);
    color: var(--me-muted);
}

.me-logo {
    width: 1.75rem;
    height: 1.75rem;
    display: block;
    flex-shrink: 0;
}

.me-brand-mark {
    display: inline-flex;
    align-items: center;
    gap: var(--me-space-2);
    min-width: 0;
    color: var(--me-brand);
    line-height: 1.15;
}

.me-brand-logo {
    display: block;
    flex-shrink: 0;
    width: auto;
    height: 2.5rem;
    object-fit: contain;
    object-position: center;
}

.me-brand-mark--sm .me-brand-logo {
    height: 1.75rem;
}

.me-brand-mark--md .me-brand-logo {
    height: 2.5rem;
}

.me-brand-mark__text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.me-brand-mark__name {
    font-weight: var(--me-fw-bold);
    letter-spacing: 0.08em;
    text-transform: uppercase;
    font-size: var(--me-fs-small);
}

.me-brand-mark--md .me-brand-mark__name {
    font-size: var(--me-fs-label);
}

.me-brand-mark__sub {
    font-size: var(--me-fs-caption);
    font-weight: var(--me-fw-regular);
    letter-spacing: 0.04em;
    color: var(--me-muted);
}

.me-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.me-nav {
    display: flex;
    flex-wrap: wrap;
    gap: var(--me-space-1) var(--me-space-2);
    padding: var(--me-space-2) var(--me-pad-x);
    background: var(--me-brand);
}

.me-nav__link {
    color: #fff;
    text-decoration: none;
    font-size: var(--me-fs-small);
    font-weight: var(--me-fw-medium);
    padding: var(--me-space-2) var(--me-space-3);
    border-radius: var(--me-radius-sm);
}

.me-nav__link:hover,
.me-nav__link.is-active {
    color: #fff;
    background: rgb(255 255 255 / 14%);
}

.me-button,
.me-shell--admin button,
.me-shell--login button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2.15rem;
    padding: 0.4rem 0.85rem;
    border: 1px solid var(--me-border-strong);
    border-radius: var(--me-radius-sm);
    background: var(--me-surface);
    color: var(--me-text);
    font-family: inherit;
    font-size: var(--me-fs-small);
    font-weight: var(--me-fw-medium);
    line-height: 1.2;
    cursor: pointer;
    text-decoration: none;
    transition: background var(--me-ease), border-color var(--me-ease), color var(--me-ease);
}

.me-button:hover,
.me-shell--admin button:hover,
.me-shell--login button:hover {
    border-color: var(--me-brand);
}

.me-button:disabled,
.me-shell--admin button:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.me-button--primary,
.me-shell--admin .me-button--primary,
.me-shell--login .me-button--primary,
.me-shell--door .me-button--primary {
    background: var(--me-brand);
    border-color: var(--me-brand);
    color: #fff;
}

.me-button--primary:hover,
.me-shell--admin .me-button--primary:hover,
.me-shell--login .me-button--primary:hover,
.me-shell--door .me-button--primary:hover {
    background: var(--me-brand-hover);
    border-color: var(--me-brand-hover);
    color: #fff;
}

.me-button--secondary,
.me-shell--admin .me-button--secondary,
.me-shell--login .me-button--secondary {
    background: var(--me-brand-soft);
    border-color: var(--me-brand);
    color: var(--me-brand);
}

.me-button--danger,
.me-shell--admin .me-button--danger,
.me-shell--login .me-button--danger {
    background: var(--me-danger);
    border-color: var(--me-danger);
    color: #fff;
}

.me-button--danger:hover,
.me-shell--admin .me-button--danger:hover {
    filter: brightness(0.92);
    color: #fff;
}

.me-button--ghost,
.me-shell--admin .me-button--ghost,
.me-shell--login .me-button--ghost {
    background: transparent;
    border-color: transparent;
    color: var(--me-brand);
}

.me-label,
.me-shell--admin label,
.me-shell--login label,
.me-shell--publico label {
    display: block;
    margin: var(--me-space-3) 0 var(--me-space-1);
    font-size: var(--me-fs-label);
    font-weight: var(--me-fw-medium);
    color: var(--me-text-secondary);
}

.me-help {
    display: block;
    margin-top: var(--me-space-1);
    font-size: var(--me-fs-caption);
    color: var(--me-muted);
}

.me-input,
.me-select,
.me-textarea,
.me-shell--admin input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
.me-shell--admin select,
.me-shell--admin textarea,
.me-shell--login input:not([type="hidden"]),
.me-shell--publico input:not([type="hidden"]),
.me-shell--publico select,
.me-shell--publico textarea {
    width: 100%;
    max-width: 24rem;
    min-height: var(--me-control-h);
    padding: 0.45rem 0.65rem;
    border: 1px solid var(--me-border-strong);
    border-radius: var(--me-radius-sm);
    background: var(--me-surface);
    color: var(--me-text);
    font-family: inherit;
    font-size: var(--me-fs-body);
}

.me-textarea,
.me-shell--admin textarea {
    min-height: 6rem;
    resize: vertical;
}

.me-input:focus,
.me-select:focus,
.me-textarea:focus,
.me-shell--admin input:focus,
.me-shell--admin select:focus,
.me-shell--admin textarea:focus,
.me-shell--login input:focus {
    border-color: var(--me-brand);
    box-shadow: var(--me-focus);
    outline: none;
}

.me-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: var(--me-fs-caption);
    font-weight: var(--me-fw-medium);
    letter-spacing: 0.02em;
    background: var(--me-brand-soft);
    color: var(--me-brand);
}

.me-badge--success,
.me-badge--aprobado {
    background: var(--me-success-soft);
    color: var(--me-success);
}

.me-badge--warning,
.me-badge--pendiente {
    background: var(--me-warning-soft);
    color: var(--me-warning);
}

.me-badge--danger,
.me-badge--rechazado {
    background: var(--me-danger-soft);
    color: var(--me-danger);
}

.me-badge--info {
    background: var(--me-info-soft);
    color: var(--me-info);
}

.me-alert {
    padding: var(--me-space-3) var(--me-space-4);
    border-radius: var(--me-radius);
    border: 1px solid var(--me-border);
    margin: 0 0 var(--me-space-4);
}

.me-alert--success,
.ok {
    color: var(--me-success);
}

.me-alert--success {
    background: var(--me-success-soft);
    border-color: #b7d4c2;
}

.me-alert--warning {
    background: var(--me-warning-soft);
    border-color: #efd0a8;
    color: var(--me-warning);
}

.me-alert--danger,
.error,
.me-error {
    color: var(--me-danger);
}

.me-alert--danger {
    background: var(--me-danger-soft);
    border-color: #efc0c7;
}

.me-alert--info {
    background: var(--me-info-soft);
    border-color: #b7cde0;
    color: var(--me-info);
}

.me-table,
.me-shell--admin table,
.me-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: var(--me-space-4) 0;
    font-size: var(--me-fs-small);
}

.me-table th,
.me-table td,
.me-shell--admin th,
.me-shell--admin td,
.me-tabla th,
.me-tabla td {
    border-bottom: 1px solid var(--me-border);
    text-align: left;
    padding: 0.55rem 0.4rem;
    vertical-align: top;
}

.me-table th,
.me-shell--admin th,
.me-tabla th {
    font-size: var(--me-fs-caption);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--me-muted);
    font-weight: var(--me-fw-medium);
}

.me-empty {
    padding: var(--me-space-8) var(--me-space-4);
    text-align: center;
    color: var(--me-muted);
    background: var(--me-surface);
    border: 1px dashed var(--me-border);
    border-radius: var(--me-radius);
}

.me-loading {
    display: inline-block;
    width: 1.1rem;
    height: 1.1rem;
    border: 2px solid var(--me-border);
    border-top-color: var(--me-brand);
    border-radius: 50%;
    animation: me-spin 0.7s linear infinite;
    vertical-align: middle;
}

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

.me-icon {
    display: inline-block;
    width: 1.15rem;
    height: 1.15rem;
    vertical-align: -0.2em;
    background-color: currentColor;
    -webkit-mask: var(--me-icon) center / contain no-repeat;
    mask: var(--me-icon) center / contain no-repeat;
}

.me-icon--check {
    --me-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9.2 16.2 4.8 11.8l-1.4 1.4 5.8 5.8 12-12-1.4-1.4z'/%3E%3C/svg%3E");
}

.me-icon--alert {
    --me-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

.me-icon--info {
    --me-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M11 7h2v2h-2V7zm0 4h2v6h-2v-6zm1-9C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2z'/%3E%3C/svg%3E");
}

.me-icon--user {
    --me-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 12c2.7 0 4.8-2.1 4.8-4.8S14.7 2.4 12 2.4 7.2 4.5 7.2 7.2 9.3 12 12 12zm0 2.4c-3.2 0-9.6 1.6-9.6 4.8V22h19.2v-2.8c0-3.2-6.4-4.8-9.6-4.8z'/%3E%3C/svg%3E");
}

.me-icon--eye {
    --me-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 5C7 5 2.7 8.1 1 12c1.7 3.9 6 7 11 7s9.3-3.1 11-7c-1.7-3.9-6-7-11-7zm0 11.5A4.5 4.5 0 1 1 16.5 12 4.5 4.5 0 0 1 12 16.5zm0-7A2.5 2.5 0 1 0 14.5 12 2.5 2.5 0 0 0 12 9.5z'/%3E%3C/svg%3E");
}

.me-icon--eye-off {
    --me-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M2.1 3.5 3.5 2.1 21.9 20.5 20.5 21.9l-2.4-2.4C16.4 20.4 14.3 21 12 21 7 21 2.7 17.9 1 14c.7-1.6 1.8-3 3.1-4.2L2.1 3.5zM12 7c5 0 9.3 3.1 11 7-.7 1.6-1.8 3-3.1 4.2l-2.2-2.2A4.5 4.5 0 0 0 10 9.3L7.8 7.1C9.1 7 10.5 7 12 7zm0 2.5A2.5 2.5 0 0 1 14.5 12c0 .3 0 .5-.1.7l-3.1-3.1c.2-.1.4-.1.7-.1z'/%3E%3C/svg%3E");
}

.me-password {
    position: relative;
    max-width: 24rem;
}

.me-shell--login .me-password {
    max-width: none;
}

.me-password .me-input {
    padding-right: 2.75rem;
}

.me-password__toggle,
.me-shell--admin .me-password__toggle,
.me-shell--login .me-password__toggle {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.15rem;
    min-width: 2.15rem;
    min-height: 2.15rem;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--me-muted);
    box-shadow: none;
}

.me-password__toggle:hover,
.me-shell--admin .me-password__toggle:hover,
.me-shell--login .me-password__toggle:hover,
.me-password__toggle[aria-pressed="true"] {
    border: 0;
    background: transparent;
    color: var(--me-text);
}

form.inline {
    display: inline;
}

.me-shell--login .me-card {
    max-width: var(--me-container-narrow);
    margin: var(--me-space-12) auto 0;
}

.me-login-brand {
    display: flex;
    align-items: center;
    gap: var(--me-space-2);
    color: var(--me-brand);
    font-weight: var(--me-fw-bold);
    margin-bottom: var(--me-space-3);
}

.me-shell--login .me-input,
.me-shell--login input:not([type="hidden"]) {
    max-width: none;
}

@media (max-width: 40rem) {
    :root {
        --me-pad-x: 1rem;
        --me-fs-display: 1.55rem;
        --me-fs-h1: 1.3rem;
    }

    .me-topbar {
        flex-wrap: wrap;
    }

    .me-nav {
        flex-wrap: wrap;
    }

    .me-container {
        padding-top: var(--me-space-4);
        overflow-x: auto;
    }

    .me-input,
    .me-select,
    .me-textarea,
    .me-shell--admin input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
    .me-shell--admin select,
    .me-shell--admin textarea {
        max-width: none;
    }

    .me-table,
    .me-shell--admin table,
    .me-tabla {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}

.me-color-field {
    display: flex;
    align-items: center;
    gap: var(--me-space-2);
    max-width: 24rem;
}

.me-color-field input[name="color"] {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
}

.me-shell--admin input.me-color-picker[type="color"] {
    width: 2.5rem;
    min-width: 2.5rem;
    max-width: 2.5rem;
    min-height: var(--me-control-h);
    padding: 0.15rem;
    cursor: pointer;
}

.me-color-swatch {
    display: inline-block;
    width: 1.35rem;
    height: 1.35rem;
    border: 1px solid var(--me-border-strong);
    border-radius: var(--me-radius-sm);
    vertical-align: middle;
    margin-right: var(--me-space-2);
}

.me-table-wrap {
    overflow-x: auto;
    margin: var(--me-space-3) 0;
}

.me-usuarios-listado__head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--me-space-4);
    margin-bottom: var(--me-space-4);
}

.me-usuarios-listado__lead {
    max-width: 42rem;
    margin: var(--me-space-2) 0 0;
}

.me-usuario-persona-principal {
    display: block;
    font-weight: var(--me-fw-medium);
}

.me-usuario-persona-sub,
.me-usuario-login {
    font-size: var(--me-fs-small);
    color: var(--me-muted);
}

.me-usuario-login {
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
}

.me-usuario-permisos {
    max-width: 16rem;
    white-space: normal;
    line-height: 1.45;
}

.me-usuario-permisos-sep {
    margin: 0 0.25rem;
    color: var(--me-muted);
}

.me-usuario-seccion__title {
    margin: 0 0 var(--me-space-2);
    font-size: var(--me-fs-h2, 1.15rem);
}

.me-usuario-subseccion {
    margin: var(--me-space-5) 0 var(--me-space-2);
    font-size: var(--me-fs-small);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--me-muted);
}

.me-usuario-dl {
    display: grid;
    gap: var(--me-space-2);
    margin: var(--me-space-4) 0;
}

.me-usuario-dl--inline {
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
}

.me-usuario-dl dt {
    font-size: var(--me-fs-caption);
    color: var(--me-muted);
    margin: 0;
}

.me-usuario-dl dd {
    margin: 0;
    font-weight: var(--me-fw-medium);
}

.me-usuario-form-actions {
    margin-top: var(--me-space-4);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--me-space-3);
}

.me-usuario-eventos .me-table-asignaciones td:first-child {
    white-space: normal;
    min-width: 10rem;
}

@media (max-width: 40rem) {
    .me-table-usuarios {
        min-width: 52rem;
    }
}