/* ============================================================
   TRIÁNGULOS — estética glass del sitio
   ============================================================ */

.tri-wrap {
    width: 100%;
    min-width: 0;
    max-width: 1160px;
    margin: 0 auto clamp(3rem, 8vw, 5rem);
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* título un poco más arriba en esta página */
.page-head {
    padding-top: clamp(1.1rem, 3.5vw, 2.2rem);
}

/* ---------- barra de modo fija (patrón simbolos) ---------- */
.tri-mtoc { display: none; }

.tri-mtoc-chip {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--muted);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .2px;
    padding: 9px 15px;
    border-radius: 999px;
    cursor: pointer;
    white-space: nowrap;
    font-family: inherit;
    transition: all .2s ease;
}

.tri-mtoc-chip i { font-size: 16px; }
.tri-mtoc-chip:hover { color: var(--text); }

.tri-mtoc-chip.active {
    background: var(--accent-soft);
    color: var(--accent);
    border-color: var(--accent);
}

@media (max-width: 900px) {
    .tri-mtoc {
        display: flex;
        position: fixed;
        top: 14px;
        left: 74px;
        right: 14px;
        z-index: 2399;
        align-items: center;
        gap: 7px;
        height: 52px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        pointer-events: auto;
        padding: 8px 12px;
        background: var(--glass-strong);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: var(--shadow-sm);
    }
    .tri-mtoc-chip { flex: 1; justify-content: center; }
    .tri-mtoc::-webkit-scrollbar { display: none; }
}

@media (min-width: 901px) {
    .tri-mtoc {
        display: flex;
        position: fixed;
        z-index: 2401;
        align-items: center;
        gap: 8px;
        overflow-x: auto;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding: 7px 10px;
        background: var(--glass-strong);
        backdrop-filter: blur(18px) saturate(1.4);
        -webkit-backdrop-filter: blur(18px) saturate(1.4);
        border: 1px solid var(--border);
        border-radius: 999px;
        box-shadow: var(--shadow-sm);
    }
    .tri-mtoc::-webkit-scrollbar { display: none; }
}

/* ---------- tarjeta glass base ---------- */
.tri-card {
    background: var(--glass-bg);
    backdrop-filter: blur(14px) saturate(1.3);
    -webkit-backdrop-filter: blur(14px) saturate(1.3);
    border: 1px solid var(--border);
    border-radius: 24px;
    padding: clamp(16px, 3vw, 26px);
    box-shadow: var(--shadow-sm);
    transition: border-color var(--transition), box-shadow var(--transition);
}

.tri-card:hover {
    border-color: var(--accent-soft);
}

.tri-wrap [hidden] { display: none !important; }

/* ---------- diagrama de referencia ---------- */
.ref-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    background: transparent;
    border-radius: 20px;
    padding: 32px;
}

[data-theme="dark"] .ref-box {
    background: transparent;
}

#ref-svg {
    width: 100%;
    max-width: 520px;
    height: auto;
}

.icon-mini {
    position: absolute;
    right: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--muted);
    cursor: pointer;
    z-index: 10;
    transition: all .25s ease;
}

.icon-mini:hover {
    background: rgba(0, 0, 0, .06);
    color: var(--accent);
}

[data-theme="dark"] .icon-mini:hover {
    background: rgba(255, 255, 255, .1);
}

.icon-mini.rotate { top: 8px; }
.icon-mini.tilt   { top: 44px; }

#ref-svg,
#svg-draw {
    transition: transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
    transform-origin: center center;
}

svg text {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform .4s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* trazos del SVG (claro/oscuro vía tokens) */
.tri-linea {
    stroke: var(--text);
    fill: none;
    stroke-width: 2;
    transition: stroke .3s ease;
}

.tri-txt {
    fill: var(--text-secondary, var(--text));
    font-family: 'Open Sans', sans-serif;
    transition: fill .3s ease;
}

.tri-txt-sec {
    fill: var(--muted);
    font-family: 'Open Sans', sans-serif;
    transition: fill .3s ease;
}


/* letras de los diagramas (referencia y resultado): estilo LaTeX (KaTeX) con contorno halo */
#ref-svg text,
#svg-draw text {
    font-family: 'KaTeX_Math', 'KaTeX_Main', 'Latin Modern Roman', Georgia, serif;
    font-style: italic;
    font-weight: normal;
    paint-order: stroke fill;
    stroke-linejoin: round;
    stroke-width: 2;
    transition: transform .4s cubic-bezier(0.25, 0.8, 0.25, 1), fill .3s ease, stroke .3s ease;
}

