/* ================================================================
   Portal Paciente — Modales compartidos
   Cargado en: portal (vía header.php) y login (claveUnica)
   Requiere: Bootstrap 5.x
   Variables CSS: se heredan de theme.css si está cargado;
   los valores de fallback garantizan funcionamiento en login.
   ================================================================ */

/* ── Estructura base ──────────────────────────────────────────── */
.modal-content {
    background:              var(--color-surface, #fff);
    border:                  1px solid var(--color-border, #dee2e6);
    border-radius:           var(--radius-xl, 16px);
    box-shadow:              0 20px 60px rgba(0, 0, 0, .2);
    color:                   var(--color-text, #1a1a1a);
    font-family:             var(--font-body, 'Outfit', system-ui, sans-serif);
    font-weight:             400;
    line-height:             var(--line-height, 1.6);
    -webkit-font-smoothing:  antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Evitar que reglas globales de p (color gris de theme.css) pisen el modal */
.modal-content p { color: inherit; font-weight: inherit; line-height: inherit; }

.modal-header {
    background:    var(--color-surface-2, #f8f9fa);
    border-color:  var(--color-border, #dee2e6);
    border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
    padding:       var(--space-4, 1rem) var(--space-5, 1.25rem);
}

.modal-title {
    font-size:   var(--text-md, 1rem);
    font-weight: var(--font-weight-semibold, 600);
}

.modal-body { padding: var(--space-5, 1.25rem); }

.modal-footer {
    border-color: var(--color-border, #dee2e6);
    padding:      var(--space-4, 1rem) var(--space-5, 1.25rem);
    gap:          var(--space-3, 0.75rem);
}

/* ── Header de acción — gradiente primario ────────────────────── */
.modal-header-action {
    background:    linear-gradient(135deg, var(--color-primary, #0069A9) 0%, var(--color-primary-dark, #004F82) 100%);
    color:         #fff;
    border-radius: var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0;
    border:        none;
}

.modal-header-action .modal-title { color: #fff; }

/* Botón cerrar sobre cabecera oscura */
.modal-header-action .cerrar-modal {
    background:   rgba(255, 255, 255, .15);
    border-color: rgba(255, 255, 255, .3);
}
.modal-header-action .cerrar-modal::before,
.modal-header-action .cerrar-modal::after { background: #fff; }
.modal-header-action .cerrar-modal:hover  { background: rgba(255, 255, 255, .28); }

/* ── Botón de cierre estándar ─────────────────────────────────── */
.cerrar-modal {
    position:        relative;
    width:           28px;
    height:          28px;
    border-radius:   50%;
    background:      var(--color-surface-3, #e9ecef);
    border:          1px solid var(--color-border, #dee2e6);
    cursor:          pointer;
    display:         flex;
    align-items:     center;
    justify-content: center;
    transition:      background var(--ease-fast, .15s ease);
    flex-shrink:     0;
    padding:         0;
}

.cerrar-modal::before,
.cerrar-modal::after {
    content:       '';
    position:      absolute;
    width:         12px;
    height:        1.5px;
    background:    var(--color-text-muted, #6c757d);
    border-radius: 1px;
}
.cerrar-modal::before { transform: rotate(45deg); }
.cerrar-modal::after  { transform: rotate(-45deg); }
.cerrar-modal:hover   { background: var(--color-danger-bg, #fff5f5); }
.cerrar-modal:hover::before,
.cerrar-modal:hover::after { background: var(--color-danger, #dc3545); }

/* ── Tamaño intermedio (Bootstrap no define .modal-md) ────────── */
@media (min-width: 576px) {
    .modal-dialog.modal-md { --bs-modal-width: 600px; }
}

/* ── Overlay fijo (p.ej. términos con aceptación forzada) ──────────
   El overlay ocupa todo el viewport (inset:0) y descuenta las zonas
   seguras del dispositivo (notch, home indicator, barras por gestos)
   directamente en su padding. Con box-sizing:border-box, el contenido
   interno (.modal-content con max-height:100%) usa todo el alto
   disponible MENOS esas zonas seguras — así el footer y el check de
   aceptación siempre quedan visibles sin que el modal quede diminuto.
   Requiere: <meta name="viewport" content="... viewport-fit=cover">
   ─────────────────────────────────────────────────────────────── */
.modal-overlay {
    position:        fixed;
    inset:           0;
    z-index:         9999;
    isolation:       isolate;
    transform:       translateZ(0);
    display:         flex;
    align-items:     center;
    justify-content: center;
    background:      rgba(0, 0, 0, .7);
    backdrop-filter: blur(4px);
    box-sizing:      border-box;
    padding:         calc(1rem + env(safe-area-inset-top,    0px))
                     calc(1rem + env(safe-area-inset-right,  0px))
                     calc(1rem + env(safe-area-inset-bottom, 0px))
                     calc(1rem + env(safe-area-inset-left,   0px));
}

.modal-overlay .modal-content {
    width:          min(1140px, 100%);
    max-height:     100%;
    display:        flex;
    flex-direction: column;
}

.modal-overlay .modal-body {
    overflow-y: auto;
    flex:       1;
}

/* ── Texto legal (justificado, interlineado cómodo) ───────────── */
.modal-texto-legal {
    text-align:  justify;
    line-height: 1.8;
    font-size:   .9375rem;
}

.modal-texto-legal hr {
    height:2px;
	visibility:hidden;
	margin-bottom:-1px;
	height: 0px;
}

/* ── Casilla de aceptación (T&C forzados) ──────────────────────────
   Vive al final del cuerpo del modal (tras el texto), para que el
   usuario deba desplazarse hasta el final antes de poder aceptar. */
.tc-aceptacion {
    margin-top:    var(--space-4, 1rem);
    padding:       var(--space-3, 0.75rem) var(--space-4, 1rem);
    border:        1px solid var(--color-border, #dee2e6);
    border-radius: var(--radius-md, 8px);
    background:    var(--color-surface-2, #f8f9fa);
}

.tc-check-label {
    display:     flex;
    align-items: flex-start;
    gap:         0.6rem;
    margin:      0;
    cursor:      pointer;
    font-size:   .9375rem;
    line-height: 1.5;
    color:       var(--color-text, #1a1a1a);
}

.tc-check-input {
    flex-shrink:  0;
    width:        1.2rem;
    height:       1.2rem;
    margin-top:   0.1rem;
    cursor:       pointer;
    accent-color: var(--color-primary, #0069A9);
}

html.dark-mode .tc-aceptacion   { background: #111827; border-color: #374151; }
html.dark-mode .tc-check-label  { color: #e5e7eb; }

/* ── Botón flotante "ir al final" (T&C forzados) ───────────────────
   Mismo lenguaje visual que .scroll-top-btn del sitio. Flota en la
   esquina inferior del modal mientras el usuario no ha leído todo;
   al llegar al final se oculta y se revelan las acciones. */
.tc-scroll-hint {
    position:        absolute;
    bottom:          1rem;
    right:           1rem;
    z-index:         6;
    width:           44px;
    height:          44px;
    border:          none;
    border-radius:   50%;
    background:      var(--color-primary, #0069A9);
    color:           #fff;
    display:         flex;
    align-items:     center;
    justify-content: center;
    cursor:          pointer;
    font-size:       1rem;
    box-shadow:      0 6px 18px rgba(var(--color-primary-rgb), 0.45);
    animation:       tcBounce 1.5s ease-in-out infinite;
    transition:      opacity .25s ease, transform .2s ease, background var(--ease-fast, .15s ease);
}
.tc-scroll-hint:hover { background: var(--color-primary-dark, #004F82); }

.tc-hint-oculto {
    opacity:        0;
    pointer-events: none;
    transform:      translateY(8px) scale(.9);
    animation:      none;
}

@keyframes tcBounce {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(6px); }
}

/* Footer reservado: ocupa su espacio desde el inicio pero invisible, para
   que revelarlo no encoja el cuerpo ni tape la casilla (clave en iOS). */
.tc-footer-oculto {
    visibility:     hidden;
    opacity:        0;
    pointer-events: none;
}

/* Revelado de las acciones (footer) al terminar de leer */
@keyframes tcRevelar {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}
.tc-acciones-revelar { animation: tcRevelar .4s ease both; }

/* Pulso para destacar la casilla de aceptación al llegar al final */
@keyframes tcPulse {
    0%   { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), .45); }
    70%  { box-shadow: 0 0 0 12px rgba(var(--color-primary-rgb), 0); }
    100% { box-shadow: 0 0 0 0 rgba(var(--color-primary-rgb), 0); }
}
.tc-aceptacion-resaltar {
    border-color: var(--color-primary, #0069A9);
    animation:    tcPulse 1.2s ease-out 2;
}

@media (prefers-reduced-motion: reduce) {
    .tc-scroll-hint,
    .tc-acciones-revelar,
    .tc-aceptacion-resaltar { animation: none; }
}

#sesion-aviso-overlay .modal-content {
    width: min(500px, 100%);
}

#sesion-aviso-overlay .modal-header {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
}

#sesion-aviso-overlay .modal-title {
    font-size: var(--text-md, 1rem);
}

#sesion-aviso-overlay .modal-body {
    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
    font-size: var(--text-md, 1rem);
}

#sesion-aviso-overlay .modal-footer {
    gap:     var(--space-2, 0.5rem);
    padding: var(--space-2, 0.5rem) var(--space-4, 1rem) var(--space-3, 0.75rem);
}

#sesion-aviso-overlay .modal-footer .btn {
    font-size: var(--text-md, 1rem);
}

#sesion-aviso-contador {
    color:               var(--color-primary, #0069A9);
    font-weight:         var(--font-weight-semibold, 600);
    font-variant-numeric: tabular-nums;
    font-size:           var(--text-md, 1rem);
}

html.dark-mode #sesion-aviso-contador { color: #82c8ff; }

/* ── Dark mode ────────────────────────────────────────────────── */
html.dark-mode .modal-content { background: #1f2937; color: #e5e7eb; border-color: #374151; }
html.dark-mode .modal-header  { background: #111827; border-color: #374151; }
html.dark-mode .modal-footer  { border-color: #374151; }

/* Tarjetas dentro de modales en dark mode */
html.dark-mode .modal-content .card         { background: #2d3748; border-color: #4a5568; color: #e5e7eb; }
html.dark-mode .modal-content .card-title,
html.dark-mode .modal-content .card-text    { color: #f3f4f6; }

/* ── Responsive — móvil (<576px) ──────────────────────────────── */
@media (max-width: 575.98px) {

    .modal-dialog {
        margin:     0.5rem auto;
        max-width:  calc(100vw - 1rem);
        min-height: auto;
    }

    .modal-dialog-centered {
        /* 100% = altura del contenido de .modal (ya descontó footer + safe-area) */
        min-height: calc(100% - 1rem);
        align-items: flex-end;
    }

    .modal-content {
        border-radius:  var(--radius-xl, 16px) var(--radius-xl, 16px) 0 0 !important;
        max-height:     65vh;
        display:        flex;
        flex-direction: column;
    }

    .modal-overlay {
        align-items: center;
        padding:     calc(0.5rem + env(safe-area-inset-top,    0px))
                     calc(0.5rem + env(safe-area-inset-right,  0px))
                     calc(0.5rem + env(safe-area-inset-bottom, 0px))
                     calc(0.5rem + env(safe-area-inset-left,   0px));
    }

    /* Usa todo el alto disponible (overlay ya descontó zonas seguras) */
    .modal-overlay .modal-content {
        max-height: 100%;
    }

    .modal-header { padding: var(--space-4, 1rem);                         flex-shrink: 0; }
    .modal-footer { padding: var(--space-3, 0.75rem) var(--space-4, 1rem); flex-shrink: 0; }

    .modal-body {
        overflow-y: auto;
        flex:       1;
        padding:    var(--space-4, 1rem);
        -webkit-overflow-scrolling: touch;
    }

    .modal-body iframe,
    .modal-body #iframeColilla {
        height:     60vh !important;
        min-height: 300px;
        width:      100% !important;
    }

    .qr-container { padding: var(--space-3, 0.75rem) var(--space-2, 0.5rem); }
    .qr-container #qr-container canvas,
    .qr-container #qr-container svg,
    .qr-container #qr-container img {
        max-width:  220px !important;
        max-height: 220px !important;
        width:      100% !important;
        height:     auto !important;
    }

    .modal-footer.d-flex.justify-content-between {
        flex-direction: column;
        gap:            var(--space-2, 0.5rem);
    }
    .modal-footer.d-flex.justify-content-between .btn {
        width:           100%;
        justify-content: center;
    }

    #sesion-aviso-overlay .modal-content {
        width: min(92vw, 420px);
    }

    #sesion-aviso-overlay .modal-header {
        padding: var(--space-4, 1rem) var(--space-5, 1.25rem);
    }

    #sesion-aviso-overlay .modal-title {
        font-size: var(--text-lg, 1.125rem);
    }

    #sesion-aviso-overlay .modal-body {
        padding:   var(--space-4, 1rem) var(--space-5, 1.25rem);
        font-size: var(--text-md, 1rem);
    }

    #sesion-aviso-overlay .modal-footer {
        gap:     var(--space-3, 0.75rem);
        padding: var(--space-3, 0.75rem) var(--space-5, 1.25rem) var(--space-4, 1rem);
    }

    #sesion-aviso-overlay .modal-footer .btn {
        font-size: var(--text-md, 1rem);
        padding:   0.6rem 1rem;
    }

    #sesion-aviso-contador {
        font-size: var(--text-lg, 1.125rem);
    }
}

/* ── Responsive — tablet (576–767px) ─────────────────────────── */
@media (min-width: 576px) and (max-width: 767.98px) {
    .modal-dialog  { margin: 1rem auto; }
    .modal-content { max-height: 72vh; display: flex; flex-direction: column; }
    .modal-body    { overflow-y: auto; flex: 1; }

    .modal-body iframe,
    .modal-body #iframeColilla { height: 48vh !important; }
}

/* ── Responsive — desktop (≥768px) ───────────────────────────── */
@media (min-width: 768px) {
    .modal-content { max-height: 78vh; display: flex; flex-direction: column; }
    .modal-body    { overflow-y: auto; flex: 1; }

    .modal-body #iframeColilla {
        height:     62vh !important;
        min-height: 400px;
    }
    .modal-lg { max-width: min(800px, 92vw); }
}


/* ── Modal: altura dinámica con zonas seguras del dispositivo ──────
   Cascada de altura (el navegador usa la última que entiende):
     100%    → fallback genérico
     100vh   → viewport clásico (no descuenta UI del navegador)
     100svh  → small viewport: el más conservador en iOS/Android
     100dvh  → dynamic viewport: se ajusta cuando aparece el teclado
   env(safe-area-inset-*): descuenta notch, home indicator y barra de
   navegación por gestos — garantiza que el footer del modal siempre
   quede visible y no tape la zona segura inferior.
   Requiere: <meta name="viewport" content="... viewport-fit=cover">
   ─────────────────────────────────────────────────────────────── */
.modal {
    height: 100%;
    height: 100vh;
    height: 100svh;
    height: 100dvh;

    padding-top:    env(safe-area-inset-top,    0px);
    /* 42px = altura del footer fijo; se suma la safe-area inferior del iPhone */
    padding-bottom: calc(42px + env(safe-area-inset-bottom, 0px));
    padding-left:   env(safe-area-inset-left,   0px);
    padding-right:  env(safe-area-inset-right,  0px);
    box-sizing:     border-box;
}