/*
 * Constructor VPS — hoja de estilos base, acotada bajo #vps-constructor para no afectar al tema de
 * WordPress donde se incrusta.
 *
 * TODOS los colores, tipografías y el radio salen de variables CSS --vps-*. Los valores de abajo son
 * solo los de reserva: la página emite después un <style> con las variables del branding
 * (config/branding.php, validadas en src/Branding.php), que tiene prioridad.
 */

#vps-constructor {
    /* Reserva (branding por defecto) */
    --vps-text: #333333;
    --vps-muted: #757575;
    --vps-heading: #333333;
    --vps-border: #cccccc;
    --vps-border-strong: #aaaaaa;
    --vps-surface: #ffffff;
    --vps-primary: #009d00;
    --vps-primary-hover: #008a00;
    --vps-primary-active: #007a00;
    --vps-on-primary: #ffffff;
    --vps-option-bg: #ffffff;
    --vps-option-border: #cccccc;
    --vps-option-text: #333333;
    --vps-option-hover-bg: #e6e6e6;
    --vps-option-hover-border: #adadad;
    --vps-option-hover-text: #333333;
    --vps-option-active-bg: #009d00;
    --vps-option-active-border: #007a00;
    --vps-option-active-text: #ffffff;
    --vps-option-disabled-bg: #f5f5f5;
    --vps-option-disabled-border: #dddddd;
    --vps-option-disabled-text: #aaaaaa;
    --vps-focus-ring: rgba(0, 157, 0, 0.45);
    --vps-os-windows-active-bg: #31b0d5;
    --vps-os-windows-active-border: #269abc;
    --vps-os-windows-active-text: #ffffff;
    --vps-os-linux-active-bg: #ec971f;
    --vps-os-linux-active-border: #d58512;
    --vps-os-linux-active-text: #ffffff;
    --vps-bundle-active-bg: #31b0d5;
    --vps-bundle-active-border: #269abc;
    --vps-bundle-active-text: #ffffff;
    --vps-cta-bg: #009d00;
    --vps-cta-border: #007a00;
    --vps-cta-text: #ffffff;
    --vps-cta-hover-bg: #007a00;
    --vps-cta-hover-border: #006400;
    --vps-cta-hover-text: #ffffff;
    --vps-secondary-bg: #009d00;
    --vps-secondary-border: #007a00;
    --vps-secondary-text: #ffffff;
    --vps-secondary-hover-bg: #007a00;
    --vps-secondary-hover-border: #006400;
    --vps-secondary-hover-text: #ffffff;
    --vps-tertiary-bg: #f8f9fa;
    --vps-tertiary-border: #cccccc;
    --vps-tertiary-text: #333333;
    --vps-tertiary-hover-bg: #e2e6ea;
    --vps-slider-track: #e1e4e9;
    --vps-slider-bar: #009d00;
    --vps-slider-handle: #007a00;
    --vps-slider-label-bg: #009d00;
    --vps-slider-label-text: #ffffff;
    --vps-slider-step: #aaaaaa;
    --vps-slider-step-hover: #757575;
    --vps-summary-bg: #dff0d8;
    --vps-summary-border: #d6e9c6;
    --vps-summary-text: #3c763d;
    --vps-summary-title: #3c763d;
    --vps-summary-total: #2b542c;
    --vps-alert-info-bg: #d9edf7;
    --vps-alert-info-border: #bce8f1;
    --vps-alert-info-text: #31708f;
    --vps-alert-success-bg: #dff0d8;
    --vps-alert-success-border: #d6e9c6;
    --vps-alert-success-text: #3c763d;
    --vps-alert-warning-bg: #fcf8e3;
    --vps-alert-warning-border: #faebcc;
    --vps-alert-warning-text: #8a6d3b;
    --vps-alert-error-bg: #f2dede;
    --vps-alert-error-border: #ebccd1;
    --vps-alert-error-text: #a94442;
    --vps-link: #007a00;
    --vps-link-hover: #005c00;
    --vps-font-heading: 'Montserrat', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --vps-font-body: 'Open Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --vps-font-size: 15px;
    --vps-radius: 4px;
    /* Distancia del panel pegajoso al borde superior (cabecera fija del tema) */
    --vps-sticky-top: 110px;

    font-family: var(--vps-font-body);
    font-size: var(--vps-font-size);
    color: var(--vps-text);
    text-align: left;
}

