/**
 * Tulkio
 * --------------------------------------------------------------------------
 * Estilos específicos de:
 *
 * /calculadoras/
 *
 * Incluye:
 *
 * - Cabecera de herramienta
 * - Patrocinios por herramienta
 * - Caja principal de calculadora
 * - Formularios
 * - Resultados
 * - Estados
 * - Ejemplos
 * - Contenido editorial
 * - FAQ
 * - Avisos
 * - Herramientas relacionadas
 * - Responsive
 *
 * Este archivo depende de las variables definidas en:
 *
 * /assets/css/main.css
 * --------------------------------------------------------------------------
 */


/* ==========================================================================
   PÁGINA DE HERRAMIENTA
   ========================================================================== */

.tool-page {

    background:
        var(--tulkio-bg);

}


/* ==========================================================================
   HERO DE HERRAMIENTA
   ========================================================================== */

.tool-hero {

    position:
        relative;

    overflow:
        hidden;

    padding:
        4.5rem 0 4rem;

    background:
        linear-gradient(
            180deg,
            #f4f8ff 0%,
            #ffffff 100%
        );

    border-bottom:
        1px solid var(--tulkio-border-light);

}


.tool-hero::before {

    content:
        "";

    position:
        absolute;

    top:
        -280px;

    left:
        50%;

    width:
        750px;

    height:
        750px;

    transform:
        translateX(-50%);

    background:
        radial-gradient(
            circle,
            rgba(37, 99, 235, 0.10) 0%,
            rgba(37, 99, 235, 0) 68%
        );

    pointer-events:
        none;

}


.tool-hero-inner {

    position:
        relative;

    z-index:
        1;

    max-width:
        820px;

}


.tool-title {

    margin:
        1rem 0 1.25rem;

    color:
        var(--tulkio-secondary);

    font-size:
        clamp(2.2rem, 5vw, 3.75rem);

    font-weight:
        800;

    letter-spacing:
        -0.045em;

}


.tool-intro {

    max-width:
        720px;

    margin:
        0 auto 1.5rem;

    color:
        var(--tulkio-text-muted);

    font-size:
        clamp(1.05rem, 2vw, 1.2rem);

    line-height:
        1.75;

}


.tool-features {

    margin-top:
        1.75rem;

}


.tool-feature-badge {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    padding:
        0.45rem 0.75rem;

    color:
        var(--tulkio-text-muted);

    background:
        rgba(255, 255, 255, 0.85);

    border:
        1px solid var(--tulkio-border);

    border-radius:
        999px;

    font-size:
        0.825rem;

    font-weight:
        600;

    box-shadow:
        var(--tulkio-shadow-sm);

}


/* ==========================================================================
   PATROCINIO POR HERRAMIENTA
   ========================================================================== */

.tool-sponsorship {

    width:
        100%;

    max-width:
        680px;

    margin:
        1.25rem auto 0;

}


.tulkio-sponsorship {

    width:
        100%;

}


.tulkio-sponsorship__inner {

    position:
        relative;

    overflow:
        hidden;

    padding:
        1rem 1.15rem;

    background:
        rgba(255, 255, 255, 0.92);

    border:
        1px solid var(--tulkio-border);

    border-radius:
        var(--tulkio-radius-lg);

    box-shadow:
        var(--tulkio-shadow-sm);

}


.tulkio-sponsorship__inner::before {

    content:
        "";

    position:
        absolute;

    inset:
        0 auto 0 0;

    width:
        4px;

    background:
        var(--tulkio-primary);

}


.tulkio-sponsorship__content {

    display:
        flex;

    flex-direction:
        column;

    align-items:
        center;

    gap:
        0.55rem;

    text-align:
        center;

}


.tulkio-sponsorship__label {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.725rem;

    font-weight:
        700;

    letter-spacing:
        0.075em;

    line-height:
        1.35;

    text-transform:
        uppercase;

}


.tulkio-sponsorship__identity {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-wrap:
        wrap;

    gap:
        0.65rem;

    min-width:
        0;

}


.tulkio-sponsorship__logo-link {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    flex-shrink:
        0;

    text-decoration:
        none;

}


.tulkio-sponsorship__logo {

    display:
        block;

    width:
        auto;

    max-width:
        140px;

    height:
        auto;

    max-height:
        42px;

    object-fit:
        contain;

}


.tulkio-sponsorship__name {

    color:
        var(--tulkio-secondary);

    font-size:
        1rem;

    font-weight:
        800;

    line-height:
        1.35;

    text-decoration:
        none;

    transition:
        color var(--tulkio-transition);

}


