/**
 * OS TigerLab Design System v2 — UTILITIES
 * Helpers atómicos. Usar SOLO cuando un componente no aplica.
 */

/* ================================================================== */
/*  Text                                                               */
/* ================================================================== */
.ostl-text-xs   { font-size: var(--fs-xs);   line-height: var(--lh-xs); }
.ostl-text-sm   { font-size: var(--fs-sm);   line-height: var(--lh-sm); }
.ostl-text-base { font-size: var(--fs-base); line-height: var(--lh-base); }
.ostl-text-lg   { font-size: var(--fs-lg);   line-height: var(--lh-lg); }
.ostl-text-xl   { font-size: var(--fs-xl);   line-height: var(--lh-xl); }
.ostl-text-2xl  { font-size: var(--fs-2xl);  line-height: var(--lh-2xl); }
.ostl-text-3xl  { font-size: var(--fs-3xl);  line-height: var(--lh-3xl); }
.ostl-text-4xl  { font-size: var(--fs-4xl);  line-height: var(--lh-4xl); }
.ostl-text-5xl  { font-size: var(--fs-5xl);  line-height: var(--lh-5xl); }

.ostl-fw-regular { font-weight: var(--fw-regular); }
.ostl-fw-medium  { font-weight: var(--fw-medium); }
.ostl-fw-semi    { font-weight: var(--fw-semi); }
.ostl-fw-bold    { font-weight: var(--fw-bold); }

.ostl-font-display { font-family: var(--font-display); }
.ostl-font-body    { font-family: var(--font-body); }
.ostl-font-mono    { font-family: var(--font-mono); }

.ostl-tracking-tight { letter-spacing: var(--ls-tight); }
.ostl-tracking-wide  { letter-spacing: var(--ls-wide); }
.ostl-tracking-eyebrow { letter-spacing: var(--ls-eyebrow); text-transform: uppercase; }

.ostl-uppercase  { text-transform: uppercase; }
.ostl-capitalize { text-transform: capitalize; }
.ostl-lowercase  { text-transform: lowercase; }

.ostl-text-left   { text-align: left; }
.ostl-text-center { text-align: center; }
.ostl-text-right  { text-align: right; }
.ostl-text-balance { text-wrap: balance; }
.ostl-text-pretty  { text-wrap: pretty; }