#vps-constructor [hidden] {
    display: none !important;
}

#vps-constructor a {
    color: var(--vps-link);
}

#vps-constructor a:hover,
#vps-constructor a:focus-visible {
    color: var(--vps-link-hover);
}

/* --- Títulos ----------------------------------------------------------------------------- */
#vps-constructor .vpsc-section-title {
    font-family: var(--vps-font-heading);
    font-size: 20px;
    font-weight: 700;
    color: var(--vps-heading);
    margin: 0 0 15px;
    padding-bottom: 4px;
    border-bottom: 3px solid var(--vps-border-strong);
}

#vps-constructor .vpsc-section-title--spaced {
    margin-top: 30px;
}

#vps-constructor .vpsc-heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-family: var(--vps-font-body);
    font-size: 18px;
    font-weight: 400;
    color: var(--vps-heading);
    margin: 0 0 10px;
    padding-bottom: 3px;
    border-bottom: 2px solid var(--vps-border);
}

#vps-constructor .vpsc-heading--slider {
    flex-wrap: wrap;
}

#vps-constructor .vpsc-heading label {
    margin: 0;
    font-weight: 400;
}

#vps-constructor .vpsc-block {
    margin-bottom: 18px;
}

/* --- Botones ------------------------------------------------------------------------------- */
#vps-constructor .btn {
    font-family: var(--vps-font-heading);
    text-transform: uppercase;
    font-size: 14px;
    padding: 12px;
    border-radius: var(--vps-radius);
}

#vps-constructor .btn-sm {
    padding: 6px 10px;
    font-size: 12px;
}

/* Botones de opción: normal / hover / seleccionado / deshabilitado / foco */
#vps-constructor .vpsc-btn {
    width: 100%;
    min-width: 0;
    white-space: normal;
    overflow-wrap: anywhere;
    font-weight: 600;
    background: var(--vps-option-bg);
    color: var(--vps-option-text);
    border: 1px solid var(--vps-option-border);
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#vps-constructor .vpsc-btn:hover {
    background: var(--vps-option-hover-bg);
    border-color: var(--vps-option-hover-border);
    color: var(--vps-option-hover-text);
}

#vps-constructor .vpsc-btn:focus-visible,
#vps-constructor .vpsc-icon-btn:focus-visible,
#vps-constructor .vpsc-action:focus-visible {
    outline: 3px solid var(--vps-focus-ring);
    outline-offset: 2px;
    box-shadow: none;
}

#vps-constructor .vpsc-btn.is-active,
#vps-constructor .vpsc-btn.is-active:hover {
    background: var(--vps-option-active-bg);
    border-color: var(--vps-option-active-border);
    color: var(--vps-option-active-text);
}

#vps-constructor .vpsc-btn:disabled,
#vps-constructor .vpsc-btn.disabled {
    background: var(--vps-option-disabled-bg);
    border-color: var(--vps-option-disabled-border);
    color: var(--vps-option-disabled-text);
    opacity: 1;
}

/* Variantes por familia de SO (catalog.php osFamilies[*].variant) */
#vps-constructor .vpsc-btn.is-active[data-variant="windows"] {
    background: var(--vps-os-windows-active-bg);
    border-color: var(--vps-os-windows-active-border);
    color: var(--vps-os-windows-active-text);
}

#vps-constructor .vpsc-btn.is-active[data-variant="linux"] {
    background: var(--vps-os-linux-active-bg);
    border-color: var(--vps-os-linux-active-border);
    color: var(--vps-os-linux-active-text);
}

#vps-constructor .vpsc-btn.is-active[data-variant="bundle"] {
    background: var(--vps-bundle-active-bg);
    border-color: var(--vps-bundle-active-border);
    color: var(--vps-bundle-active-text);
}

#vps-constructor .vpsc-grid {
    display: grid;
    gap: 5px;
}

#vps-constructor .vpsc-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#vps-constructor .vpsc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
#vps-constructor .vpsc-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* Pestañas Windows / Linux */
#vps-constructor .vpsc-tabs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-bottom: 5px;
}

#vps-constructor .vpsc-tabs .vpsc-btn:first-child { border-radius: var(--vps-radius) 0 0 var(--vps-radius); }
#vps-constructor .vpsc-tabs .vpsc-btn:last-child { border-radius: 0 var(--vps-radius) var(--vps-radius) 0; border-left: 0; }

