/* Estilo del formulario web — réplica del look del plugin anterior
   (panel gris, tarjetas blancas, etiquetas en mayúsculas, valores grandes).
   Para igualar el color de acento del sitio, cambia --acento y --acento-oscuro. */
:root {
    --acento: #1a73e8;
    --acento-oscuro: #1557b0;
    --acento-suave: #e8f0fe;
    --panel: #f8f8f8;
    --tarjeta: #ffffff;
    --borde: #e3e5e8;
    --texto: #1c1f26;
    --etiqueta: #6b7280;
    --placeholder: #a9afb8;
    --verde: #1e7e34;
    --rojo: #c0392b;
    --radio: 16px;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: transparent; }
body { font-family: 'Lato', Arial, sans-serif; color: var(--texto); font-size: 16px; }

.wb { max-width: 680px; margin: 0 auto; padding: 8px; }
.wb-panel { background: var(--panel); border-radius: 14px; padding: 20px 18px; }
.wb-titulo { font-size: 1.3rem; font-weight: 900; margin: 0 0 4px; line-height: 1.25; }
.wb-sub { color: var(--etiqueta); margin: 0 0 18px; font-size: .95rem; }
.wb-seccion { font-size: 1rem; font-weight: 900; margin: 22px 0 12px 4px; }
.wb-seccion:first-of-type { margin-top: 8px; }

/* Cada campo es una tarjeta: etiqueta chica arriba, valor grande abajo */
.wb-campo {
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    padding: 14px 20px 12px; margin-bottom: 14px; display: flex; flex-direction: column;
    transition: border-color .15s, box-shadow .15s;
}
.wb-campo:focus-within { border-color: var(--acento); box-shadow: 0 0 0 3px var(--acento-suave); }
.wb-fila { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wb-fila .wb-campo { margin-bottom: 14px; }
.wb-rel { position: relative; }

label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--etiqueta); margin-bottom: 4px; }
input, select, textarea {
    font: inherit; font-size: 1.2rem; font-weight: 700; color: var(--texto);
    border: 0; background: transparent; padding: 4px 0; width: 100%; outline: none;
}
input::placeholder, textarea::placeholder { color: var(--placeholder); font-weight: 400; }
input[readonly] { color: var(--etiqueta); }
textarea { resize: vertical; min-height: 56px; font-size: 1rem; font-weight: 400; }
input[type=date], input[type=time] { min-height: 36px; }
select {
    appearance: none; -webkit-appearance: none; cursor: pointer; padding-right: 28px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='12' viewBox='0 0 20 12'%3E%3Cpath d='M1 1l9 9 9-9' fill='none' stroke='%236b7280' stroke-width='1.5'/%3E%3C/svg%3E") no-repeat right 2px center;
}

.wb-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.wb-sugerencias {
    list-style: none; margin: 6px 0 0; padding: 6px; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio);
    max-height: 260px; overflow-y: auto; z-index: 10; box-shadow: 0 10px 28px rgba(0,0,0,.14);
}
.wb-sugerencias li { padding: 10px 14px; cursor: pointer; display: flex; justify-content: space-between; gap: 10px; border-radius: 10px; font-weight: 700; }
.wb-sugerencias li:hover, .wb-sugerencias li.activo { background: var(--acento-suave); }
.wb-sugerencias .wb-precio { color: var(--etiqueta); font-weight: 400; white-space: nowrap; }
.wb-tarifa { margin-top: 10px; padding: 10px 14px; background: var(--acento-suave); border-radius: 12px; font-weight: 700; color: var(--acento-oscuro); font-size: .95rem; }

.wb-boton {
    width: 100%; padding: 17px; border: 0; border-radius: var(--radio); background: var(--acento);
    color: #fff; font: inherit; font-size: 1.05rem; font-weight: 900; cursor: pointer; margin-top: 6px;
}
.wb-boton:hover { background: var(--acento-oscuro); }
.wb-boton:disabled { opacity: .6; cursor: wait; }
.wb-boton-sec { background: var(--tarjeta); color: var(--acento); border: 1px solid var(--acento); margin-top: 10px; }
.wb-boton-sec:hover { background: var(--acento-suave); }

.wb-alerta { padding: 12px 16px; border-radius: 12px; margin-bottom: 14px; background: #fdecea; color: var(--rojo); border: 1px solid #f3c2c6; font-weight: 700; font-size: .95rem; }

.wb-exito { text-align: center; padding: 8px 0; }
.wb-check { width: 60px; height: 60px; line-height: 60px; margin: 0 auto 8px; border-radius: 50%; background: #eaf6ec; color: var(--verde); font-size: 32px; }
.wb-folio-etq { margin: 12px 0 0; color: var(--etiqueta); font-size: .75rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.wb-folio { margin: 0 0 14px; font-size: 2.8rem; font-weight: 900; color: var(--acento-oscuro); }
.wb-resumen {
    display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; text-align: left; max-width: 400px;
    margin: 0 auto 14px; background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 20px;
}
.wb-resumen dt { color: var(--etiqueta); font-size: .75rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; align-self: center; }
.wb-resumen dd { margin: 0; font-weight: 700; }

@media (max-width: 520px) {
    .wb-fila { grid-template-columns: 1fr; gap: 0; }
    .wb-panel { padding: 16px 12px; }
    .wb-campo { padding: 12px 16px 10px; }
}