a.tulkio-sponsorship__name:hover {

    color:
        var(--tulkio-primary);

}


.tulkio-sponsorship__logo-link:focus-visible,
.tulkio-sponsorship__name:focus-visible {

    outline:
        3px solid rgba(37, 99, 235, 0.22);

    outline-offset:
        3px;

    border-radius:
        var(--tulkio-radius-sm);

}


.tulkio-sponsorship__description {

    max-width:
        560px;

    margin:
        0;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.825rem;

    line-height:
        1.55;

}


.tool-sponsored .tool-sponsorship {

    animation:
        tulkio-sponsorship-in 0.25s ease-out both;

}


@keyframes tulkio-sponsorship-in {

    from {

        opacity:
            0;

        transform:
            translateY(4px);

    }

    to {

        opacity:
            1;

        transform:
            translateY(0);

    }

}


/* ==========================================================================
   CONTENEDOR PRINCIPAL
   ========================================================================== */

.tool-main-section {

    padding-top:
        4rem;

    padding-bottom:
        4rem;

}


.tool-container {

    max-width:
        850px;

}


/* ==========================================================================
   CAJA DE CALCULADORA
   ========================================================================== */

.tool-box {

    overflow:
        hidden;

    background:
        #ffffff;

    border:
        1px solid var(--tulkio-border);

    border-radius:
        var(--tulkio-radius-xl);

    box-shadow:
        0 18px 55px rgba(15, 23, 42, 0.08);

}


.tool-box-header {

    padding:
        1.75rem 2rem;

    background:
        var(--tulkio-bg-soft);

    border-bottom:
        1px solid var(--tulkio-border);

}


.tool-box-title {

    margin:
        0 0 0.35rem;

    font-size:
        1.35rem;

}


.tool-box-subtitle {

    margin:
        0;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.95rem;

}


.tool-box-body {

    padding:
        2rem;

}


/* ==========================================================================
   FORMULARIOS DE HERRAMIENTAS
   ========================================================================== */

.tool-form {

    display:
        flex;

    flex-direction:
        column;

    gap:
        1.5rem;

}


.tool-form-row {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        1.25rem;

}


.tool-form-group {

    display:
        flex;

    flex-direction:
        column;

    gap:
        0.45rem;

}


.tool-label {

    color:
        var(--tulkio-secondary);

    font-size:
        0.925rem;

    font-weight:
        700;

}


.tool-label-help {

    color:
        var(--tulkio-text-muted);

    font-size:
        0.8rem;

    font-weight:
        400;

}


.tool-input,
.tool-select,
.tool-textarea {

    width:
        100%;

    min-height:
        52px;

    padding:
        0.75rem 0.9rem;

    color:
        var(--tulkio-text);

    background:
        #ffffff;

    border:
        1px solid var(--tulkio-border);

    border-radius:
        0.75rem;

    outline:
        none;

    transition:
        border-color var(--tulkio-transition),
        box-shadow var(--tulkio-transition),
        background-color var(--tulkio-transition);

}


.tool-textarea {

    min-height:
        140px;

    resize:
        vertical;

}


.tool-input::placeholder,
.tool-textarea::placeholder {

    color:
        var(--tulkio-text-light);

}


.tool-input:hover,
.tool-select:hover,
.tool-textarea:hover {

    border-color:
        #cbd5e1;

}


.tool-input:focus,
.tool-select:focus,
.tool-textarea:focus {

    border-color:
        #60a5fa;

    box-shadow:
        0 0 0 0.22rem
        rgba(37, 99, 235, 0.12);

}


.tool-input:disabled,
.tool-select:disabled,
.tool-textarea:disabled {

    cursor:
        not-allowed;

    background:
        var(--tulkio-bg-soft);

    opacity:
        0.75;

}


.tool-help {

    color:
        var(--tulkio-text-muted);

    font-size:
        0.8rem;

    line-height:
        1.45;

}


/* ==========================================================================
   INPUT GROUP
   ========================================================================== */

.tool-input-group {

    display:
        flex;

    align-items:
        stretch;

}


.tool-input-group .tool-input {

    border-top-right-radius:
        0;

    border-bottom-right-radius:
        0;

}