#vps-constructor .vpsc-os-list {
    display: grid;
    gap: 3px;
}

#vps-constructor .vpsc-help {
    margin: 6px 0 0;
    font-size: small;
    line-height: 1.3;
    text-align: justify;
    color: var(--vps-muted);
}

#vps-constructor .vpsc-phone {
    font-weight: 700;
    white-space: nowrap;
}

/* Bundle "Seguro" */
#vps-constructor .vpsc-bundle {
    display: grid;
    grid-template-columns: 1fr 3fr;
    align-items: center;
    gap: 10px;
    margin-bottom: 5px;
    text-transform: none;
}

#vps-constructor .vpsc-bundle__title {
    font-weight: 700;
    text-transform: uppercase;
}

#vps-constructor .vpsc-bundle__desc {
    font-weight: 400;
    font-size: 13px;
    /* En mayúsculas como el resto de botones; los saltos de línea del texto (\n) se respetan */
    text-transform: uppercase;
    white-space: pre-line;
    border-left: 1px solid var(--vps-border);
    padding-left: 10px;
}

/* --- Alertas (independientes de Bootstrap) ---------------------------------------------- */
#vps-constructor .vpsc-alert {
    padding: 10px 14px;
    margin: 0 0 12px;
    font-size: 14px;
    border: 1px solid transparent;
    border-radius: var(--vps-radius);
}

#vps-constructor .vpsc-alert--info {
    background: var(--vps-alert-info-bg);
    border-color: var(--vps-alert-info-border);
    color: var(--vps-alert-info-text);
}

#vps-constructor .vpsc-alert--success {
    background: var(--vps-alert-success-bg);
    border-color: var(--vps-alert-success-border);
    color: var(--vps-alert-success-text);
}

#vps-constructor .vpsc-alert--warning {
    background: var(--vps-alert-warning-bg);
    border-color: var(--vps-alert-warning-border);
    color: var(--vps-alert-warning-text);
}

#vps-constructor .vpsc-alert--error {
    background: var(--vps-alert-error-bg);
    border-color: var(--vps-alert-error-border);
    color: var(--vps-alert-error-text);
}

#vps-constructor .vpsc-alert a {
    color: inherit;
    font-weight: 600;
}

#vps-constructor .vpsc-notice {
    margin: 6px 0 0;
    font-size: 13px;
    padding: 8px 12px;
}

#vps-constructor .vpsc-debug ul {
    margin: 4px 0 0;
    padding-left: 18px;
    font-size: 13px;
}

/* --- Sliders -------------------------------------------------------------------------------- */
#vps-constructor .vpsc-slider__controls {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: 13px;
}

/* Botones −/+ de los sliders: button-group de Bootstrap con los colores del branding */
#vps-constructor .vpsc-step-group .vpsc-step-btn {
    height: 24px;
    padding: 0 8px;
    font-size: 11px;
    line-height: 1;
    color: var(--vps-slider-step);
    background: var(--vps-surface);
    border: 1px solid var(--vps-border);
    border-radius: 0;
}

#vps-constructor .vpsc-step-group .vpsc-step-btn:hover,
#vps-constructor .vpsc-step-group .vpsc-step-btn:focus-visible {
    color: var(--vps-slider-step-hover);
    border-color: var(--vps-slider-step-hover);
    z-index: 1;
}

#vps-constructor .vpsc-step-group .vpsc-step-btn:disabled {
    color: var(--vps-option-disabled-border);
    background: var(--vps-option-disabled-bg);
    border-color: var(--vps-border);
    opacity: 1;
}

#vps-constructor .vpsc-slider__controls .vpsc-slider__value {
    margin-right: 4px;
}

#vps-constructor .vpsc-slider__value {
    width: 72px;
    height: 24px;
    padding: 1px 4px;
    text-align: right;
    font-size: 13px;
    color: var(--vps-text);
    background: var(--vps-surface);
    border: 1px solid var(--vps-border);
    border-radius: 0;
}

#vps-constructor .vpsc-slider__value[readonly] {
    background: var(--vps-option-disabled-bg);
    color: var(--vps-muted);
}

#vps-constructor .vpsc-icon-btn {
    background: none;
    border: 0;
    padding: 0 2px;
    font-size: 18px;
    line-height: 1;
    color: var(--vps-slider-step);
    cursor: pointer;
}

#vps-constructor .vpsc-icon-btn:hover {
    color: var(--vps-slider-step-hover);
}

