/* ============================================================================
Refugio de Glaciares — Hoja de estilo para el formulario de reserva
----------------------------------------------------------------------------
Paleta: hielo glaciar patagónico (teales profundos + un guiño "Laguna Rosa").
Tipografías: Fraunces (títulos, con carácter) + Onest (cuerpo, muy legible).
============================================================================ */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Onest:wght@400;500;600;700&display=swap');

:root {
    --ink:          #10333f;   /* texto principal            */
    --muted:        #5c7581;   /* labels / texto secundario  */
    --deep-1:       #0d4254;   /* header / CTA (arriba)      */
    --deep-2:       #072b39;   /* header / CTA (abajo)       */
    --glacier:      #1f7f9e;   /* acento frío: focus, links  */
    --glacier-soft: #e6f0f4;   /* fondos suaves / hover      */
    --rosa:         #d98a99;   /* guiño "Laguna Rosa"        */
    --line:         #d7e3e8;   /* bordes                     */
    --field-bg:     #fbfdfe;   /* fondo de inputs            */
    --page:         #eef4f6;   /* fondo de la página         */
    --card:         #ffffff;   /* fondo de la tarjeta        */
    --radius:       12px;
    --shadow:       0 1px 2px rgba(7, 43, 57, .04),
                    0 12px 32px -12px rgba(7, 43, 57, .22);
}


