/* ============================================================
   turnos_modales.css — Modales del portal de turnos HPM
   Solo estilos de modales; no afecta el layout del portal.
   Imágenes desde: /admin/pacientes/imagenes/
   ============================================================ */

/* ── Variables locales (heredan de styles.css si existen) ──────────────── */
:root {
    --hpm-primary:   #232B60;
    --hpm-yellow:    #FED304;
    --hpm-orange:    #F9A51B;
    --hpm-radius:    18px;
    --hpm-radius-sm: 999px;
    --hpm-shadow:    0 8px 32px rgba(0,0,0,.28);
}

/* ── Modal base ────────────────────────────────────────────────────────── */
.hpm-modal {
    border:        none;
    border-radius: var(--hpm-radius);
    overflow:      hidden;
    background:    transparent !important;
    box-shadow:    var(--hpm-shadow);
}

/* ── Cabecera ──────────────────────────────────────────────────────────── */
.hpm-modal-header {
    background:    var(--c-primary, var(--hpm-primary));
    color:         #fff;
    padding:       .75rem 1.2rem;
    border-bottom: 3px solid var(--c-yellow, var(--hpm-yellow));
}

.hpm-modal-title {
    font-weight:    800;
    letter-spacing: .02em;
    font-size:      1rem;
}

/* Botón de cerrar (X) en la cabecera */
.hpm-modal-header .btn-close {
    filter: invert(1) brightness(2);
    opacity: .8;
}
.hpm-modal-header .btn-close:hover { opacity: 1; }

/* ── Cuerpo con imagen de fondo ────────────────────────────────────────── */
.hpm-modal-body {
    position:            relative;
    background-image:    url("/admin/pacientes/imagenes/imag_body.jpg");
    background-size:     cover;
    background-position: center;
    padding:             0;
    min-height:          220px;
}

/* Velo para legibilidad */
.hpm-modal-overlay {
    position:       absolute;
    inset:          0;
    background:     rgba(255,255,255,.30);
    pointer-events: none;
    z-index:        1;
}

/* Todo el contenido del body por encima del overlay */
.hpm-modal-body .position-relative,
.hpm-modal-body form,
.hpm-modal-body .p-3,
.hpm-modal-body .p-4 {
    position: relative;
    z-index:  2;
}

/* ── Labels e inputs ───────────────────────────────────────────────────── */
.hpm-label {
    font-weight:    800;
    color:          #0b1b2a;
    font-size:      .85rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom:  4px;
    display:        block;
}

.hpm-input {
    border-radius: var(--hpm-radius-sm);
    border:        2px solid rgba(35,43,96,.2);
    background:    rgba(255,255,255,.96);
    color:         #111;
    padding:       .55rem 1.1rem;
    width:         100%;
    font-size:     .95rem;
    transition:    border-color .2s, box-shadow .2s;
}

.hpm-input:focus {
    outline:      none;
    box-shadow:   0 0 0 3px rgba(35,43,96,.18);
    border-color: rgba(35,43,96,.5);
    background:   #fff;
}

.hpm-input::placeholder { color: #888; }

/* ── Select ────────────────────────────────────────────────────────────── */
select.hpm-input {
    appearance:        none;
    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 1l5 5 5-5' stroke='%23232B60' stroke-width='2' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 1rem center;
    padding-right:     2.5rem;
}

/* ── Checkbox de privacidad ────────────────────────────────────────────── */
.hpm-check-wrap {
    display:     flex;
    align-items: flex-start;
    gap:         .6rem;
    font-size:   .88rem;
    color:       #0b1b2a;
    font-weight: 500;
}

.hpm-check-wrap input[type="checkbox"] {
    width:         18px;
    height:        18px;
    min-width:     18px;
    cursor:        pointer;
    border:        2px solid var(--hpm-primary);
    border-radius: 4px;
    accent-color:  var(--hpm-primary);
    margin-top:    2px;
}

/* ── Botones ───────────────────────────────────────────────────────────── */
.hpm-btn-cerrar {
    background:    #6b7280;
    color:         #fff;
    border:        none;
    border-radius: var(--hpm-radius-sm);
    padding:       .55rem 1.4rem;
    font-weight:   700;
    font-size:     .88rem;
    cursor:        pointer;
    transition:    background .2s;
}
.hpm-btn-cerrar:hover { background: #4b5563; color: #fff; }

.hpm-btn-guardar {
    background:    var(--c-orange, var(--hpm-orange));
    color:         #fff;
    border:        none;
    border-radius: var(--hpm-radius-sm);
    padding:       .55rem 1.4rem;
    font-weight:   800;
    font-size:     .88rem;
    cursor:        pointer;
    transition:    filter .2s, transform .15s;
}
.hpm-btn-guardar:hover  { filter: brightness(1.08); color: #fff; transform: translateY(-1px); }
.hpm-btn-guardar:active { transform: none; }

.hpm-btn-guardar:disabled {
    opacity: .55;
    cursor:  not-allowed;
    pointer-events: none;
}

/* ── Pie del modal ─────────────────────────────────────────────────────── */
.hpm-modal-footer {
    background:  rgba(35,43,96,.08);
    border-top:  2px solid rgba(35,43,96,.12);
    padding:     .75rem 1.2rem;
    display:     flex;
    justify-content: flex-end;
    gap:         .6rem;
}

/* ── Estado: cargando dentro del modal ────────────────────────────────── */
.hpm-modal-loading {
    display:         flex;
    align-items:     center;
    justify-content: center;
    min-height:      140px;
    color:           var(--hpm-primary);
    font-weight:     600;
    gap:             .6rem;
}

/* ── Alertas dentro del modal ──────────────────────────────────────────── */
.hpm-modal-body .alert {
    border-radius: 12px;
    font-weight:   500;
}

/* ── Animación de entrada ──────────────────────────────────────────────── */
.modal.fade .hpm-modal {
    transform:  translateY(-18px) scale(.97);
    transition: transform .25s ease, opacity .25s ease;
}
.modal.show .hpm-modal {
    transform: translateY(0) scale(1);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 576px) {
    .hpm-modal-header  { padding: .6rem 1rem; }
    .hpm-modal-footer  { flex-direction: column-reverse; }
    .hpm-btn-cerrar,
    .hpm-btn-guardar   { width: 100%; text-align: center; }
}