#vps-constructor .vpsc-icon-btn:disabled {
    color: var(--vps-option-disabled-border);
    cursor: default;
}

/* ion.rangeSlider (skin "flat") con los colores del branding */
#vps-constructor .irs--flat .irs-line {
    background-color: var(--vps-slider-track);
}

#vps-constructor .irs--flat .irs-bar {
    background-color: var(--vps-slider-bar);
}

#vps-constructor .irs--flat .irs-handle > i:first-child,
#vps-constructor .irs--flat .irs-handle.state_hover > i:first-child,
#vps-constructor .irs--flat .irs-handle:hover > i:first-child {
    background-color: var(--vps-slider-handle);
}

#vps-constructor .irs--flat .irs-from,
#vps-constructor .irs--flat .irs-to,
#vps-constructor .irs--flat .irs-single {
    background-color: var(--vps-slider-label-bg);
    color: var(--vps-slider-label-text);
}

#vps-constructor .irs--flat .irs-from:before,
#vps-constructor .irs--flat .irs-to:before,
#vps-constructor .irs--flat .irs-single:before {
    border-top-color: var(--vps-slider-label-bg);
}

#vps-constructor .irs--flat .irs-min,
#vps-constructor .irs--flat .irs-max {
    color: var(--vps-muted);
    background-color: var(--vps-slider-track);
}

#vps-constructor .irs--flat .irs-grid-text {
    color: var(--vps-muted);
}

#vps-constructor .irs-disabled {
    opacity: .6;
}

/* --- Panel resumen (pegajoso con CSS) ------------------------------------------------------ */
#vps-constructor .vpsc-summary {
    position: sticky;
    top: var(--vps-sticky-top);
}

#vps-constructor .vpsc-summary.is-unpinned {
    position: static;
}

#vps-constructor .vpsc-card {
    position: relative;
    background: var(--vps-summary-bg);
    color: var(--vps-summary-text);
    border: 1px solid var(--vps-summary-border);
    border-radius: var(--vps-radius);
    padding: 12px 15px;
    margin-bottom: 6px;
    font-size: 14px;
}

#vps-constructor .vpsc-card__title {
    margin: 0 20px 10px;
    font-family: var(--vps-font-heading);
    font-size: 15px;
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    text-decoration: underline;
    color: var(--vps-summary-title);
}

#vps-constructor .vpsc-pin,
#vps-constructor .vpsc-close {
    position: absolute;
    top: 8px;
    right: 8px;
    font-size: 15px;
    color: var(--vps-summary-text);
}

#vps-constructor .vpsc-summary.is-unpinned .vpsc-pin {
    color: var(--vps-alert-error-text);
}

#vps-constructor .vpsc-summary-table {
    width: 100%;
    border-collapse: collapse;
    color: inherit;
}

#vps-constructor .vpsc-summary-table td {
    padding: 1px 0;
    vertical-align: top;
    border: 0;
    background: transparent;
    color: inherit;
}

#vps-constructor .vpsc-summary-table .vpsc-cell-qty {
    text-align: right;
    padding-right: 6px;
}

#vps-constructor .vpsc-summary-table .vpsc-cell-price {
    text-align: right;
    white-space: nowrap;
}

#vps-constructor .vpsc-summary-table .vpsc-cell-caption {
    text-align: center;
    font-weight: 600;
}

#vps-constructor .vpsc-summary-table .vpsc-cell-error {
    color: var(--vps-alert-error-text);
}

/* Precio total / alternativo: mismo formato que el constructor original (vps-constructor2) */
#vps-constructor .vpsc-total {
    padding-top: 15px;
    font-size: 15px;
    line-height: 120%;
}

#vps-constructor .vpsc-total--alt {
    padding-top: 20px;
}

#vps-constructor .vpsc-total__title {
    text-align: left;
    text-transform: uppercase;
    font-weight: 700;
}

#vps-constructor .vpsc-total--alt .vpsc-total__title {
    font-weight: 400;
}

#vps-constructor .vpsc-total__rule {
    margin: 5px 0;
    border: 0;
    border-top: 1px solid var(--vps-summary-border);
    opacity: 1;
}

#vps-constructor .vpsc-total__label {
    font-weight: 700;
}

#vps-constructor .vpsc-total__label a {
    margin-right: 5px;
}

#vps-constructor .vpsc-total__amount {
    font-weight: 700;
    text-align: right;
    color: var(--vps-summary-total);
}

