/*
================================================================================
DIGITAL DOCUMENTS — HORIZONLABS
================================================================================
Archivo            : public/assets/css/dd_contacto_web.css
Propósito          : Estilos de la sección Contacto de la portada: formulario con modos (cotización, consulta
                     general, datos personales), campos con error, confirmación con Digi y tarjeta del mapa.
Creado por         : Oscar Hernández Pérez
Fecha de creación  : 2026-10-25
Última modificación: 2026-10-25

Historial:
- v1.3.4 | 2026-10-25 | Oscar Hernández Pérez | Creación.
================================================================================
*/

.dd-cw { margin-top: var(--dd-s-8); align-items: flex-start; gap: var(--dd-s-8); }
.dd-cw-card { position: relative; flex: 1; min-width: 300px; background: var(--dd-paper); border: 1px solid var(--dd-line-dim); border-radius: var(--dd-r-sm); padding: var(--dd-s-6); }
.dd-cw-lead { font-size: var(--dd-t-sm); color: var(--dd-ink-secondary); margin: 0 0 var(--dd-s-4); }

.dd-cw-tabs { display: flex; gap: .35rem; margin-bottom: var(--dd-s-5); padding: .25rem; background: var(--dd-sunken); border: 1px solid var(--dd-line-dim); border-radius: var(--dd-r-sm); }
.dd-cw-tab { flex: 1; padding: .5rem .6rem; border: 0; border-radius: calc(var(--dd-r-sm) - 2px); background: transparent; color: var(--dd-ink-secondary); font: inherit; font-size: var(--dd-t-sm); font-weight: 600; cursor: pointer; transition: background-color var(--dd-fast), color var(--dd-fast); }
.dd-cw-tab:hover { color: var(--dd-ink-primary); }
.dd-cw-tab.is-active { background: var(--dd-paper); color: var(--dd-ink-primary); box-shadow: 0 1px 3px rgba(15, 23, 42, .15); }

