/*!
 * ============================================================================
 *  ALTHEROH DESIGN SYSTEM  ·  componentes base
 * ============================================================================
 *  Clases con prefijo .ath-  (no colisionan con Bootstrap/Dashmix).
 *  Consumen exclusivamente los tokens de altheroh-design-system.css.
 *  Realineado con MOVIRAH (2026-08-28): target tactil 44px, radio de control
 *  12px, peso 800-900 en botones/titulos, foco 2px + halo 3px, eyebrows mono.
 * ========================================================================== */

/* ---- base tipografica global (fuentes MOVIRAH en toda la app) ---------- */
body {
    font-family: var(--ath-font-sans);
    letter-spacing: var(--ath-tracking-body);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    font-family: var(--ath-font-head);
    letter-spacing: var(--ath-tracking-tight);
}

/* ---- superficies --------------------------------------------------------- */
.ath-card {
    background: var(--ath-surface-card);
    border: 1px solid var(--ath-border-glow);
    border-radius: var(--ath-radius-lg);
    box-shadow: var(--ath-shadow-glow);
    min-width: 0;
}

.ath-card-pad {
    padding: var(--ath-space-5);
}

/* ---- eyebrow (metadata tecnica en mayusculas, fuente mono) ------------- */
.ath-eyebrow {
    margin: 0;
    font-family: var(--ath-font-mono);
    font-size: var(--ath-fs-eyebrow);
    font-weight: var(--ath-fw-black);
    letter-spacing: var(--ath-tracking-label);
    line-height: 1.25;
    text-transform: uppercase;
    color: var(--ath-primary-ink);
}

.ath-mono {
    font-family: var(--ath-font-mono);
}

/* ---- cabecera de pagina ----------------------------------------------- */
.ath-page-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--ath-space-4);
    flex-wrap: wrap;
    margin-bottom: var(--ath-space-5);
}

    .ath-page-head h1 {
        font-family: var(--ath-font-head);
        font-size: var(--ath-fs-2xl);
        font-weight: var(--ath-fw-heavy);
        letter-spacing: var(--ath-tracking-tight);
        color: var(--ath-text-primary);
        margin: 0;
        line-height: var(--ath-lh-tight);
    }

    .ath-page-head p {
        margin: .375rem 0 0;
        color: var(--ath-text-muted);
        font-size: var(--ath-fs-md);
    }

.ath-head-actions {
    display: flex;
    gap: var(--ath-space-3);
    flex-wrap: wrap;
}

/* ---- titulo de seccion ---------------------------------------------- */
.ath-section-title {
    font-family: var(--ath-font-head);
    font-size: var(--ath-fs-xs);
    font-weight: var(--ath-fw-black);
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ath-primary-ink);
    padding-bottom: var(--ath-space-2);
    margin: 0 0 var(--ath-space-4);
    border-bottom: 1px solid var(--ath-border);
}

/* ==========================================================================
   BOTONES
   Contrato MOVIRAH: min 44x44, radio 12, peso 800-900, hover -1px,
   active +1px, foco visible 2px + halo 3px, disabled con razon del dominio.
   ========================================================================== */
.ath-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--ath-space-2);
    min-height: var(--ath-target);
    min-width: var(--ath-target);
    font-family: var(--ath-font-sans);
    font-weight: var(--ath-fw-black);
    font-size: var(--ath-fs-xs);
    line-height: 1;
    letter-spacing: .01em;
    border-radius: var(--ath-btn-radius);
    padding: .625rem 1rem;
    border: 1px solid var(--ath-border-strong);
    background: transparent;
    color: var(--ath-text-primary);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none;
    transition: filter var(--ath-dur-fast) var(--ath-ease),
                transform var(--ath-dur-fast) var(--ath-ease),
                border-color var(--ath-dur-fast) var(--ath-ease),
                background-color var(--ath-dur-fast) var(--ath-ease),
                box-shadow var(--ath-dur-fast) var(--ath-ease);
}

    .ath-btn:hover:not(:disabled):not([aria-disabled="true"]) {
        transform: translateY(-1px);
        border-color: var(--ath-focus);
    }

    .ath-btn:active:not(:disabled):not([aria-disabled="true"]) {
        transform: translateY(1px);
    }

    .ath-btn:focus-visible {
        outline: 2px solid var(--ath-focus);
        outline-offset: 2px;
        border-color: var(--ath-focus);
        box-shadow: 0 0 0 3px var(--ath-primary-soft);
    }

    .ath-btn:disabled,
    .ath-btn[aria-disabled="true"] {
        cursor: not-allowed;
        filter: saturate(.45);
        opacity: .55;
        transform: none;
    }

    .ath-btn > i {
        font-size: var(--ath-icon);
        line-height: 1;
    }