#ref-svg .tri-txt,
#ref-svg .tri-txt-sec,
#svg-draw .tri-txt,
#svg-draw .tri-txt-sec {
    stroke: var(--surface);
}

#ref-svg .tri-txt,
#svg-draw .tri-txt {
    font-size: 14px;
}

#ref-svg .tri-txt-sec,
#svg-draw .tri-txt-sec {
    font-size: 13px;
}

/* El lienzo del diagrama de referencia es mas ancho que antes (margen para
   los valores largos), asi que la escala baja. Se compensa con un cuerpo
   mayor, que en pantalla queda igual que el del diagrama de resultado. */
#ref-svg .tri-txt {
    font-size: 16px;
}

#ref-svg .tri-txt-sec {
    font-size: 14.5px;
}

/* Los valores tecleados son numeros: las KaTeX_Math no tienen cifras y el
   respaldo las dibujaba con otra altura y otra linea base (1 y 2 mas
   pequenos, 6 y 8 mas altos). Aqui van con cifras tabulares de KaTeX_Main,
   que comparten metrica con las letras. */
#ref-svg text.tri-num,
#ref-svg tspan.tri-num,
#svg-draw text.tri-num,
#svg-draw tspan.tri-num {
    font-family: 'KaTeX_Main', 'Latin Modern Roman', Georgia, serif;
    font-style: normal;
    font-variant-numeric: lining-nums tabular-nums;
    font-feature-settings: 'lnum' 1, 'tnum' 1;
    dominant-baseline: alphabetic;
}

/* ---------- estado / entradas ---------- */
.status-line {
    text-align: center;
    font-size: .84rem;
    font-weight: 600;
    color: var(--muted);
    min-height: 20px;
    margin-bottom: 14px;
    transition: color .3s ease;
}

.status-line.is-ready { color: var(--text); }

.inputs-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(90px, 1fr));
    gap: 14px;
    margin-bottom: 22px;
}

.field { display: flex; flex-direction: column; min-width: 0; }

.field label {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin: 0 0 7px 13px;
}

.field input {
    width: 100%;
    background: var(--surface-2);
    border: 1px solid var(--border);
    padding: 12px 15px;
    border-radius: 16px;
    font-family: inherit;
    font-size: .95rem;
    color: var(--text);
    outline: none;
    transition: all .25s ease;
}

.field input:focus {
    background: var(--surface);
    border-color: var(--accent);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .1);
}

.field input:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* ---------- botones ---------- */
.btn-col {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tri-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 14px 24px;
    border-radius: 999px;
    font-family: inherit;
    font-weight: 700;
    font-size: .92rem;
    cursor: pointer;
    transition: all .3s cubic-bezier(0.4, 0, 0.2, 1);
    border: none;
}

.tri-btn-primary {
    background: var(--accent-soft);
    color: var(--accent);
    border: 1px solid var(--accent);
}

.tri-btn-primary:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: translateY(-3px) scale(1.01);
}

.tri-btn-ghost {
    background: transparent;
    color: var(--text);
    border: 1px solid var(--border);
}

.tri-btn-ghost:hover {
    background: var(--surface-2);
    border-color: var(--accent-soft);
    transform: translateY(-2px);
}

/* ---------- visualización ---------- */
.visual-box {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: visible;
}

.tri-dl-btn {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 5;
    padding: 8px 12px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--muted);
    cursor: pointer;
    font-size: 15px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .2s;
}
.tri-dl-btn:hover { border-color: var(--accent); color: var(--accent); }

#svg-draw {
    width: min(100%, 480px);
    height: auto;
    aspect-ratio: 1 / 1;
    overflow: visible;
}