.tool-input-addon {

    display:
        flex;

    align-items:
        center;

    justify-content:
        center;

    min-width:
        56px;

    padding:
        0 0.85rem;

    color:
        var(--tulkio-text-muted);

    background:
        var(--tulkio-bg-soft);

    border:
        1px solid var(--tulkio-border);

    border-left:
        0;

    border-radius:
        0 0.75rem 0.75rem 0;

    font-weight:
        700;

}


/* ==========================================================================
   BOTONES DE CALCULADORA
   ========================================================================== */

.tool-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.75rem;

    margin-top:
        0.25rem;

}


.tool-submit {

    min-height:
        52px;

    padding:
        0.8rem 1.4rem;

    font-weight:
        700;

}


.tool-reset {

    min-height:
        52px;

}


/* ==========================================================================
   RESULTADOS
   ========================================================================== */

.tool-result {

    margin-top:
        1.75rem;

    padding:
        1.5rem;

    background:
        var(--tulkio-primary-light);

    border:
        1px solid #bfdbfe;

    border-radius:
        var(--tulkio-radius-lg);

}


.tool-result[hidden] {
    display: none !important;
}


.tool-result-label {

    margin-bottom:
        0.35rem;

    color:
        var(--tulkio-primary-dark);

    font-size:
        0.825rem;

    font-weight:
        700;

    letter-spacing:
        0.04em;

    text-transform:
        uppercase;

}


.tool-result-value {

    color:
        var(--tulkio-secondary);

    font-size:
        clamp(1.8rem, 5vw, 2.65rem);

    font-weight:
        800;

    line-height:
        1.15;

    letter-spacing:
        -0.04em;

}


.tool-result-description {

    margin:
        0.65rem 0 0;

    color:
        var(--tulkio-text-muted);

}


.tool-result-grid {

    display:
        grid;

    grid-template-columns:
        repeat(2, minmax(0, 1fr));

    gap:
        1rem;

    margin-top:
        1rem;

}


.tool-result-item {

    padding:
        1rem;

    background:
        rgba(255, 255, 255, 0.7);

    border:
        1px solid rgba(191, 219, 254, 0.8);

    border-radius:
        var(--tulkio-radius);

}


.tool-result-item-label {

    display:
        block;

    margin-bottom:
        0.25rem;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.8rem;

}


.tool-result-item-value {

    color:
        var(--tulkio-secondary);

    font-size:
        1.1rem;

    font-weight:
        700;

}


/* ==========================================================================
   RESULTADOS: ESTADOS
   ========================================================================== */

.tool-result-success {

    background:
        #f0fdf4;

    border-color:
        #bbf7d0;

}


.tool-result-warning {

    background:
        #fffbeb;

    border-color:
        #fde68a;

}


.tool-result-error {

    background:
        #fef2f2;

    border-color:
        #fecaca;

}


.tool-error {

    margin-top:
        0.4rem;

    color:
        var(--tulkio-danger);

    font-size:
        0.825rem;

    font-weight:
        600;

}


/* ==========================================================================
   PLACEHOLDER DE DESARROLLO
   ========================================================================== */

.tool-development-placeholder {

    padding:
        3rem 1.5rem;

    text-align:
        center;

    background:
        var(--tulkio-bg-soft);

    border:
        1px dashed var(--tulkio-border);

    border-radius:
        var(--tulkio-radius-lg);

}


/* ==========================================================================
   DISCLAIMER
   ========================================================================== */

.tool-disclaimer {

    margin-top:
        1.25rem;

    padding:
        1rem 1.15rem;

    color:
        #854d0e;

    background:
        #fefce8;

    border:
        1px solid #fde68a;

    border-radius:
        var(--tulkio-radius);

    font-size:
        0.875rem;

    line-height:
        1.6;

}


.tool-disclaimer strong {

    color:
        #713f12;

}


/* ==========================================================================
   CONTENIDO EDITORIAL
   ========================================================================== */

.tool-content {

    max-width:
        850px;

}


.tool-content > *:first-child {
    margin-top: 0;
}


.tool-content > *:last-child {
    margin-bottom: 0;
}


.tool-content h2 {

    margin:
        2.75rem 0 1rem;

    font-size:
        clamp(1.6rem, 3vw, 2.1rem);

}


.tool-content h3 {

    margin:
        2rem 0 0.75rem;

    font-size:
        1.25rem;

}


.tool-content p {

    color:
        #475569;

    line-height:
        1.8;

}


.tool-content ul,
.tool-content ol {

    padding-left:
        1.4rem;

    color:
        #475569;

}


.tool-content li {

    margin-bottom:
        0.5rem;

}


.tool-content strong {

    color:
        var(--tulkio-secondary);

}