.ath-btn-primary {
    background: var(--ath-primary);
    border-color: var(--ath-primary);
    color: var(--ath-text-on-primary);
}

    .ath-btn-primary:hover,
    .ath-btn-primary:focus {
        background: var(--ath-primary-hover);
        border-color: var(--ath-primary-hover);
        color: var(--ath-text-on-primary);
    }

.ath-btn-accent {
    background: var(--ath-accent);
    border-color: var(--ath-accent);
    color: #fff;
}

    .ath-btn-accent:hover,
    .ath-btn-accent:focus {
        background: var(--ath-accent-hover);
        border-color: var(--ath-accent-hover);
        color: #fff;
    }

.ath-btn-secondary {
    background: var(--ath-surface-panel);
    color: var(--ath-text-secondary);
    border-color: var(--ath-border-strong);
}

    .ath-btn-secondary:hover,
    .ath-btn-secondary:focus {
        border-color: var(--ath-focus);
        color: var(--ath-text-primary);
    }

.ath-btn-ghost {
    border-color: transparent;
    background: transparent;
    color: var(--ath-text-secondary);
}

    .ath-btn-ghost:hover,
    .ath-btn-ghost:focus {
        background: var(--ath-primary-soft);
        color: var(--ath-text-primary);
    }

.ath-btn-danger {
    border-color: color-mix(in srgb, var(--ath-danger) 55%, transparent);
    color: var(--ath-danger);
    background: color-mix(in srgb, var(--ath-danger) 10%, transparent);
}

    .ath-btn-danger:hover,
    .ath-btn-danger:focus {
        border-color: var(--ath-danger);
        color: var(--ath-danger);
    }

.ath-btn-danger-solid {
    border-color: var(--ath-danger);
    color: #fff;
    background: var(--ath-danger);
}

/* Accion inline en tablas densas: se admite 40px (densidad), no target base. */
.ath-btn-sm {
    min-height: var(--ath-control-compact);
    min-width: 0;
    padding: .375rem .75rem;
    font-size: var(--ath-fs-eyebrow);
    letter-spacing: .04em;
    text-transform: uppercase;
}

.ath-btn-lg {
    min-height: 48px;
    padding: .75rem 1.25rem;
    font-size: var(--ath-fs-sm);
}

.ath-btn-icon {
    width: var(--ath-target);
    min-width: var(--ath-target);
    padding: 0;
}

.ath-btn-wide {
    width: 100%;
}

/* ---- badges / pills de estado (fuente mono, sin punto) -------------- */
.ath-badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    min-height: 22px;
    font-family: var(--ath-font-mono);
    font-size: .5625rem;
    font-weight: var(--ath-fw-black);
    letter-spacing: .05em;
    line-height: 1;
    text-transform: uppercase;
    padding: .25rem .6rem;
    border-radius: var(--ath-radius-pill);
    border: 1px solid currentColor;
    white-space: nowrap;
}

.ath-badge-draft,
.ath-badge-pending {
    color: var(--ath-warning);
    background: var(--ath-warning-bg);
}

.ath-badge-published,
.ath-badge-active,
.ath-badge-confirmed {
    color: var(--ath-success);
    background: var(--ath-success-bg);
}

.ath-badge-review {
    color: var(--ath-info);
    background: var(--ath-info-bg);
}

.ath-badge-closed,
.ath-badge-inactive {
    color: var(--ath-text-muted);
    background: var(--ath-surface-elevated);
    border-color: var(--ath-border-strong);
}

.ath-badge-cancelled {
    color: var(--ath-danger);
    background: var(--ath-danger-bg);
}

