/**
 * DES Proposal Form — estilos del formulario de propuesta.
 * Todo el CSS del formulario vive en el módulo (se carga por hookHeader).
 * Usa los tokens globales del tema (--des-color-primary, --fuente, etc.).
 * @author David Escudero Digital Studio
 */

.des-proposal {
    background: #8B1D12;
    color: #fff;
    padding: 20px 30px;
}
.des-proposal__title {
    font: 600 21px/25px var(--fuente);
    text-transform: uppercase;
    text-align: center;
    margin-bottom: 5px;
    color: #FAF6F0;
}
.des-proposal__text {
    margin: 0 0 16px;
    font: 400 16px/19px var(--fuente);
    color: #FFFFFF;
    text-align: center;
}
.des-proposal__field {
    width: 100%;
    margin-bottom: 7px;
    padding: 3px 5px;
    border-radius: 0px;
    background: #FAF6F0;
    color: var(--brand-ink, #333);
    font: 400 14px/21px "Helvetica Neue", sans-serif;
}
.des-proposal__field::placeholder { color: #9aa0a6; }

/* Input de fecha: el reset del tema quita la apariencia nativa (y con el padding
   base queda demasiado fino / sin icono en móvil). Le damos alto, padding, fondo
   e icono de calendario propio (SVG) fiable en iOS y Android. */
.des-proposal__field[type="date"] {
    -webkit-appearance: none;
    appearance: none;
    min-height: 44px;
    padding: 10px 12px;
    background-color: #FAF6F0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%238C1C13' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    color: var(--brand-ink, #333);
}
/* Ocultamos el indicador nativo (evita icono doble en Chrome/Android); el campo
   sigue abriendo el datepicker al tocarlo. */
.des-proposal__field[type="date"]::-webkit-calendar-picker-indicator {
    opacity: 0;
    width: 44px;
    cursor: pointer;
}
/* El valor de la fecha alineado a la izquierda y visible. */
.des-proposal__field[type="date"]::-webkit-date-and-time-value { text-align: left; }
.des-proposal__btn {
    width: 100%;
    margin-top: 6px;
    padding: 13px 16px;
    border-radius: 0px;
    background: #DCB065;
    color: #8C1C13;
    font: 700 18px/24px var(--fuente, "Open Sans"), sans-serif;
    text-transform: uppercase;
    transition: opacity .3s ease;
    cursor: pointer;
}
.des-proposal__btn:hover { opacity:0.8 }

/* Etiqueta del campo fecha + textarea */
.des-proposal__label {
    display: block;
    margin: 2px 0 4px;
    font: 500 12px/1.2 var(--fuente, "Open Sans"), sans-serif;
    color: rgba(255, 255, 255, .85);
}
.des-proposal__textarea {
    resize: vertical;
    min-height: 70px;
    font: 400 14px/1.4 var(--fuente, "Open Sans"), sans-serif;
}

/* Mensajes de estado */
.des-proposal__notice {
    margin: 0 0 14px;
    padding: 10px 12px;
    border-radius: 6px;
    font: 500 13px/1.4 var(--fuente, "Open Sans"), sans-serif;
}
.des-proposal__notice--ok { background: #e7f6ec; color: #1e7a3d; }
.des-proposal__notice--err { background: #fdecec; color: #b5291f; }

.des-proposal .row{
	display: flex;
	flex-direction: row;
	gap:10px;
}

/* ── Página dedicada (controlador 'page') ───────────────────────────── */
.des-proposal-page {
    padding-block: 40px 64px;
}
.des-proposal-page .des-proposal {
    max-width: 640px;
    margin: 0 auto;
    padding: 40px 45px;
}
@media (max-width: 575px) {
    .des-proposal-page .des-proposal { padding: 28px 20px; }
    .des-proposal-page { padding-block: 28px 44px; }
}

/* Móvil: los campos deben tener font-size ≥16px para que iOS Safari no haga
   zoom automático al enfocar el input. (El diseño desktop mantiene 14px.) */
@media (max-width: 991px) {
    .des-proposal__field,
    .des-proposal__textarea,
    .des-proposal select { font-size: 16px; }
}