.tool-content table {

    width:
        100%;

    margin:
        1.5rem 0;

    border-collapse:
        collapse;

}


.tool-content th,
.tool-content td {

    padding:
        0.8rem 1rem;

    text-align:
        left;

    border:
        1px solid var(--tulkio-border);

}


.tool-content th {

    background:
        var(--tulkio-bg-soft);

    color:
        var(--tulkio-secondary);

}


/* ==========================================================================
   FÓRMULAS / BLOQUES DESTACADOS
   ========================================================================== */

.tool-formula {

    margin:
        1.5rem 0;

    padding:
        1.25rem;

    text-align:
        center;

    color:
        var(--tulkio-secondary);

    background:
        var(--tulkio-bg-soft);

    border:
        1px solid var(--tulkio-border);

    border-radius:
        var(--tulkio-radius);

    font-family:
        "SFMono-Regular",
        Consolas,
        "Liberation Mono",
        monospace;

    font-size:
        1.05rem;

    font-weight:
        700;

}


/* ==========================================================================
   EJEMPLOS
   ========================================================================== */

.tool-example-result {

    margin-top:
        1.25rem;

    padding:
        0.85rem 1rem;

    color:
        var(--tulkio-primary-dark);

    background:
        var(--tulkio-primary-light);

    border:
        1px solid #dbeafe;

    border-radius:
        var(--tulkio-radius-sm);

    font-weight:
        700;

}


/* ==========================================================================
   FAQ
   ========================================================================== */

.tool-faq-section {

    background:
        #ffffff;

}


.tool-faq {

    border:
        1px solid var(--tulkio-border);

    border-radius:
        var(--tulkio-radius-lg);

    overflow:
        hidden;

}


.tool-faq .accordion-item {

    border:
        0;

    border-bottom:
        1px solid var(--tulkio-border);

}


.tool-faq .accordion-item:last-child {

    border-bottom:
        0;

}


.tool-faq .accordion-button {

    padding:
        1.25rem 1.4rem;

    color:
        var(--tulkio-secondary);

    background:
        #ffffff;

    font-size:
        1rem;

    font-weight:
        700;

    box-shadow:
        none;

}


.tool-faq .accordion-button:not(.collapsed) {

    color:
        var(--tulkio-primary-dark);

    background:
        var(--tulkio-primary-light);

}


.tool-faq .accordion-button:focus {

    border-color:
        transparent;

    box-shadow:
        inset 0 0 0 2px
        rgba(37, 99, 235, 0.12);

}


.tool-faq .accordion-body {

    padding:
        1.25rem 1.4rem 1.5rem;

    color:
        var(--tulkio-text-muted);

    line-height:
        1.75;

}


/* ==========================================================================
   ÚLTIMA REVISIÓN
   ========================================================================== */

.tool-updated {

    padding:
        1rem;

    color:
        var(--tulkio-text-muted);

    border-top:
        1px solid var(--tulkio-border-light);

    font-size:
        0.825rem;

}


/* ==========================================================================
   HERRAMIENTAS RELACIONADAS
   ========================================================================== */

.related-tools {

    border-top:
        1px solid var(--tulkio-border-light);

    border-bottom:
        1px solid var(--tulkio-border-light);

}


/* ==========================================================================
   TABLAS DE RESULTADOS
   ========================================================================== */

.tool-table-wrapper {

    width:
        100%;

    margin-top:
        1.5rem;

    overflow-x:
        auto;

    border:
        1px solid var(--tulkio-border);

    border-radius:
        var(--tulkio-radius);

}


.tool-table {

    width:
        100%;

    min-width:
        560px;

    margin:
        0;

    border-collapse:
        collapse;

}


.tool-table th,
.tool-table td {

    padding:
        0.8rem 1rem;

    text-align:
        right;

    border-bottom:
        1px solid var(--tulkio-border);

}


.tool-table th:first-child,
.tool-table td:first-child {

    text-align:
        left;

}


.tool-table th {

    color:
        var(--tulkio-secondary);

    background:
        var(--tulkio-bg-soft);

    font-size:
        0.825rem;

    font-weight:
        700;

}


.tool-table td {

    color:
        var(--tulkio-text-muted);

    font-size:
        0.875rem;

}


.tool-table tr:last-child td {

    border-bottom:
        0;

}


/* ==========================================================================
   TOOLBAR DE RESULTADOS
   ========================================================================== */

.tool-result-actions {

    display:
        flex;

    flex-wrap:
        wrap;

    gap:
        0.5rem;

    margin-top:
        1rem;

}


