/* ============================================================
   VECTORES — estética glass del sitio (alineado a triangulos.css)
   ============================================================ */

/* título a la misma altura que Triángulos */
.page-head {
    padding-top: clamp(1.1rem, 3.5vw, 2.2rem);
}

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

.vec-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;
}

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

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

@media (max-width: 900px) {
    .vec-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);
    }
    .vec-mtoc-chip { flex: 1; justify-content: center; }
    .vec-mtoc::-webkit-scrollbar { display: none; }
}

@media (min-width: 901px) {
    .vec-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);
    }
    .vec-mtoc::-webkit-scrollbar { display: none; }
}

/* ---------- tarjeta glass base (igual a tri-card) ---------- */
.vec-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);
}

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

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

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

.vec-export {
    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;
}
.vec-export:hover { border-color: var(--accent); color: var(--accent); }

.vec-card-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 18px;
}

.vec-card-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    color: var(--muted);
    margin: 0;
}

.vec-card-title i { font-size: 17px; }

/* ---------- inputs (redondeo igual a .int-field-input de integrales) ---------- */
.vec-table input[type="number"],
.prod-grid input[type="number"],
.res-input {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 16px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text);
    outline: none;
    transition: all .25s ease;
    padding: 10px 13px;
    box-sizing: border-box;
}

.vec-table input[type="number"],
.prod-grid input[type="number"] { text-align: center; }

.prod-select {
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 999px;
    font-family: inherit;
    font-size: .9rem;
    color: var(--text);
    outline: none;
    transition: all .25s ease;
    padding: 10px 13px;
    box-sizing: border-box;
}

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

.prod-select:focus { transform: none; box-shadow: 0 0 0 3px var(--accent-soft); }

.vec-table input:disabled,
.res-input:disabled {
    opacity: .45;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.res-input { font-weight: 700; color: var(--accent); }
.res-input:disabled { color: var(--muted); }

/* ---------- tabla sumas ---------- */
/* Sin scroll horizontal en ninguna pantalla: se ajusta compactando */
.vec-table-wrap {
    overflow-x: hidden;
    padding: 8px 4px;
    margin-bottom: 6px;
}

.vec-table {
    width: 100%;
    min-width: 0;
    border-collapse: separate;
    border-spacing: 0 6px;
    table-layout: fixed;
}

.vec-table th {
    font-size: .56rem;
    text-transform: uppercase;
    color: var(--muted);
    padding: 6px 2px;
    font-weight: 700;
    letter-spacing: .3px;
    text-align: center;
    line-height: 1.2;
    white-space: normal;
    word-break: break-word;
}

.vec-table td {
    padding: 3px 2px;
    text-align: center;
    vertical-align: middle;
}

.vec-table td:first-child {
    font-weight: 700;
    color: var(--text);
}

.vec-table input[type="number"],
.vec-table .res-input {
    width: 100%;
    min-width: 0;
    margin: 0 auto;
    padding: 9px 4px;
    font-size: .82rem;
}

.color-picker {
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    padding: 0;
    background: none;
    overflow: hidden;
    transition: border-color .2s, transform .2s;
}

.color-picker::-webkit-color-swatch-wrapper { padding: 2px; }
.color-picker::-webkit-color-swatch { border: none; border-radius: 4px; }
.color-picker::-moz-color-swatch { border: none; border-radius: 4px; }
.color-picker:hover { border-color: var(--accent); transform: scale(1.08); }

.vec-table .color-picker:focus {
    background: none;
    transform: none;
    box-shadow: none;
}

/* botones de fila */
.btn-row-actions { display: flex; gap: 6px; justify-content: center; }

.btn-black {
    background: var(--text);
    color: var(--bg);
    border: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 14px;
    line-height: 1;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.btn-black:hover { transform: translateY(-2px); filter: brightness(1.1); }

.btn-remove { background: var(--surface-2); color: var(--muted); box-shadow: none; }
.btn-remove:hover { background: var(--muted); color: var(--bg); }

/* botón +/− de la columna Op. (icono que alterna al pulsar) */
.op-toggle {
    background: var(--surface-2);
    color: var(--accent);
    border: 1px solid var(--border);
    width: 28px;
    height: 28px;
    border-radius: 9px;
    cursor: pointer;
    font-size: 15px;
    line-height: 1;
    transition: all .25s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
}
.op-toggle:hover { border-color: var(--accent); transform: translateY(-2px); box-shadow: 0 8px 18px var(--accent-soft); }
.op-toggle.neg { color: #d0446c; }
.op-toggle.neg:hover { border-color: #d0446c; box-shadow: 0 8px 18px rgba(208, 68, 108, .18); }

/* botón añadir vector (igual al icono "+" de Acerca de) */
.btn-add-vector {
    width: 30px;
    height: 30px;
    border-radius: 10px;
    background: var(--accent-soft);
    color: var(--accent);
    border: none;
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: transform .35s cubic-bezier(.32,.72,0,1), box-shadow var(--transition), background var(--transition);
}
.btn-add-vector:hover {
    background: var(--accent);
    color: var(--accent-text-on);
    transform: translateY(-2px) rotate(90deg);
    box-shadow: 0 10px 22px var(--accent-soft);
}

/* columnas proporcionadas (auto se redistribuye si se oculta Comp. Z) */
.vec-table th:nth-child(1), .vec-table td:nth-child(1) { width: 6%; }
.vec-table th:nth-child(2), .vec-table td:nth-child(2) { width: 9%; }
.vec-table th:nth-child(3), .vec-table td:nth-child(3) { width: 7%; }
.vec-table th:nth-child(4), .vec-table td:nth-child(4) { width: 14%; }
.vec-table th:nth-child(5), .vec-table td:nth-child(5) { width: 14%; }
.vec-table th:nth-child(6), .vec-table td:nth-child(6) { width: 14%; }
.vec-table th:nth-child(7), .vec-table td:nth-child(7) { width: 14%; }
.vec-table th:nth-child(8), .vec-table td:nth-child(8) { width: 14%; }
.vec-table th:nth-child(9), .vec-table td:nth-child(9) { width: 8%; }

@media (min-width: 700px) {
    .vec-table th { font-size: .62rem; padding: 8px 6px; letter-spacing: .5px; }
    .vec-table td { padding: 4px 5px; }
    .vec-table input[type="number"],
    .vec-table .res-input { padding: 10px 8px; font-size: .9rem; }
    .op-toggle { width: 32px; height: 32px; font-size: 17px; border-radius: 10px; }
    .btn-black { width: 34px; height: 34px; font-size: 16px; }
}

/* móvil: compacto, sigue sin scroll horizontal */
@media (max-width: 700px) {
    .vec-table-wrap { padding: 8px 2px; }
    .vec-table { border-spacing: 0 3px; }
    .vec-table th { font-size: .5rem; line-height: 1.1; letter-spacing: .1px; }
    .vec-table td { padding: 1px 1px; }
    .vec-table td:first-child { font-size: .62rem; }
    .vec-table input[type="number"],
    .vec-table .res-input { font-size: .72rem; padding: 6px 3px; border-radius: 16px; }
    .op-toggle { width: 24px; height: 24px; font-size: 13px; border-radius: 7px; }
    .btn-add-vector { width: 30px; height: 30px; font-size: 15px; }
    .color-picker { width: 24px; height: 24px; border-radius: 6px; }
    .btn-black { width: 24px; height: 24px; font-size: 12px; }
}

/* ---------- botones (igual a tri-btn) ---------- */
.vec-btn {
    display: inline-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);
}

.vec-btn i { font-size: 17px; }

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

/* botón de acción principal: ancho completo, igual que .int-calc-btn / .drv-calc-btn */
.vec-btn-calc { width: 100%; }

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

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

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

.vec-btn-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
    margin-top: 18px;
}

/* contenedores internos apilados de cada pestaña */
#sec-sumas,
#sec-productos {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* ---------- grafica ---------- */
.vec-graph {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    height: 460px;
    overflow: hidden;
}

.vec-graph > div { width: 100%; height: 100%; }

.modebar { display: none !important; }

/* ---------- pasos (igual a triangulos) ---------- */
.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;
    text-align: center;
    font-size: .93rem;
    line-height: 1.55;
    color: var(--text);
    opacity: .92;
}

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

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

/* ---------- productos ---------- */
.prod-select-row {
    display: flex;
    justify-content: center;
    margin-bottom: 20px;
}

.prod-select { padding: 12px 22px; font-weight: 600; font-size: .86rem; }

.prod-pills {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 20px;
}

.prod-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 13px 10px;
    border-radius: 16px;
    background: var(--surface-2);
    border: 1px solid var(--border);
    color: var(--text);
    font-family: inherit;
    font-weight: 700;
    font-size: .82rem;
    cursor: pointer;
    text-align: center;
    transition: all .25s ease;
}
.prod-pill i { font-size: 16px; flex-shrink: 0; }
.prod-pill:hover { border-color: var(--accent-soft); transform: translateY(-2px); }
.prod-pill.active {
    background: var(--accent);
    color: var(--accent-text-on);
    border-color: var(--accent);
}
.prod-pill.active i { color: var(--accent-text-on); }