/* ---- KPI --------------------------------------------------------- */
.ath-kpi {
    background: var(--ath-surface-card);
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-md);
    box-shadow: var(--ath-shadow-sm);
    padding: 1.125rem 1.125rem 1rem;
    min-width: 0;
}

    .ath-kpi .ath-kpi-top {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: var(--ath-space-3);
    }

    .ath-kpi .ath-kpi-label {
        font-family: var(--ath-font-mono);
        font-size: var(--ath-fs-eyebrow);
        font-weight: var(--ath-fw-black);
        letter-spacing: var(--ath-tracking-label);
        text-transform: uppercase;
        color: var(--ath-text-muted);
    }

    .ath-kpi .ath-kpi-icon {
        width: 32px;
        height: 32px;
        border-radius: var(--ath-radius-sm);
        display: grid;
        place-items: center;
        background: var(--ath-primary-soft);
        color: var(--ath-primary-ink);
        flex: 0 0 auto;
    }

    .ath-kpi .ath-kpi-value {
        font-family: var(--ath-font-head);
        font-size: var(--ath-fs-3xl);
        font-weight: var(--ath-fw-heavy);
        line-height: 1;
        margin: .625rem 0 .25rem;
        color: var(--ath-text-primary);
        font-variant-numeric: tabular-nums;
        letter-spacing: var(--ath-tracking-tight);
    }

    .ath-kpi .ath-kpi-foot {
        font-size: var(--ath-fs-sm);
        color: var(--ath-text-muted);
    }

/* ---- estado vacio -------------------------------------------- */
.ath-empty {
    text-align: center;
    padding: var(--ath-space-10) var(--ath-space-5);
    color: var(--ath-text-muted);
}

    .ath-empty .ath-empty-icon {
        font-size: 2.5rem;
        color: var(--ath-border-strong);
        margin-bottom: var(--ath-space-3);
    }

    .ath-empty h3 {
        font-family: var(--ath-font-head);
        font-size: var(--ath-fs-lg);
        font-weight: var(--ath-fw-bold);
        color: var(--ath-text-secondary);
        margin: 0 0 .25rem;
    }

    .ath-empty p {
        font-size: var(--ath-fs-md);
        margin: 0;
    }

/* ---- formularios: <altheroh-form-section> / <altheroh-field> -------- */
.ath-form-section {
    display: block;
    margin-bottom: var(--ath-space-6);
}

    .ath-form-section:last-child {
        margin-bottom: 0;
    }

.ath-field-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr));
    gap: var(--ath-space-4) var(--ath-space-5);
}

.ath-field {
    display: flex;
    flex-direction: column;
    gap: .375rem;
    min-width: 0;
}

.ath-field-full {
    grid-column: 1 / -1;
}

.ath-field > label {
    font-family: var(--ath-font-sans);
    font-size: var(--ath-fs-xs);
    font-weight: var(--ath-fw-black);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ath-text-secondary);
}

.ath-field-req {
    color: var(--ath-accent);
    font-weight: 800;
    margin-left: .1rem;
}

.ath-field .form-control,
.ath-field .custom-select {
    min-height: var(--ath-target);
    height: var(--ath-target);
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-btn-radius);
    background: var(--ath-surface-input);
    color: var(--ath-text-primary);
    padding: 0 .85rem;
    font-size: var(--ath-fs-md);
    box-shadow: none;
    transition: border-color var(--ath-dur-fast) var(--ath-ease), box-shadow var(--ath-dur-fast) var(--ath-ease);
}

.ath-field textarea.form-control {
    height: auto;
    min-height: 5.5rem;
    padding: .6rem .85rem;
    line-height: var(--ath-lh-normal);
}

.ath-field .form-control:hover {
    border-color: var(--ath-border-strong);
}

.ath-field .form-control:focus {
    outline: 0;
    border-color: var(--ath-focus);
    box-shadow: 0 0 0 3px var(--ath-primary-soft);
}

.ath-field .form-control::placeholder {
    color: var(--ath-text-muted);
}

.ath-field .input-validation-error {
    border-color: var(--ath-danger);
}

    .ath-field .input-validation-error:focus {
        box-shadow: 0 0 0 3px var(--ath-danger-bg);
    }