/* ---------------------------------------------------------------------------
1. Base
--------------------------------------------------------------------------- */
body {
    background:
        radial-gradient(1200px 500px at 50% -10%, #dfeef2 0%, rgba(223,238,242,0) 60%),
        var(--page);
    font-family: 'Onest', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    color: var(--ink);
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
    margin: 0;
    padding: 0 16px;
}

/* La tarjeta que contiene todo el formulario */
.fx-content {
    position: relative;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 20px;
    box-shadow: var(--shadow);
    padding: 0 40px 40px;
    overflow: hidden;
    box-sizing: border-box;
}

/* El framework deja varios <h2></h2> y filas vacías: los colapsamos */
.fx-content h2:empty { display: none; }

/* .header-refugio {
    position: relative;
    overflow: hidden;
    height: 132px;
    margin: 6px 0 28px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    text-align: center;
} */

/* Marca de agua glaciar muy sutil, evoca las líneas del hielo */
/* .header-refugio::before,
.header-refugio::after { position: relative; z-index: 1; } */

.fx-content::before {
    content: "";
    width: 500px;
    height: 190px;
    display: block;
    background-image: url("/images/app/logo-768x206.jpg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain;
    margin-left: auto; 
    margin-right: auto; 
}


/* ---------------------------------------------------------------------------
3. Título de la actividad y subtítulos de sección
--------------------------------------------------------------------------- */
.fx-iparagraph h2 {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 25px;
    line-height: 1.25;
    color: var(--ink);
    margin: 0 0 8px;
    letter-spacing: -.01em;
}

/* Subtítulos: "Fecha y disponibilidad", "Datos del pasajero", etc. */
.fx-isubtitle {
    display: flex;
    align-items: center;
    gap: 10px;
    font-family: 'Onest', sans-serif;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--glacier);
    margin: 30px 0 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
}


/* ---------------------------------------------------------------------------
4. Filas de campos: label | input | error
--------------------------------------------------------------------------- */
.fx-inputlist,
.fx-inputlist-row { width: 100%; border-collapse: collapse; }

.fx-inputlist-row td { padding: 7px 0; vertical-align: middle; }

/* Etiquetas */
.fx-input-label {
    width: 210px;
    padding-right: 18px !important;
    text-align: left;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.35;
    vertical-align: middle;
}
.fx-input-label label { cursor: pointer; }
.fx-input-label u { text-decoration: none; }          /* accesskeys sin subrayado ruidoso */
.fx-input-label b { color: var(--rosa); font-weight: 700; margin-left: 2px; } /* el asterisco * */

/* Celda del input */
.fx-input-input { vertical-align: middle; }

/* ---- Inputs de texto (nombre, apellido, email, teléfono, doc, etc.) ----
Apuntamos a .fx-istring para NO afectar el input del datepicker. */
.fx-istring input,
input.fx-input-text.fx-istring {
    width: 320px;
    max-width: 100%;
    box-sizing: border-box;
    padding: 9px 12px;
    font-family: 'Onest', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: 9px;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
    outline: none;
}
.fx-istring input::placeholder { color: #9fb3bb; }

/* ---- Selects (Fecha, Cantidad, Nacionalidad, Tipo de doc) ---- */
.fx-select,
select.fx-icombo {
    box-sizing: border-box;
    min-width: 200px;
    max-width: 100%;
    padding: 9px 38px 9px 12px;
    font-family: 'Onest', sans-serif;
    font-size: 14.5px;
    color: var(--ink);
    background-color: var(--field-bg);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 L6 6.5 L11 1.5' fill='none' stroke='%235c7581' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 13px center;
    border: 1px solid var(--line);
    border-radius: 9px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    transition: border-color .15s ease, box-shadow .15s ease;
    outline: none;
    cursor: pointer;
}

/* El combo de tipo de documento va pegado al número: le damos aire */
.fx-multipleinput { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.fx-multipleinput .fx-icombo select { min-width: 130px; }

/* Foco unificado y accesible para inputs y selects */
.fx-istring input:focus,
input.fx-input-text.fx-istring:focus,
.fx-select:focus,
select.fx-icombo:focus,
.date input.form-control:focus {
    border-color: var(--glacier);
    box-shadow: 0 0 0 3px rgba(31, 127, 158, .16);
    background: #fff;
}

/* ---- Datepicker (Fecha de nacimiento). Respeta su ancho inline, sólo afina el estilo ---- */
.date input.form-control {
    box-sizing: border-box;
    padding: 7px 8px !important;
    height: auto !important;
    font-size: 13.5px !important;
    border: 1px solid var(--line);
    border-radius: 8px 0 0 8px;
    background: var(--field-bg);
    color: var(--ink);
}
.date .input-group-text.addon,
.date .input-group-append .input-group-text {
    border: 1px solid var(--line);
    border-left: none;
    border-radius: 0 8px 8px 0;
    background: var(--glacier-soft);
    color: var(--glacier);
}

/* Mensajes de error del framework */
.fx-input-error { color: #c0392b; font-size: 12.5px; padding-left: 10px !important; }

/* ---------------------------------------------------------------------------
5. Términos y condiciones
--------------------------------------------------------------------------- */
/* La caja de texto de T&C trae border/padding inline: los reforzamos */
#i1200221957 {
    border: 1px solid var(--line) !important;
    border-radius: 10px !important;
    padding: 16px 18px !important;
    background: #f7fbfc;
    color: #35505b;
    font-size: 13.5px;
    line-height: 1.55;
    max-height: 190px !important;
}
#i1200221957 strong { color: var(--ink); }
#i1200221957 ul { padding-left: 18px; }
#i1200221957 li { margin-bottom: 6px; }

/* Checkbox "Acepto los términos y condiciones" */
label.fx-iboolean {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    margin: 4px 0 2px;
    background: var(--glacier-soft);
    border: 1px solid var(--line);
    border-radius: 10px;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--ink);
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease;
}
label.fx-iboolean:hover { border-color: var(--glacier); }
input.fx-iboolean[type="checkbox"] {
    width: 18px; height: 18px;
    accent-color: var(--glacier);
    cursor: pointer;
    flex: 0 0 auto;
}

div#fx-content {
    max-width: 800px; 
    margin-left: auto;
    margin-right: auto;
    margin-top: 2rem;
}  


/* ---------------------------------------------------------------------------
6. Botón "Ir a pagar"
--------------------------------------------------------------------------- */
#btnOk {
    height: auto; width: auth; font-size: 18px; padding: 0.5em;  
    display: inline-block;
    margin-top: 28px;
    padding: 14px 34px !important;
    width: auto;
    font-family: 'Onest', sans-serif;
    font-size: 16px !important;
    font-weight: 600;
    letter-spacing: .01em;
    color: #fff;
    background: linear-gradient(180deg, var(--deep-1) 0%, var(--deep-2) 100%);
    border: none;
    border-radius: 11px;
    cursor: pointer;
    box-shadow: 0 10px 22px -10px rgba(7, 43, 57, .6);
    transition: transform .12s ease, box-shadow .15s ease, filter .15s ease;
}
#btnOk:hover  { filter: brightness(1.08); box-shadow: 0 14px 26px -10px rgba(7, 43, 57, .7); }
#btnOk:active { transform: translateY(1px); }
#btnOk:focus-visible { outline: 3px solid rgba(31,127,158,.5); outline-offset: 2px; }