#vps-constructor .vpsc-total--alt .vpsc-total__label,
#vps-constructor .vpsc-total--alt .vpsc-total__amount {
    font-weight: 400;
}

#vps-constructor .vpsc-total__amount.is-updated {
    animation: vpsc-flash .6s ease;
}

@keyframes vpsc-flash {
    from { opacity: .35; }
    to { opacity: 1; }
}

#vps-constructor .vpsc-total__row {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

#vps-constructor .vpsc-card a {
    color: inherit;
    text-decoration: none;
}

#vps-constructor .vpsc-card a:hover {
    text-decoration: underline;
}

#vps-constructor .vpsc-label {
    display: block;
    font-weight: 700;
    margin-bottom: 3px;
}

#vps-constructor .vpsc-card .form-control {
    border-radius: var(--vps-radius);
}

#vps-constructor .vpsc-errors {
    margin: 0 0 6px;
    font-size: 13px;
}

#vps-constructor .vpsc-errors ul {
    margin: 0;
    padding-left: 18px;
}

#vps-constructor .vpsc-actions {
    display: grid;
    gap: 5px;
    margin-bottom: 6px;
}

#vps-constructor .vpsc-main-btn {
    width: 100%;
}

/* Botón principal "Contratar" y secundarios (independientes del tema/Bootstrap) */
#vps-constructor .vpsc-action {
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

#vps-constructor .vpsc-action--cta {
    background-color: var(--vps-cta-bg);
    border-color: var(--vps-cta-border);
    color: var(--vps-cta-text);
}

#vps-constructor .vpsc-action--cta:hover,
#vps-constructor .vpsc-action--cta:focus-visible {
    background-color: var(--vps-cta-hover-bg);
    border-color: var(--vps-cta-hover-border);
    color: var(--vps-cta-hover-text);
}

#vps-constructor .vpsc-action--secondary {
    background-color: var(--vps-secondary-bg);
    border-color: var(--vps-secondary-border);
    color: var(--vps-secondary-text);
}

#vps-constructor .vpsc-action--secondary:hover,
#vps-constructor .vpsc-action--secondary:focus-visible,
#vps-constructor .vpsc-action--secondary[aria-expanded="true"] {
    background-color: var(--vps-secondary-hover-bg);
    border-color: var(--vps-secondary-hover-border);
    color: var(--vps-secondary-hover-text);
}

#vps-constructor .vpsc-action--tertiary {
    background-color: var(--vps-tertiary-bg);
    border-color: var(--vps-tertiary-border);
    color: var(--vps-tertiary-text);
}

#vps-constructor .vpsc-action--tertiary:hover,
#vps-constructor .vpsc-action--tertiary:focus-visible {
    background-color: var(--vps-tertiary-hover-bg);
    color: var(--vps-tertiary-text);
}

#vps-constructor .vpsc-action:disabled {
    background-color: var(--vps-option-disabled-bg);
    border-color: var(--vps-option-disabled-border);
    color: var(--vps-option-disabled-text);
    opacity: 1;
}

#vps-constructor .vpsc-panel {
    display: grid;
    gap: 6px;
}

#vps-constructor .vpsc-gdpr {
    font-size: 12px;
    line-height: 1.4;
}

#vps-constructor .vpsc-recaptcha {
    display: flex;
    justify-content: center;
    min-height: 78px;
}

#vps-constructor .vpsc-status {
    margin: 0;
    font-size: 13px;
    white-space: pre-line;
}

#vps-constructor .vpsc-contact {
    font-size: 13px;
    text-align: justify;
}

/* --- Accesibilidad: movimiento reducido ---------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    #vps-constructor *,
    #vps-constructor *::before,
    #vps-constructor *::after {
        transition: none !important;
        animation: none !important;
    }
}

/* --- Móvil: una columna, resumen debajo y no pegajoso -------------------------------------- */
@media (max-width: 767.98px) {
    #vps-constructor .vpsc-summary {
        position: static;
    }

    #vps-constructor .vpsc-pin {
        display: none;
    }

    #vps-constructor .vpsc-grid--4,
    #vps-constructor .vpsc-grid--3 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    #vps-constructor .vpsc-bundle {
        grid-template-columns: 1fr;
    }

    #vps-constructor .vpsc-bundle__desc {
        border-left: 0;
        padding-left: 0;
    }
}