.prod-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 16px;
    margin-bottom: 20px;
}

.vector-card {
    position: relative;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 18px 14px;
    transition: transform .25s ease, border-color .25s ease;
}

.vector-card:hover {
    transform: translateY(-3px);
    border-color: var(--accent-soft);
}

.vector-card h3 {
    font-size: .68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--muted);
    margin: 0 0 14px;
    text-align: center;
    border-bottom: 1px solid var(--border);
    padding-bottom: 10px;
}

.card-color {
    position: absolute;
    top: 12px;
    right: 12px;
}

.inputs-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.inputs-row input[type="number"] { width: 100%; min-width: 0; padding: 10px 6px; }

.vector-card .hint {
    text-align: center;
    font-size: .72rem;
    color: var(--muted);
    font-weight: 600;
    margin-top: 10px;
}

#res-prod-box {
    margin-top: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 1.02rem;
    color: var(--text);
    min-height: 26px;
    padding: 16px 12px;
    background: var(--accent-soft);
    border-radius: 16px;
    border: 1px solid var(--accent-soft);
}

/* ---------- responsive ---------- */
@media (max-width: 600px) {
    .vec-card { padding: 18px 12px; }
    .inputs-grid { gap: 11px; }
    .prod-select { font-size: .78rem; padding: 11px 14px; }
    .prod-grid { grid-template-columns: 1fr; gap: 12px; }
    .vec-graph { height: 380px; }
    .vec-btn-row { gap: 10px; }
    .paso-body { font-size: .88rem; }
}

/* en móvil los botones de Sumas quedan en el mismo renglón: se encogen, sin cortarse ni con scroll */
@media (max-width: 700px) {
    #sec-sumas .vec-btn-row { flex-wrap: nowrap; gap: 8px; }
    #sec-sumas .vec-btn-row .vec-btn {
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        padding: 11px 8px;
        font-size: .72rem;
        gap: 6px;
        white-space: nowrap;
    }
    #sec-sumas .vec-btn-row .vec-btn i { font-size: 15px; flex-shrink: 0; }
}

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