.tool-action-button {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    min-height:
        38px;

    padding:
        0.45rem 0.75rem;

    color:
        var(--tulkio-text-muted);

    background:
        #ffffff;

    border:
        1px solid var(--tulkio-border);

    border-radius:
        0.55rem;

    font-size:
        0.8rem;

    font-weight:
        600;

    transition:
        color var(--tulkio-transition),
        border-color var(--tulkio-transition),
        background-color var(--tulkio-transition);

}


.tool-action-button:hover {

    color:
        var(--tulkio-primary);

    background:
        var(--tulkio-primary-light);

    border-color:
        #bfdbfe;

}


/* ==========================================================================
   LOADING
   ========================================================================== */

.tool-loading {

    display:
        inline-flex;

    align-items:
        center;

    gap:
        0.6rem;

    color:
        var(--tulkio-text-muted);

    font-size:
        0.875rem;

}


.tool-spinner {

    width:
        1.1rem;

    height:
        1.1rem;

    border:
        2px solid var(--tulkio-border);

    border-top-color:
        var(--tulkio-primary);

    border-radius:
        50%;

    animation:
        tulkio-spin 0.7s linear infinite;

}


@keyframes tulkio-spin {

    to {
        transform: rotate(360deg);
    }

}


/* ==========================================================================
   PRIVACIDAD LOCAL
   ========================================================================== */

.tool-local-processing {

    display:
        flex;

    align-items:
        center;

    gap:
        0.65rem;

    margin-top:
        1rem;

    padding:
        0.75rem 0.9rem;

    color:
        var(--tulkio-text-muted);

    background:
        var(--tulkio-bg-soft);

    border:
        1px solid var(--tulkio-border-light);

    border-radius:
        var(--tulkio-radius-sm);

    font-size:
        0.8rem;

}


.tool-local-processing-icon {

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    width:
        1.65rem;

    height:
        1.65rem;

    flex-shrink:
        0;

    color:
        var(--tulkio-primary);

    background:
        var(--tulkio-primary-light);

    border-radius:
        50%;

    font-weight:
        700;

}


/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 991.98px) {

    .tool-hero {

        padding:
            4rem 0 3.5rem;

    }


    .tool-box-header {

        padding:
            1.5rem;

    }


    .tool-box-body {

        padding:
            1.5rem;

    }


    .tool-content {

        max-width:
            760px;

    }

}


@media (max-width: 767.98px) {

    .tool-sponsorship {

        max-width:
            620px;

    }


    .tool-form-row {

        grid-template-columns:
            1fr;

    }


    .tool-result-grid {

        grid-template-columns:
            1fr;

    }


    .tool-actions {

        flex-direction:
            column;

    }


    .tool-actions .btn,
    .tool-submit,
    .tool-reset {

        width:
            100%;

    }

}


@media (max-width: 575.98px) {

    .tool-sponsorship {

        margin-top:
            1rem;

    }


    .tulkio-sponsorship__inner {

        padding:
            0.9rem 1rem;

    }


    .tulkio-sponsorship__identity {

        flex-direction:
            column;

        gap:
            0.5rem;

    }


    .tulkio-sponsorship__logo {

        max-width:
            120px;

        max-height:
            36px;

    }


    .tulkio-sponsorship__description {

        font-size:
            0.8rem;

    }


    .tool-hero {

        padding:
            3.25rem 0 3rem;

    }


    .tool-title {

        margin-top:
            0.85rem;

    }


    .tool-main-section {

        padding-top:
            2.5rem;

        padding-bottom:
            2.5rem;

    }


    .tool-box {

        border-radius:
            var(--tulkio-radius-lg);

    }


    .tool-box-header {

        padding:
            1.25rem;

    }


    .tool-box-body {

        padding:
            1.25rem;

    }


    .tool-result {

        padding:
            1.25rem;

    }


    .tool-feature-badge {

        font-size:
            0.775rem;

    }


    .tool-content h2 {

        margin-top:
            2.25rem;

    }


    .tool-faq .accordion-button {

        padding:
            1rem;

    }


    .tool-faq .accordion-body {

        padding:
            1rem;

    }

}


/* ==========================================================================
   MODO REDUCCIÓN DE MOVIMIENTO
   ========================================================================== */

@media (
    prefers-reduced-motion: reduce
) {

    .tool-spinner,
    .tool-sponsored .tool-sponsorship {

        animation:
            none;

    }

}