#dd-contact-form { display: flex; flex-direction: column; gap: var(--dd-s-4); }
.dd-cw-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--dd-s-4); }
@media (max-width: 640px) { .dd-cw-grid { grid-template-columns: 1fr; } }
.dd-cw-f[hidden] { display: none; }
.dd-cw-f label { display: block; font-size: var(--dd-t-xs); font-weight: 600; margin-bottom: var(--dd-s-1); color: var(--dd-ink-primary); }
.dd-cw-f input, .dd-cw-f textarea {
    width: 100%; padding: .6rem .75rem; border: 1px solid var(--dd-line-dim); border-radius: var(--dd-r-sm);
    background: var(--dd-sunken); color: var(--dd-ink-primary); font: inherit; font-size: max(16px, var(--dd-t-sm));
    transition: border-color var(--dd-fast), box-shadow var(--dd-fast), background-color var(--dd-fast);
}
.dd-cw-f textarea { resize: vertical; }
.dd-cw-f input:focus, .dd-cw-f textarea:focus { outline: none; border-color: var(--dd-bronze, #b45309); box-shadow: 0 0 0 3px rgba(180, 83, 9, .15); }
.dd-cw-f input.is-invalid, .dd-cw-f textarea.is-invalid { border-color: #dc2626; background: rgba(220, 38, 38, .06); box-shadow: 0 0 0 3px rgba(220, 38, 38, .12); }

.dd-cw-consent { display: flex; align-items: flex-start; gap: var(--dd-s-2); font-size: var(--dd-t-xs); color: var(--dd-ink-secondary); }
.dd-cw-consent input { margin-top: .2rem; }
.dd-cw-consent a { color: var(--dd-bronze); text-decoration: underline; }

.dd-cw-msg { padding: .75rem; border-radius: var(--dd-r-sm); font-size: var(--dd-t-sm); background: rgba(239, 68, 68, .12); color: #b91c1c; border: 1px solid rgba(239, 68, 68, .3); }
.dd-cw-msg[hidden] { display: none; }

/* Confirmación con Digi */
.dd-cw-done { text-align: center; padding: var(--dd-s-4) 0; }
.dd-cw-done[hidden] { display: none; }
.dd-cw-done p { color: var(--dd-ink-secondary); margin: var(--dd-s-2) auto var(--dd-s-5); max-width: 34ch; }
.dd-cw-digi { position: relative; width: 9rem; height: 10rem; margin: 0 auto var(--dd-s-3); }
.dd-cw-digi img, .dd-cw-digi canvas { position: absolute; left: 0; bottom: 0; width: 100%; height: 100%; object-fit: contain; object-position: bottom; pointer-events: none; user-select: none; }
.dd-cw-digi canvas { display: none; }
.dd-cw-digi.is-animating canvas { display: block; }
.dd-cw-digi.is-animating img { visibility: hidden; }

/* Invitación con botones y ventana del formulario */
.dd-cw-cta-btns { display: flex; flex-wrap: wrap; gap: var(--dd-s-3); margin: var(--dd-s-5) 0 var(--dd-s-4); }
.dd-cw-cta-note { font-size: var(--dd-t-xs); color: var(--dd-ink-secondary); margin: 0; }
.dd-cw-cta-note a { color: var(--dd-bronze); text-decoration: underline; }
.dd-cw-dialog {
    margin: auto; padding: 0; border: 1px solid var(--dd-line-dim); border-radius: 16px; overflow: hidden;
    width: min(680px, calc(100vw - 1.5rem)); max-height: calc(100dvh - 2rem);
    background: var(--dd-paper); color: var(--dd-ink-primary); box-shadow: 0 28px 70px rgba(0, 0, 0, .55);
}
.dd-cw-dialog[open] { display: block; overflow-y: auto; animation: ddCwIn 220ms ease-out both; }
.dd-cw-dialog::backdrop { background: rgba(8, 12, 20, .6); backdrop-filter: blur(4px); }
.dd-cw-dialog .dd-cw-card { border: 0; border-radius: 0; background: transparent; }
/* Dentro de la ventana el fondo y los campos tienen el mismo tono: se les da borde y relieve visibles */
.dd-cw-dialog { background: #0f1722; }
.dd-cw-dialog .dd-cw-f input, .dd-cw-dialog .dd-cw-f textarea { background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .28); color: #f1f5f9; }
.dd-cw-dialog .dd-cw-f input::placeholder, .dd-cw-dialog .dd-cw-f textarea::placeholder { color: rgba(226, 232, 240, .45); }
.dd-cw-dialog .dd-cw-f label { color: #e2e8f0; }
.dd-cw-dialog .dd-cw-f input:focus, .dd-cw-dialog .dd-cw-f textarea:focus { border-color: #7fb0e0; box-shadow: 0 0 0 3px rgba(127, 176, 224, .22); }
.dd-cw-dialog .dd-cw-f input:hover, .dd-cw-dialog .dd-cw-f textarea:hover { background: rgba(255, 255, 255, .09); }
.dd-cw-dialog .dd-cw-f input.is-invalid, .dd-cw-dialog .dd-cw-f textarea.is-invalid { border-color: #f87171; background: rgba(248, 113, 113, .12); }
.dd-cw-dialog .dd-cw-tabs { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .16); }
.dd-cw-dialog .dd-cw-tab.is-active { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: none; }
.dd-cw-close { position: absolute; top: .6rem; right: .6rem; z-index: 3; width: 34px; height: 34px; display: grid; place-items: center; border: 0; border-radius: 8px; background: transparent; color: var(--dd-ink-secondary); cursor: pointer; }
.dd-cw-close:hover, .dd-cw-close:focus-visible { background: rgba(255, 255, 255, .1); color: var(--dd-ink-primary); outline: none; }
/* Solo movimiento (sin opacidad): si la animación no corre, la ventana igual queda totalmente visible */
@keyframes ddCwIn { from { transform: translateY(10px) scale(.98); } to { transform: none; } }
@media (prefers-reduced-motion: reduce) { .dd-cw-dialog[open] { animation: none; } }

/* Columna lateral: mapa y accesos */
.dd-cw-side { flex: 0 0 340px; display: flex; flex-direction: column; gap: var(--dd-s-4); }
@media (max-width: 900px) { .dd-cw-side { flex-basis: 100%; } }
.dd-cw-box { background: var(--dd-paper); border: 1px solid var(--dd-line-dim); border-radius: var(--dd-r-sm); padding: var(--dd-s-6); }
.dd-cw-map iframe { display: block; width: 100%; height: 240px; border: 0; border-radius: var(--dd-r-sm); margin: 0 0 var(--dd-s-3); background: var(--dd-sunken); }
.dd-cw-addr { font-size: var(--dd-t-sm); color: var(--dd-ink-secondary); margin: 0 0 var(--dd-s-3); }