/**
 * Formulario de solicitud de Chargpoint (COT-005).
 *
 * Paleta de la marca (#002657) y dos bloques en una sola pantalla.
 * Móvil primero: en pantallas chicas cada campo ocupa todo el ancho, que es
 * como lo va a usar la mayoría (criterio 9).
 */

.sw-ev-v2 {
    --sw-ev-marca: #002657;
    --sw-ev-marca-clara: #003a85;
    --sw-ev-borde: #ffffff;
    --sw-ev-error: #ffb4ab;

    box-sizing: border-box;
    max-width: 720px;
    margin: 0 auto;
}

.sw-ev-v2 *,
.sw-ev-v2 *::before,
.sw-ev-v2 *::after {
    box-sizing: inherit;
}

.sw-ev-v2-form {
    background-color: var(--sw-ev-marca);
    border-radius: 10px;
    padding: 20px;
    color: #ffffff;
}

.sw-ev-v2-bloque {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.25);
    margin: 0 0 18px;
    padding: 14px 0 0;
}

.sw-ev-v2-bloque:first-of-type {
    border-top: none;
    padding-top: 0;
}

.sw-ev-v2-bloque legend {
    color: #ffffff;
    font-size: 1.05rem;
    font-weight: 700;
    padding: 0;
    margin-bottom: 10px;
}

.sw-ev-v2-campo {
    margin: 0 0 14px;
}

.sw-ev-v2-campo label {
    display: block;
    color: #ffffff;
    font-size: 0.9rem;
    margin-bottom: 5px;
}

.sw-ev-v2-form input[type="text"],
.sw-ev-v2-form input[type="email"],
.sw-ev-v2-form input[type="tel"],
.sw-ev-v2-form select,
.sw-ev-v2-form textarea {
    width: 100%;
    max-width: 100%;
    padding: 11px 12px;
    background-color: var(--sw-ev-marca);
    color: #ffffff;
    border: 2px solid var(--sw-ev-borde);
    border-radius: 6px;
    font-size: 1rem;
    /* 16px mínimo: menos que eso y Safari en iPhone hace zoom al enfocar. */
}

.sw-ev-v2-form textarea {
    resize: vertical;
}

.sw-ev-v2-form ::placeholder {
    color: rgba(255, 255, 255, 0.65);
}

.sw-ev-v2-form select option {
    color: #ffffff;
    background-color: var(--sw-ev-marca);
}

/* La descripción del proyecto es el campo que reemplaza al cálculo de precio:
   se le da aire para que no parezca opcional. */
.sw-ev-v2-campo--destacado textarea {
    min-height: 120px;
}

.sw-ev-v2-ayuda {
    display: block;
    margin-top: 5px;
    color: rgba(255, 255, 255, 0.75);
    font-size: 0.82rem;
}

.sw-ev-v2-campo--error input,
.sw-ev-v2-campo--error select,
.sw-ev-v2-campo--error textarea {
    border-color: var(--sw-ev-error);
}

.sw-ev-v2-error {
    display: block;
    margin-top: 5px;
    color: var(--sw-ev-error);
    font-size: 0.85rem;
}

/* Campo trampa del antispam: nunca visible, nunca enfocable. */
.sw-ev-v2-trampa {
    position: absolute !important;
    left: -9999px !important;
    top: auto !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
}

.sw-ev-v2-visita {
    background-color: rgba(255, 255, 255, 0.12);
    border-left: 4px solid #ffffff;
    padding: 12px 14px;
    margin: 0 0 18px;
    font-size: 0.95rem;
    color: #ffffff;
}

.sw-ev-v2-acciones {
    margin: 0;
}

.sw-ev-v2-boton {
    width: 100%;
    padding: 14px 18px;
    background-color: #ffffff;
    color: var(--sw-ev-marca);
    border: 2px solid #ffffff;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
}

.sw-ev-v2-boton:hover,
.sw-ev-v2-boton:focus {
    background-color: var(--sw-ev-marca-clara);
    color: #ffffff;
}

.sw-ev-v2-boton:disabled {
    background-color: #cccccc;
    border-color: #cccccc;
    color: #555555;
    cursor: default;
}

.sw-ev-v2-aviso {
    display: none;
    margin: 14px 0 0;
    padding: 12px 14px;
    border-radius: 6px;
    background-color: #ffffff;
    color: #8c1d18;
    font-size: 0.95rem;
}

.sw-ev-v2-aviso--visible {
    display: block;
}

/* Comprobante */

.sw-ev-v2-ok {
    background-color: var(--sw-ev-marca);
    color: #ffffff;
    border-radius: 10px;
    padding: 22px 20px;
}

.sw-ev-v2-ok-titulo {
    margin: 0 0 6px;
    font-size: 1.25rem;
    font-weight: 700;
}

.sw-ev-v2-ok-folio {
    margin: 0 0 16px;
    font-size: 1.05rem;
}

.sw-ev-v2-ok-tabla {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 16px;
}

.sw-ev-v2-ok-tabla th,
.sw-ev-v2-ok-tabla td {
    text-align: left;
    padding: 8px 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
    font-size: 0.95rem;
    vertical-align: top;
    word-break: break-word;
}

.sw-ev-v2-ok-tabla th {
    width: 38%;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.sw-ev-v2-ok-visita {
    background-color: rgba(255, 255, 255, 0.12);
    border-left: 4px solid #ffffff;
    padding: 12px 14px;
    margin: 0 0 16px;
    font-size: 0.95rem;
}

.sw-ev-v2-ok-pdf {
    margin: 0;
}

/* Pedido de Diego: que bajar el PDF sea facil desde el celular, sin tener que
   entrar al correo. En pantalla chica ocupa todo el ancho, como el boton de
   enviar, para que sea un blanco de dedo comodo. */
.sw-ev-v2-ok-pdf a {
    display: block;
    width: 100%;
    padding: 15px 18px;
    background-color: #ffffff;
    color: var(--sw-ev-marca);
    border-radius: 6px;
    font-weight: 700;
    font-size: 1rem;
    text-align: center;
    text-decoration: none;
}

.sw-ev-v2-ok-pdf a:hover,
.sw-ev-v2-ok-pdf a:focus {
    background-color: var(--sw-ev-marca-clara);
    color: #ffffff;
}

/* Dos columnas sólo cuando hay ancho de sobra. */
@media (min-width: 620px) {
    .sw-ev-v2-form {
        padding: 26px;
    }

    .sw-ev-v2-bloque {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 18px;
    }

    .sw-ev-v2-bloque legend {
        grid-column: 1 / -1;
    }

    .sw-ev-v2-campo--ancho,
    .sw-ev-v2-bloque .sw-ev-v2-campo:has(textarea) {
        grid-column: 1 / -1;
    }

    .sw-ev-v2-boton {
        width: auto;
        min-width: 240px;
    }

    .sw-ev-v2-ok-pdf a {
        display: inline-block;
        width: auto;
        min-width: 260px;
    }
}