/* Catálogo Público de Métodos — Transparency page
 * Design: web-design-engineer Redesign-Preserve, dials V5 / M3 / D5.
 * Tokens prefixed --mtm- to avoid clashing with the template.
 * pre-emit critique: P5 H4 E5 S4 R5 V4 */

.mm-metodos-page {
    --mtm-navy: #1a1a2e;
    --mtm-deep: #0f3460;
    --mtm-coral: #e94560;
    --mtm-ink: #22262e;
    --mtm-muted: #6b7280;
    --mtm-surface: #f8f9fb;
    --mtm-line: #e4e7ec;
    --mtm-good: #2e6b2e;
    --mtm-good-bg: #e8f5e9;
    --mtm-warn: #b8860b;
    --mtm-warn-bg: #fff8e1;
    --mtm-info: #1565c0;
    --mtm-info-bg: #e3f2fd;
    --mtm-danger: #a13333;
    --mtm-danger-bg: #fbe9e9;
    --mtm-radius: 10px;
    --mtm-radius-sm: 6px;
    --mtm-shadow-1: 0 2px 8px rgba(15, 23, 42, 0.07);
    --mtm-shadow-2: 0 4px 16px rgba(15, 23, 42, 0.10);
    --mtm-ease: cubic-bezier(0.4, 0, 0.2, 1);
    --mtm-dur: 200ms;

    width: 98%;
    margin: 0 auto;
    padding: 1rem 0.5rem 3rem;
    color: var(--mtm-ink);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* ── Hero ──────────────────────────────────────────────────────────── */

.mm-metodos-hero {
    background: linear-gradient(135deg, var(--mtm-navy) 0%, var(--mtm-deep) 100%);
    color: #fff;
    border-radius: var(--mtm-radius);
    padding: 2.5rem 2rem;
    margin-bottom: 2rem;
}

.mm-metodos-eyebrow {
    text-transform: uppercase;
    letter-spacing: 2px;
    font-size: 0.75rem;
    color: var(--mtm-coral);
    margin: 0 0 0.5rem;
    font-weight: 600;
}

.mm-metodos-hero h1 {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    margin: 0 0 0.75rem;
    line-height: 1.2;
}

.mm-metodos-hero p {
    color: rgba(255, 255, 255, 0.82);
    margin: 0;
    max-width: 65ch;
    font-size: 1rem;
}

/* ── Tier legend ───────────────────────────────────────────────────── */

.mm-metodos-legend {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 2rem;
}

.mm-metodos-legend-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    border-radius: var(--mtm-radius-sm);
    font-size: 0.85rem;
    font-weight: 500;
}

.mm-metodos-legend-item.t1 {
    background: var(--mtm-good-bg);
    color: var(--mtm-good);
}

.mm-metodos-legend-item.t2 {
    background: var(--mtm-warn-bg);
    color: var(--mtm-warn);
}

.mm-metodos-legend-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.mm-metodos-legend-item.t1 .mm-metodos-legend-dot { background: var(--mtm-good); }
.mm-metodos-legend-item.t2 .mm-metodos-legend-dot { background: var(--mtm-warn); }

/* ── Detector cards ────────────────────────────────────────────────── */

.mm-metodos-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 1rem;
}

@media (min-width: 768px) {
    .mm-metodos-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.mm-metodos-card {
    background: #fff;
    border: 1px solid var(--mtm-line);
    border-radius: var(--mtm-radius);
    padding: 1.5rem;
    transition: box-shadow var(--mtm-dur) var(--mtm-ease),
                transform var(--mtm-dur) var(--mtm-ease);
    display: flex;
    flex-direction: column;
}

.mm-metodos-card:hover {
    box-shadow: var(--mtm-shadow-2);
    transform: translateY(-2px);
}

.mm-metodos-card.tier-1 { border-top: 3px solid var(--mtm-good); }
.mm-metodos-card.tier-2 { border-top: 3px solid var(--mtm-warn); }

.mm-metodos-card-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 0.75rem;
    margin-bottom: 1rem;
}

.mm-metodos-card h3 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
    line-height: 1.3;
    color: var(--mtm-ink);
}