.ostl-truncate {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ostl-line-clamp-2,
.ostl-line-clamp-3,
.ostl-line-clamp-4 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.ostl-line-clamp-2 { -webkit-line-clamp: 2; line-clamp: 2; }
.ostl-line-clamp-3 { -webkit-line-clamp: 3; line-clamp: 3; }
.ostl-line-clamp-4 { -webkit-line-clamp: 4; line-clamp: 4; }

/* ================================================================== */
/*  Colors                                                             */
/* ================================================================== */
.ostl-color-primary    { color: var(--color-text-primary); }
.ostl-color-secondary  { color: var(--color-text-secondary); }
.ostl-color-muted      { color: var(--color-text-muted); }
.ostl-color-accent     { color: var(--color-accent); }
.ostl-color-accent-2   { color: var(--color-accent-2); }
.ostl-color-success    { color: var(--color-success); }
.ostl-color-warning    { color: var(--color-warning); }
.ostl-color-danger     { color: var(--color-danger); }
.ostl-color-info       { color: var(--color-info); }

.ostl-bg-primary       { background-color: var(--color-bg-primary); }
.ostl-bg-elevated      { background-color: var(--color-bg-elevated); }
.ostl-bg-muted         { background-color: var(--color-bg-muted); }

/* ================================================================== */
/*  Spacing margin/padding                                             */
/* ================================================================== */
.ostl-m-0  { margin: 0; }
.ostl-mt-2 { margin-top: var(--sp-2); }
.ostl-mt-4 { margin-top: var(--sp-4); }
.ostl-mt-6 { margin-top: var(--sp-6); }
.ostl-mt-8 { margin-top: var(--sp-8); }
.ostl-mb-2 { margin-bottom: var(--sp-2); }
.ostl-mb-4 { margin-bottom: var(--sp-4); }
.ostl-mb-6 { margin-bottom: var(--sp-6); }
.ostl-mb-8 { margin-bottom: var(--sp-8); }

.ostl-p-0  { padding: 0; }
.ostl-p-2  { padding: var(--sp-2); }
.ostl-p-4  { padding: var(--sp-4); }
.ostl-p-6  { padding: var(--sp-6); }
.ostl-p-8  { padding: var(--sp-8); }

/* ================================================================== */
/*  Display / flex                                                     */
/* ================================================================== */
.ostl-block        { display: block; }
.ostl-inline-block { display: inline-block; }
.ostl-inline       { display: inline; }
.ostl-flex         { display: flex; }
.ostl-inline-flex  { display: inline-flex; }
.ostl-grid         { display: grid; }
.ostl-hidden       { display: none !important; }

.ostl-flex-row     { flex-direction: row; }
.ostl-flex-col     { flex-direction: column; }
.ostl-flex-wrap    { flex-wrap: wrap; }
.ostl-items-center { align-items: center; }
.ostl-items-start  { align-items: flex-start; }
.ostl-items-end    { align-items: flex-end; }
.ostl-justify-center  { justify-content: center; }
.ostl-justify-between { justify-content: space-between; }
.ostl-justify-end     { justify-content: flex-end; }
.ostl-gap-1 { gap: var(--sp-1); }
.ostl-gap-2 { gap: var(--sp-2); }
.ostl-gap-3 { gap: var(--sp-3); }
.ostl-gap-4 { gap: var(--sp-4); }
.ostl-gap-6 { gap: var(--sp-6); }
.ostl-gap-8 { gap: var(--sp-8); }

/* ================================================================== */
/*  Misc                                                               */
/* ================================================================== */
.ostl-rounded-sm   { border-radius: var(--r-sm); }
.ostl-rounded-md   { border-radius: var(--r-md); }
.ostl-rounded-lg   { border-radius: var(--r-lg); }
.ostl-rounded-xl   { border-radius: var(--r-xl); }
.ostl-rounded-pill { border-radius: var(--r-pill); }
.ostl-rounded-full { border-radius: 50%; }

.ostl-border         { border: 1px solid var(--color-border-default); }
.ostl-border-strong  { border: 1px solid var(--color-border-strong); }
.ostl-border-accent  { border: 1px solid var(--color-border-accent); }

.ostl-shadow-1 { box-shadow: var(--shadow-1); }
.ostl-shadow-2 { box-shadow: var(--shadow-2); }
.ostl-shadow-3 { box-shadow: var(--shadow-3); }
.ostl-shadow-4 { box-shadow: var(--shadow-4); }
.ostl-shadow-5 { box-shadow: var(--shadow-5); }

.ostl-w-full { width: 100%; }
.ostl-h-full { height: 100%; }

.ostl-relative { position: relative; }
.ostl-absolute { position: absolute; }
.ostl-sticky   { position: sticky; }
.ostl-fixed    { position: fixed; }

.ostl-overflow-hidden { overflow: hidden; }
.ostl-overflow-auto   { overflow: auto; }

.ostl-min-w-0 { min-width: 0; }
.ostl-min-h-0 { min-height: 0; }

/* Links “subrayado accesible” */
.ostl-link-muted {
    color: var(--color-text-secondary);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.2em;
    transition: color var(--d-fast) var(--ease-smooth);
}
.ostl-link-muted:hover {
    color: var(--color-accent);
}

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

/* ================================================================== */
/*  Prose (blog / artículos) — clase usada en blog/*.php               */
/* ================================================================== */
.ostl-prose {
    min-width: 0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.ostl-prose :where(a[href]):focus-visible {
    outline: none;
    border-radius: var(--r-sm);
    box-shadow: var(--focus-ring-shadow);
}

.ostl-prose :where(blockquote) {
    margin: var(--sp-6) 0;
    padding: var(--sp-5) var(--sp-6);
    border-left: 3px solid color-mix(in oklab, var(--color-accent-2) 70%, var(--color-border-default));
    border-radius: 0 var(--r-md) var(--r-md) 0;
    background: color-mix(in oklab, var(--color-bg-muted) 88%, var(--color-bg-primary));
    color: var(--color-text-secondary);
    font-style: italic;
}

.ostl-prose :where(blockquote cite) {
    display: block;
    margin-top: var(--sp-3);
    font-style: normal;
    font-size: var(--fs-sm);
    color: var(--color-text-muted);
}

.ostl-prose :where(a[href]) {
    color: var(--color-accent);
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 0.22em;
    text-decoration-color: color-mix(in oklab, var(--color-accent) 50%, transparent);
    transition: color var(--d-fast) var(--ease-smooth), text-decoration-color var(--d-fast) var(--ease-smooth);
}

@media (hover: hover) {
    .ostl-prose :where(a[href]):hover {
        color: var(--color-accent-hover);
        text-decoration-color: color-mix(in oklab, var(--color-accent-hover) 65%, transparent);
    }
}

.ostl-prose > :where(h2:first-child) {
    margin-top: 0;
}

.ostl-prose :where(h2) {
    font-family: var(--font-display);
    margin-top: var(--sp-10);
    margin-bottom: var(--sp-4);
    padding-bottom: var(--sp-2);
    border-bottom: 1px solid color-mix(in oklab, var(--color-border-default) 85%, transparent);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-2xl);
    color: var(--color-text-primary);
}

.ostl-prose :where(h3) {
    font-family: var(--font-display);
    margin-top: var(--sp-8);
    margin-bottom: var(--sp-3);
    letter-spacing: var(--ls-tight);
    line-height: var(--lh-xl);
    color: var(--color-text-primary);
}

.ostl-prose :where(hr) {
    border: none;
    height: 1px;
    margin: var(--sp-10) 0;
    background: linear-gradient(90deg, transparent, var(--color-border-strong), transparent);
}

.ostl-prose :where(ul, ol) {
    margin-block: var(--sp-5);
    padding-inline-start: var(--sp-6);
}

.ostl-prose :where(li + li) {
    margin-top: var(--sp-2);
}

.ostl-prose :where(img, video) {
    max-width: 100%;
    height: auto;
}

.ostl-prose :where(iframe, embed) {
    max-width: 100%;
}

.ostl-prose :where(pre) {
    overflow-x: auto;
    max-width: 100%;
    margin: var(--sp-6) 0;
    padding: var(--sp-4);
    border-radius: var(--r-md);
    border: 1px solid var(--color-border-default);
    background: color-mix(in oklab, var(--color-bg-muted) 94%, var(--color-bg-primary));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.ostl-prose :where(pre code) {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--fs-sm);
    line-height: var(--lh-base);
    background: none;
    border: none;
    padding: 0;
}

.ostl-prose :where(p code, li code, td code, dd code) {
    font-family: var(--font-mono);
    font-size: 0.9em;
    padding: 0.12em 0.42em;
    border-radius: var(--r-sm);
    background: color-mix(in oklab, var(--color-bg-muted) 88%, var(--color-bg-primary));
    border: 1px solid var(--color-border-subtle);
}

.ostl-prose :where(table) {
    width: 100%;
    border-collapse: collapse;
    table-layout: auto;
    border-radius: var(--r-md);
    overflow: hidden;
    border: 1px solid var(--color-border-default);
}

.ostl-prose :where(thead th) {
    background: color-mix(in oklab, var(--color-bg-muted) 92%, var(--color-bg-primary));
    color: var(--color-text-primary);
    font-weight: var(--fw-semi);
    text-align: left;
}

.ostl-prose tbody :where(tr:nth-child(even) td) {
    background: color-mix(in oklab, var(--color-bg-muted) 22%, transparent);
}

.ostl-prose :where(td, th) {
    padding: var(--sp-3) var(--sp-4);
    border-bottom: 1px solid var(--color-border-default);
}

/* Tablas anchas: envolver con esta clase o añadir en markup */
.ostl-table-scroll {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-block: var(--sp-4);
}

.ostl-table-scroll table {
    width: max-content;
    min-width: min(100%, 520px);
    margin: 0;
}

/* Tablas en prose: texto más compacto en tablet/móvil (menos desborde) */
@media (max-width: 768px) {
    .ostl-prose :where(table) {
        font-size: var(--fs-sm);
        line-height: var(--lh-sm);
        border-radius: var(--r-sm);
    }

    .ostl-prose :where(td, th) {
        padding: var(--sp-2) var(--sp-3);
        word-break: break-word;
    }
}

/* Tipografía: títulos utility menos agresivos en móvil */
@media (max-width: 640px) {
    .ostl-text-6xl {
        font-size: var(--fs-5xl);
        line-height: var(--lh-5xl);
    }
    .ostl-text-5xl {
        font-size: var(--fs-4xl);
        line-height: var(--lh-4xl);
    }
    .ostl-text-4xl {
        font-size: var(--fs-3xl);
        line-height: var(--lh-3xl);
    }
}

@media (max-width: 400px) {
    .ostl-text-6xl {
        font-size: var(--fs-4xl);
        line-height: var(--lh-4xl);
    }
    .ostl-text-5xl {
        font-size: var(--fs-3xl);
        line-height: var(--lh-3xl);
    }
    .ostl-text-4xl {
        font-size: var(--fs-2xl);
        line-height: var(--lh-2xl);
    }
}