.fx-content div.er h1.er {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 26px;
    color: var(--ink);
    margin: 4px 0 2px;
    letter-spacing: -.01em;
}
/* "Voucher #NNN" */
.fx-content div.er h2.er {
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--glacier);
    margin: 0 0 18px;
}

.fx-content .er {
    font-family: 'Onest', sans-serif;
    font-size: 15px;
    color: var(--ink);
    margin: 4px 0 0;
}

/* "Método de pago" */
.fx-content h1.er {
    font-family: 'Fraunces', Georgia, serif;
    font-weight: 600;
    font-size: 26px;
    color: var(--ink);
    margin: 4px 0 2px;
    letter-spacing: -.01em;
}
/* "Voucher #NNN" */
.fx-content h2.er {
    font-family: 'Onest', sans-serif;
    font-weight: 600;
    font-size: 13px;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--glacier);
    margin: 0 0 18px;
}

/* Tabla resumen (Pasajeros, Excursión, Fecha, Unitario, Total) */
.fx-content table.ertv {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    margin: 0 0 6px;
    font-family: 'Onest', sans-serif;
    font-size: 15px;
    background: var(--field-bg);
    border: 1px solid var(--line);
    border-radius: 12px;
    overflow: hidden;
}
.fx-content table.ertv td {
    border: none;
    border-bottom: 1px solid var(--line);
    padding: 11px 16px;
    vertical-align: middle;
}
.fx-content .ertv-key {
    width: 42%;
    font-weight: 500;
    color: var(--muted);
    background: transparent;
    white-space: nowrap;
}
.fx-content .ertv-value { color: var(--ink); font-weight: 500; }

/* Última fila = Total: destacada */
.fx-content table.ertv tr:last-child td {
    border-bottom: none;
    background: var(--glacier-soft);
    padding-top: 13px;
    padding-bottom: 13px;
}

.fx-btn-return {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    font-family: 'Onest', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: var(--muted);
    background: #fff;
    border: 1px solid var(--line);
    border-radius: 9px;
    cursor: pointer;
    transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.fx-btn-return::before { content: "\2190"; font-size: 15px; line-height: 1; }
.fx-btn-return:hover { border-color: var(--glacier); color: var(--glacier); background: var(--glacier-soft); }
.fx-btn-return:focus-visible { outline: 3px solid rgba(31,127,158,.4); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
7. Responsive suave (por si el viewport queda angosto)
--------------------------------------------------------------------------- */
@media (max-width: 680px) {
    .fx-content { padding: 8px 20px 28px; margin: 20px auto; border-radius: 16px; }
    .fx-input-label { width: auto; display: block; padding-bottom: 4px !important; }
    .fx-istring input,
    input.fx-input-text.fx-istring,
    .fx-select,
    select.fx-icombo { width: 100%; min-width: 0; }
    #btnOk { width: 100%; text-align: center; }
}

/* Respeto por quienes prefieren menos movimiento */
@media (prefers-reduced-motion: reduce) {
    * { transition: none !important; }
}