/* --- Reset y base accesible --- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
margin: 0;
font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";
line-height: 1.5;
color: #0f172a; /* slate-900 */
background: #f8fafc; /* slate-50 */
}
img { max-width: 100%; display: block; }
label { display: inline-block; font-weight: 600; }
input, textarea, button { font: inherit; }
:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }

/* --- Layout --- */
.wrap { max-width: 720px; margin: 40px auto; padding: 0 16px; }

.header {
display: flex; align-items: center; gap: 16px; margin-bottom: 20px;
}
.logo-box{
    width: 250px;           /* o 72/96 según prefieras */
    height: 100px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #fff;
    display: grid;
    place-items: center;
    overflow: hidden;
    margin-right: 8px;     /* separa del título */
}
.logo-box img{
    width: 100%;
    height: 100%;
    object-fit: contain;
}
.header h1 {
margin: 0; font-size: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
.sub { color: #475569; margin-top: 4px; }

.card {
background: #ffffff; border-radius: 16px; padding: 24px; margin-top: 16px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04), 0 8px 24px rgba(15, 23, 42, 0.08);
border: 1px solid #e2e8f0; /* slate-200 */
}

fieldset { border: none; padding: 0; margin: 0; }
legend { font-size: 1.05rem; font-weight: 700; margin-bottom: 12px; }

.grid {
display: grid; gap: 16px;
grid-template-columns: 1fr;
}
@media (min-width: 640px) {
.grid.two { 
    grid-template-columns: 1fr 1fr;
    align-items: start; 
}
}

.control { display: grid; gap: 6px; align-self: start;}
.req::after { content: " *"; color: #dc2626; font-weight: 700; }
.hint { color: #64748b; font-size: 0.9rem; }

input[type="text"], input[type="email"], input[type="search"], textarea {
min-height: 44px; width: 100%; border: 1px solid #cbd5e1; border-radius: 12px; padding: 12px 14px;
background: #f8fafc; transition: border-color .2s, background-color .2s, box-shadow .2s;
}
input::placeholder, textarea::placeholder { color: #94a3b8; }
input:focus, textarea:focus { background: #fff; border-color: #ff8000; box-shadow: 0 0 0 4px rgba(37,99,235,0.12); }

/* Validación nativa visible */
input:required:invalid { border-color: #fca5a5; } /* red-300 */

.actions { margin-top: 16px; display: flex; gap: 12px; justify-content: center;}
.btn {
appearance: none; border: none; cursor: pointer; padding: 12px 18px; border-radius: 12px;
font-weight: 700; letter-spacing: .2px; background: #ff8000; color: #fff;
position: relative; box-shadow: 0 6px 16px rgb(194, 116, 0); transition: transform .05s ease, box-shadow .2s ease, background .2s ease;
}
.btn:hover { background: #e77400; box-shadow: 0 10px 24px rgba(134, 87, 24, 0.35); }
.btn:active { transform: translateY(1px); }

.foot-note { color: #475569; font-size: 0.95rem; margin-top: 16px; }
.muted { color: #64748b; }

select,
input[type="text"],
input[type="email"],
input[type="search"],
textarea {
    width: 100%;
    border: 1px solid #cbd5e1;
    border-radius: 12px;
    padding: 12px 14px;
    background: #f8fafc;
    transition: border-color .2s, background-color .2s, box-shadow .2s;
    min-height: 44px; /* altura uniforme */
    appearance: none; /* limpia estilo nativo en select (soporte amplio) */
}

/* Indicador de desplegable en <select> (fallback simple) */
select {
    background-image: linear-gradient(45deg, transparent 50%, #64748b 50%),
                        linear-gradient(135deg, #64748b 50%, transparent 50%),
                        linear-gradient(to right, transparent, transparent);
    background-position: calc(100% - 18px) calc(50% - 3px),
                        calc(100% - 12px) calc(50% - 3px),
                        0 0;
    background-size: 6px 6px, 6px 6px, 100% 100%;
    background-repeat: no-repeat;
}

/* Foco consistente */
select:focus,
input:focus,
textarea:focus {
    background: #fff;
    border-color: #2563eb;
    box-shadow: 0 0 0 4px rgba(37,99,235,0.12);
    outline: 0;
}

/* Estado inválido (requerido no seleccionado) */
select:required:invalid,
input:required:invalid {
  border-color: #fca5a5; /* red-300 */
}

/* Readonly visual */
input[readonly] {
    color: #475569;
  background: #f1f5f9;   /* slate-100 */
  border-color: #e2e8f0;  /* slate-200 */
}

/* Alineación vertical en filas de 2 columnas (evita “estiramiento”) */
.grid.two { 
    align-items: start;
}
.control { 
    align-self: start;
}

/* Espaciado del hint si lo usas bajo el campo */
.hint { 
    margin-top: 2px; 
    color: #64748b; 
    font-size: 0.9rem; 
}

select:required:invalid {
    color: #94a3b8; /* El mismo color que usas para 'input::placeholder' */
}

/* 2. Asegura que al seleccionar una opción válida, el texto vuelva a ser oscuro */
select option {
    color: #0f172a; /* El color de texto normal de tu 'body' */
}

/* 3. Estilo para un <select> completamente deshabilitado */
select[disabled] {
    color: #64748b; /* Un color más apagado (color de "hint") */
    background: #f1f5f9; /* Mismo fondo que 'input[readonly]' */
    border-color: #e2e8f0; /* Mismo borde que 'input[readonly]' */
    background-image: none; /* Oculta la flecha personalizada */
    cursor: not-allowed;
}

.overlay {
    position: fixed; inset: 0;
    background: rgba(15,23,42,0.45);
    z-index: 999;
    transition: opacity .2s ease-in-out;
}

.overlay.hidden {
    opacity: 0; 
    pointer-events: none;
}

.modal {
    position: fixed; inset: 0;
    display: grid; place-items: center;
    z-index: 1000;
    transition: opacity .2s ease-in-out, transform .2s ease-in-out;
}

.modal.hidden {
    opacity: 0;
    transform: scale(0.95);
    pointer-events: none;
}

.modal .modal-card {
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 16px;
    box-shadow: 0 8px 24px rgba(15,23,42,0.18);
    width: min(520px, 92vw);
    padding: 20px;
}

.modal .modal-card h2 { margin: 0 0 8px; font-size: 1.1rem; }
.modal .modal-card p  { margin: 0 0 14px; color: #475569; }

.modal .actions {
    display: flex; gap: 12px; justify-content: flex-end; flex-wrap: wrap;
}

.btn.btn-secondary {
    background: #fff; color: #0f172a; border: 1px solid #cbd5e1; box-shadow: none;
}
.btn.btn-secondary:hover { background: #f8fafc; }

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.btn .spinner {
    display: none;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    height: 1.2em;
    width: 1.2em;
    animation: rotate 1s linear infinite;
    margin-left: 8px;
}
.spinner circle {
    stroke: #fff;
    stroke-linecap: round;
    animation: dash 1.5s ease-in-out infinite;
}
.btn[disabled] .btn-text { visibility: hidden; } /* Oculta texto al enviar */
.btn[disabled] .spinner { display: inline-block; } /* Muestra spinner */

@keyframes rotate { 100% { transform: rotate(360deg); } }
@keyframes dash {
    0% { stroke-dasharray: 1, 150; stroke-dashoffset: 0; }
    50% { stroke-dasharray: 90, 150; stroke-dashoffset: -35; }
    100% { stroke-dasharray: 90, 150; stroke-dashoffset: -124; }
}