@media (max-width: 500px) {
    /* Al girar, una caja cuadrada necesita 1,41 veces su lado. Con los 322 px
       que se quedaba aquí en un móvil, el dibujo inclinado se salía de la
       pantalla, el documento ganaba ancho y las barras fijas (la de la navbar y
       la de rectángulo/oblicuángulo) se desplazaban con el scroll horizontal.

       Con 285 px el dibujo inclinado sigue cabeindo en la pantalla, así que el
       problema desaparece sin tocar el triángulo en reposo, sin escalarlo al
       girar y sin recortarlo: solo se le da el tamaño que ya tenía. */
    #svg-draw {
        width: min(100%, 285px);
    }
}

/* ---------- fila de resultados + pasos ---------- */
.tri-results-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin: 0;
    align-items: stretch;
}

.tri-results-row > .tri-card {
    flex: 1 1 340px;
    min-width: 0;
}

.res-title,
.steps-title {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    margin-bottom: 16px;
}

.res-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 18px;
    font-size: .9rem;
}

.res-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    padding: 9px 0;
    border-bottom: 1px solid var(--border);
    color: var(--muted);
}

.res-item span:last-child {
    font-weight: 700;
    color: var(--text);
    font-size: 1.05em;
    white-space: nowrap;
}

/* ---------- paso a paso ---------- */
.paso {
    display: flex;
    gap: 14px;
    align-items: flex-start;
    padding: 13px 0;
    border-bottom: 1px solid var(--border);
    animation: pasoIn .45s ease forwards;
    opacity: 0;
}

.paso:last-child { border-bottom: none; }

@keyframes pasoIn {
    from { opacity: 0; transform: translateX(-10px); }
    to   { opacity: 1; transform: translateX(0); }
}

.paso-num {
    flex-shrink: 0;
    width: 26px;
    height: 26px;
    margin-top: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 22%;
    background: var(--accent-soft);
    color: var(--accent);
    font-size: .72rem;
    font-weight: 700;
}

.paso-body {
    width: 100%;
    min-width: 0;
    overflow-x: auto;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--text);
    opacity: .92;
    text-align: center;
}

.paso-body b { color: var(--text); }

.paso-body .katex-display {
    margin: .5em 0;
    overflow-x: auto;
    overflow-y: hidden;
    padding: 2px 0;
}

/* ---------- datos avanzados (dentro de procedural) ---------- */
.adv-wrapper {
    margin-top: 18px;
    padding-top: 18px;
    border-top: 1px solid var(--border);
}

.adv-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    background: transparent;
    border: 1px solid var(--border);
    padding: 11px 24px;
    border-radius: 999px;
    cursor: pointer;
    font-family: inherit;
    font-size: .85rem;
    font-weight: 600;
    color: var(--muted);
    transition: all .25s ease;
}

.adv-toggle:hover {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--accent-soft);
    transform: translateY(-2px);
}

.adv-toggle.active {
    background: var(--surface-2);
    color: var(--text);
    border-color: var(--border);
}

.adv-chevron {
    transition: transform .3s ease;
    font-size: 16px;
    line-height: 1;
}

.adv-toggle.active .adv-chevron { transform: rotate(180deg); }

.adv-panel {
    display: none;
    width: 100%;
    margin-top: 15px;
    background: var(--surface-2);
    border: 1px dashed var(--border);
    border-radius: 20px;
    padding: 18px 20px;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 4px 22px;
    animation: advDown .3s ease forwards;
}

@keyframes advDown {
    from { opacity: 0; transform: translateY(-10px); }
    to   { opacity: 1; transform: translateY(0); }
}

.adv-panel.mostrar { display: grid; }

.dato-fila {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    border-bottom: 1px solid var(--border);
    font-size: .86rem;
}

.dato-fila:last-child { border-bottom: none; }

.dato-label { font-weight: 600; color: var(--muted); }

.dato-valor { font-weight: 700; color: var(--text); white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 600px) {
    .inputs-grid { gap: 11px; }
    .field input { padding: 11px 13px; font-size: .88rem; }
    .res-grid { grid-template-columns: 1fr; }
    .paso-body { font-size: .88rem; }
}

@media (max-width: 900px) {
    .content { padding-left: 12px; padding-right: 12px; }
}