.ath-field-hint {
    font-size: var(--ath-fs-xs);
    color: var(--ath-text-muted);
}

/* previsualizacion de imagen actual en formularios con upload (Delegacion, etc.) */
.ath-img-preview {
    display: block;
    max-width: 100%;
    width: 10rem;
    height: auto;
    margin-bottom: var(--ath-space-2);
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-md);
    background: var(--ath-surface-elevated);
    object-fit: contain;
}

.ath-field-error {
    font-size: var(--ath-fs-xs);
    font-weight: var(--ath-fw-medium);
    color: var(--ath-danger);
}

    .ath-field-error:empty {
        display: none;
    }

/* ---- resumen de validacion (asp-validation-summary) --------------- */
.validation-summary-valid {
    display: none;
}

.ath-validation-summary.validation-summary-errors,
.validation-summary-errors {
    border: 1px solid var(--ath-danger);
    background: var(--ath-danger-bg);
    color: var(--ath-danger);
    border-radius: var(--ath-radius-md);
    padding: .75rem 1rem;
    margin-bottom: var(--ath-space-4);
    font-size: var(--ath-fs-sm);
}

    .validation-summary-errors ul {
        margin: 0;
        padding-left: 1.1rem;
    }

/* ---- barra de acciones de formulario (Razor) -------------------- */
.ath-form-actions {
    display: flex;
    align-items: center;
    gap: var(--ath-space-3);
    flex-wrap: wrap;
    margin-top: var(--ath-space-6);
    padding-top: var(--ath-space-4);
    border-top: 1px solid var(--ath-border);
}

    .ath-form-actions .ath-form-actions-spacer {
        flex: 1 1 auto;
    }

@media (max-width: 575.98px) {
    .ath-form-actions {
        flex-direction: column-reverse;
        align-items: stretch;
    }

        .ath-form-actions .ath-form-actions-spacer {
            display: none;
        }

        .ath-form-actions .ath-btn {
            width: 100%;
        }
}

/* ---- utilidades minimas --------------------------------------- */
.ath-grid {
    display: grid;
    gap: var(--ath-space-4);
}

.ath-grid-auto {
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
}

.ath-grid-auto-lg {
    grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.ath-stack {
    display: flex;
    flex-direction: column;
    gap: var(--ath-space-4);
}

.ath-muted {
    color: var(--ath-text-muted);
}

.ath-num {
    font-family: var(--ath-font-num);
    font-variant-numeric: tabular-nums;
}

/* Shell: evitar overflow horizontal del documento (regla MOVIRAH). */
.ath-shell {
    overflow-x: clip;
}

/* ==========================================================================
   Alias de vocabulario MOVIRAH (theme-surface-* / brand-*), por si se copian
   recetas del handoff. Mapean a los tokens Altheroh.
   ========================================================================== */
.theme-surface-panel { background: var(--ath-surface-panel); color: var(--ath-text-primary); border-color: var(--ath-border); }
.theme-surface-card { background: var(--ath-surface-card); color: var(--ath-text-primary); border-color: var(--ath-border); }
.theme-surface-elevated { background: var(--ath-surface-elevated); color: var(--ath-text-primary); border-color: var(--ath-border); }
.theme-text-primary { color: var(--ath-text-primary); }
.theme-text-secondary { color: var(--ath-text-secondary); }
.theme-text-muted { color: var(--ath-text-muted); }
.brand-action-primary { background: var(--ath-primary); color: var(--ath-text-on-primary); border-color: var(--ath-primary); }
.brand-focus:focus-visible { outline: 2px solid var(--ath-focus); outline-offset: 2px; box-shadow: 0 0 0 3px var(--ath-primary-soft); }

/* ==========================================================================
   Movimiento reducido (regla global MOVIRAH).
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   Menú de acciones "⋮" para filas de tabla / tarjetas.
   Reutiliza el dropdown de Dashmix (Bootstrap 4) — solo re-skin con tokens.
   Uso:
     <div class="ath-actions-menu dropdown">
       <button type="button" class="ath-actions-toggle" data-toggle="dropdown"
               data-boundary="viewport" aria-haspopup="true" aria-expanded="false"
               title="Acciones"><i class="fa fa-ellipsis-v"></i></button>
       <div class="dropdown-menu dropdown-menu-right">
         <a class="dropdown-item" href="…"><i class="fa fa-cog"></i> Configurar fases</a>
         <button type="button" class="dropdown-item ath-item-danger js-…"><i class="fa fa-trash"></i> Eliminar</button>
       </div>
     </div>
   ========================================================================== */
.ath-actions-menu { display: inline-block; }

.ath-actions-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-sm);
    background: var(--ath-surface);
    color: var(--ath-text-secondary);
    cursor: pointer;
    transition: background var(--ath-dur-fast) ease, border-color var(--ath-dur-fast) ease, color var(--ath-dur-fast) ease;
}

    .ath-actions-toggle:hover {
        background: var(--ath-primary-soft);
        border-color: var(--ath-border-strong);
        color: var(--ath-primary-hover);
    }

    .ath-actions-toggle:focus-visible {
        outline: none;
        border-color: var(--ath-primary);
        box-shadow: 0 0 0 3px var(--ath-focus-ring, rgba(16, 64, 133, .18));
    }

    .ath-actions-toggle[aria-expanded="true"] {
        background: var(--ath-primary-soft);
        border-color: var(--ath-primary);
        color: var(--ath-primary-hover);
    }