.mm-metodos-card-badges {
    display: flex;
    gap: 0.4rem;
    flex-shrink: 0;
    flex-direction: column;
    align-items: flex-end;
}

.mm-metodos-badge {
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.2rem 0.6rem;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.mm-metodos-badge.t1 { background: var(--mtm-good-bg); color: var(--mtm-good); }
.mm-metodos-badge.t2 { background: var(--mtm-warn-bg); color: var(--mtm-warn); }
.mm-metodos-badge.fresh { background: var(--mtm-good-bg); color: var(--mtm-good); }
.mm-metodos-badge.partial { background: var(--mtm-info-bg); color: var(--mtm-info); }
.mm-metodos-badge.not_materialized { background: var(--mtm-danger-bg); color: var(--mtm-danger); }
.mm-metodos-badge.heuristic { background: var(--mtm-warn-bg); color: var(--mtm-warn); }

/* ── Data rows ─────────────────────────────────────────────────────── */

.mm-metodos-row {
    display: grid;
    grid-template-columns: 110px 1fr;
    gap: 0.75rem;
    padding: 0.6rem 0;
    border-top: 1px solid var(--mtm-line);
}

.mm-metodos-row:first-of-type { border-top: none; }

.mm-metodos-row dt {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mtm-muted);
    margin: 0;
    padding-top: 1px;
}

.mm-metodos-row dd {
    margin: 0;
    font-size: 0.88rem;
    color: var(--mtm-ink);
    line-height: 1.5;
}

.mm-metodos-row dd code {
    font-family: 'JetBrains Mono', 'Courier New', monospace;
    font-size: 0.8rem;
    background: var(--mtm-surface);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
    color: var(--mtm-deep);
}

.mm-metodos-row dd .mm-metodos-component-slash {
    color: var(--mtm-muted);
}

/* ── Limitations callout ───────────────────────────────────────────── */

.mm-metodos-limitations {
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--mtm-danger-bg);
    border-radius: var(--mtm-radius-sm);
    border-left: 3px solid var(--mtm-danger);
}

.mm-metodos-limitations-label {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--mtm-danger);
    margin-bottom: 0.25rem;
}

.mm-metodos-limitations-text {
    font-size: 0.85rem;
    color: var(--mtm-ink);
    line-height: 1.5;
}

/* ── Abstention ────────────────────────────────────────────────────── */

.mm-metodos-abstention {
    margin-top: 0.5rem;
    font-size: 0.8rem;
    color: var(--mtm-muted);
    font-style: italic;
}

.mm-metodos-abstention strong {
    color: var(--mtm-info);
    font-style: normal;
    font-weight: 600;
}

/* ── Footer note ───────────────────────────────────────────────────── */

.mm-metodos-footer {
    margin-top: 2.5rem;
    padding: 1.25rem 1.5rem;
    background: var(--mtm-surface);
    border-radius: var(--mtm-radius);
    font-size: 0.85rem;
    color: var(--mtm-muted);
    line-height: 1.6;
}

.mm-metodos-footer strong {
    color: var(--mtm-ink);
}

/* ── Focus states (WCAG AA) ────────────────────────────────────────── */

.mm-metodos-card:focus-within {
    outline: 2px solid var(--mtm-coral);
    outline-offset: 2px;
}

/* ── Reduced motion ────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
    .mm-metodos-card {
        transition: none;
    }
    .mm-metodos-card:hover {
        transform: none;
    }
}

/* ── Mobile ────────────────────────────────────────────────────────── */

@media (max-width: 576px) {
    .mm-metodos-page {
        width: 100%;
        padding: 0.5rem 0.75rem 2rem;
    }
    .mm-metodos-hero {
        padding: 1.5rem 1rem;
    }
    .mm-metodos-card {
        padding: 1rem;
    }
    .mm-metodos-row {
        grid-template-columns: 1fr;
        gap: 0.25rem;
    }
    .mm-metodos-row dt {
        font-size: 0.7rem;
    }
    .mm-metodos-card-head {
        flex-direction: column;
    }
    .mm-metodos-card-badges {
        flex-direction: row;
        align-items: flex-start;
    }
}