/* ==========================================================================
   Ventana de los documentos legales
   --------------------------------------------------------------------------
   La usan el formulario de cita de un servicio y las postulaciones. Una
   sola implementación: antes vivía dentro de la página de servicio y para
   reusarla habría habido que copiarla.
   ========================================================================== */

.lg-ventana {
    width: min(760px, calc(100vw - 28px));
    max-width: none;
    max-height: min(86dvh, 760px);
    padding: 0;
    border: 0;
    border-radius: 16px;
    background: #fff;
    color: #2b3a4d;
    box-shadow: 0 30px 80px rgba(10, 18, 30, .34);
}
.lg-ventana::backdrop { background: rgba(10, 18, 30, .58); }
.lg-ventana[open] { display: grid; grid-template-rows: auto minmax(0, 1fr) auto; }

.lg-cabecera {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    padding: 20px 22px 16px;
    border-bottom: 1px solid #e4eaf1;
}
.lg-cabecera h2 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
    letter-spacing: -.015em;
    color: var(--marca-azul, #102a43);
}
.lg-cerrar {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 1px solid #e4eaf1;
    border-radius: 9px;
    background: #fff;
    color: #5f6e81;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    transition: background .15s ease, color .15s ease;
}
.lg-cerrar:hover { background: #f2f5f9; color: #2b3a4d; }

/* El texto legal es largo: se desplaza solo este bloque y la cabecera y
   el pie se quedan fijos. */
.lg-cuerpo {
    overflow-y: auto;
    padding: 20px 22px;
    font-size: 14.5px;
    line-height: 1.7;
    color: #4a5a6d;
}
.lg-cuerpo:focus-visible { outline: 2px solid rgba(107, 30, 46, .35); outline-offset: -2px; }
.lg-cuerpo h2, .lg-cuerpo h3 {
    margin: 22px 0 8px;
    color: var(--marca-azul, #102a43);
    font-size: 15.5px;
    font-weight: 700;
}
.lg-cuerpo h2:first-child, .lg-cuerpo h3:first-child { margin-top: 0; }
.lg-cuerpo p { margin: 0 0 13px; }
.lg-cuerpo ul, .lg-cuerpo ol { margin: 0 0 13px; padding-left: 20px; }
.lg-cuerpo li { margin-bottom: 6px; }
.lg-cargando { color: #7b8899; font-style: italic; }

.lg-pie {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 14px 22px;
    border-top: 1px solid #e4eaf1;
    background: #fafbfd;
    border-radius: 0 0 16px 16px;
}
.lg-pie a {
    color: var(--marca-marron, #6b1e2e);
    font-size: 13px;
    font-weight: 650;
    text-decoration: none;
}
.lg-pie a:hover { text-decoration: underline; }
.lg-boton {
    padding: 10px 20px;
    border: 0;
    border-radius: 9px;
    background: var(--marca-azul, #102a43);
    color: #fff;
    font: inherit;
    font-size: 13.5px;
    font-weight: 650;
    cursor: pointer;
    transition: background .16s ease;
}
.lg-boton:hover { background: var(--marca-marron, #6b1e2e); }

@media (max-width: 560px) {
    .lg-ventana { width: calc(100vw - 16px); max-height: 92dvh; }
    .lg-pie { flex-direction: column-reverse; align-items: stretch; }
    .lg-boton { width: 100%; }
    .lg-pie a { text-align: center; }
}

/* ==========================================================================
   VENTANA ESTILO APPLE
   Esquinas amplias, fondo desenfocado detras, entrada suave, cabecera y
   pie sin rayas, texto de lectura comodo y un solo boton en pildora.
   Pisa lo anterior; vale para registro, agenda, postulaciones y solicitud.
   ========================================================================== */
.lg-ventana {
    width: min(720px, calc(100vw - 32px));
    max-height: min(84dvh, 780px);
    border-radius: 28px;
    color: #1d1d1f;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .06), 0 30px 90px rgba(0, 0, 0, .22);
}
.lg-ventana::backdrop {
    background: rgba(0, 0, 0, .38);
    -webkit-backdrop-filter: blur(10px) saturate(140%);
    backdrop-filter: blur(10px) saturate(140%);
}
.lg-ventana[open] { animation: lg-entrar .28s cubic-bezier(.2, .8, .2, 1); }
.lg-ventana[open]::backdrop { animation: lg-velo .28s ease; }
@keyframes lg-entrar { from { opacity: 0; transform: translateY(12px) scale(.98); } }
@keyframes lg-velo { from { opacity: 0; } }

.lg-cabecera {
    align-items: center;
    padding: 26px 28px 14px;
    border-bottom: 0;
}
.lg-cabecera h2 {
    color: #1d1d1f;
    font-size: 24px;
    font-weight: 600;
    letter-spacing: -.025em;
}
.lg-cerrar {
    width: 36px;
    height: 36px;
    border: 0;
    border-radius: 50%;
    background: #f5f5f7;
    color: #6e6e73;
    font-size: 22px;
}
.lg-cerrar:hover { background: #e8e8ed; color: #1d1d1f; }
.lg-cerrar:focus-visible,
.lg-boton:focus-visible { outline: 2px solid var(--marca-marron, #6b1e2e); outline-offset: 2px; }

.lg-cuerpo {
    margin: 0 28px;
    padding: 6px 0 18px;
    color: #424245;
    font-size: 15.5px;
    line-height: 1.65;
    scrollbar-width: thin;
}
.lg-cuerpo :is(p, li) { text-align: left; text-align-last: auto; hyphens: manual; }
.lg-cuerpo h2,
.lg-cuerpo h3 {
    margin: 26px 0 8px;
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -.01em;
}
.lg-cuerpo strong { color: #1d1d1f; font-weight: 600; }
.lg-cuerpo a { color: var(--marca-marron, #6b1e2e); }

.lg-pie {
    padding: 16px 28px 24px;
    border-top: 0;
    background: #fff;
    border-radius: 0 0 28px 28px;
    box-shadow: 0 -1px 0 #f0f0f3;
}
.lg-pie a { color: #6e6e73; font-weight: 500; }
.lg-pie a:hover { color: #1d1d1f; }
.lg-boton {
    min-height: 44px;
    padding: 0 26px;
    border-radius: 999px;
    background: var(--marca-marron, #6b1e2e);
    font-size: 15px;
    font-weight: 600;
}
.lg-boton:hover { background: #571825; }

@media (max-width: 560px) {
    /* En el celular sube desde abajo, como una hoja. */
    .lg-ventana {
        width: 100vw;
        max-width: 100vw;
        max-height: 90dvh;
        margin: auto 0 0;
        border-radius: 24px 24px 0 0;
    }
    .lg-ventana[open] { animation-name: lg-subir; }
    @keyframes lg-subir { from { transform: translateY(40px); opacity: 0; } }
    .lg-cabecera { padding: 22px 20px 10px; }
    .lg-cabecera h2 { font-size: 20px; }
    .lg-cuerpo { margin: 0 20px; }
    .lg-pie { padding: 14px 20px 22px; border-radius: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .lg-ventana[open], .lg-ventana[open]::backdrop { animation: none; }
}

/* Jerarquia dentro de la ventana: los apartados (1, 2, 3...) nunca deben
   igualar al titulo del documento. Con mas especificidad para que no los
   pisen las reglas de titulos de la pagina que abre la ventana (en el
   registro salian a 36px, mas grandes que el propio titulo). */
dialog.lg-ventana .lg-cabecera h2 { font-size: 24px; }
dialog.lg-ventana .lg-cuerpo :is(h1, h2, h3, h4) {
    margin: 24px 0 8px;
    color: #1d1d1f;
    font-size: 17px;
    font-weight: 600;
    line-height: 1.35;
    letter-spacing: -.01em;
}
dialog.lg-ventana .lg-cuerpo :is(h1, h2, h3, h4):first-child { margin-top: 4px; }
@media (max-width: 560px) {
    dialog.lg-ventana .lg-cabecera h2 { font-size: 20px; }
    dialog.lg-ventana .lg-cuerpo :is(h1, h2, h3, h4) { font-size: 16px; }
}