#main-container .ath-actions-menu .dropdown-menu {
    min-width: 12rem;
    padding: .35rem;
    border: 1px solid var(--ath-border);
    border-radius: var(--ath-radius-lg);
    background: var(--ath-surface-elevated);
    box-shadow: var(--ath-shadow-lg);
}

#main-container .ath-actions-menu .dropdown-item {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .5rem .6rem;
    border-radius: var(--ath-radius-sm);
    font-size: .8125rem;
    font-weight: var(--ath-fw-medium);
    color: var(--ath-text-primary);
    background: transparent;
    border: 0;
    width: 100%;
    text-align: left;
    cursor: pointer;
}

    #main-container .ath-actions-menu .dropdown-item > i {
        width: 1rem;
        text-align: center;
        color: var(--ath-text-muted);
        font-size: .875rem;
    }

    #main-container .ath-actions-menu .dropdown-item:hover,
    #main-container .ath-actions-menu .dropdown-item:focus {
        background: var(--ath-primary-soft);
        color: var(--ath-primary-hover);
    }

        #main-container .ath-actions-menu .dropdown-item:hover > i,
        #main-container .ath-actions-menu .dropdown-item:focus > i {
            color: var(--ath-primary-hover);
        }

    #main-container .ath-actions-menu .dropdown-item.ath-item-danger { color: var(--ath-danger); }
    #main-container .ath-actions-menu .dropdown-item.ath-item-danger > i { color: var(--ath-danger); }

        #main-container .ath-actions-menu .dropdown-item.ath-item-danger:hover,
        #main-container .ath-actions-menu .dropdown-item.ath-item-danger:focus {
            background: var(--ath-danger-bg);
            color: var(--ath-danger);
        }

#main-container .ath-actions-menu .dropdown-divider {
    margin: .35rem .2rem;
    border-top: 1px solid var(--ath-border-subtle);
}

/* ---- celda "nombre + subtítulo + chips" para grillas densas ---------------- */
.ath-cell-name { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
.ath-cell-name .n { font-weight: var(--ath-fw-bold); color: var(--ath-text-primary); }
.ath-cell-name .sub { font-size: .75rem; color: var(--ath-text-muted); }

.ath-chips { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .2rem; }
.ath-chip {
    font-family: var(--ath-font-mono);
    font-size: .625rem;
    letter-spacing: .04em;
    padding: .12rem .4rem;
    border-radius: 999px;
    border: 1px solid var(--ath-border);
    color: var(--ath-text-secondary);
    white-space: nowrap;
}

/* ---- mini-stats apilados (resumen de una fila) --------------------------- */
.ath-ministats { display: flex; flex-direction: column; gap: .1rem; font-size: .75rem; color: var(--ath-text-secondary); }
.ath-ministats .k { font-family: var(--ath-font-mono); font-size: .5625rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ath-text-muted); }