/* COLORES DE LAS NOTIFICACIONES (regla: el color representa la SITUACIÓN notificada, igual en la campanita, el listado y el aviso
   emergente; la prioridad NO es un color, se muestra con la etiqueta "Importante"). El tipo → color se define UNA vez en
   HelperNotifications::TYPES (PHP) y llega al navegador como `color` (clase notifColor-<color>). Los de turnos coinciden con el color
   del estado del turno (Confirmado #2ca87f, Cancelado #dc2626); "En sala de espera" usa violeta, que no usa ningún estado de turno. */
.notifColor-primary {
    --notif-color: #4680ff;
    --notif-color-rgb: 70, 128, 255;
}

.notifColor-success {
    --notif-color: #2ca87f;
    --notif-color-rgb: 44, 168, 127;
}

.notifColor-danger {
    --notif-color: #dc2626;
    --notif-color-rgb: 220, 38, 38;
}

.notifColor-waiting {
    --notif-color: #7c3aed;
    --notif-color-rgb: 124, 58, 237;
}

/* Cambios en la agenda hechos por otra persona (turno nuevo, reprogramado, eliminado): colores que no usa ningún estado de turno. */
.notifColor-teal {
    --notif-color: #0d9488;
    --notif-color-rgb: 13, 148, 136;
}

.notifColor-pink {
    --notif-color: #db2777;
    --notif-color-rgb: 219, 39, 119;
}

.notifColor-slate {
    --notif-color: #475569;
    --notif-color-rgb: 71, 85, 105;
}

.notifIcon {
    color: var(--notif-color);
}

.notifImportant {
    font-size: 0.68rem;
    font-weight: 600;
}

/* Campanita 100% responsive: el template fija `.pc-header .dropdown-notification { min-width: 450px }`, que en un celular desborda
   la pantalla. Acá: hasta 450px y nunca más ancho que la pantalla menos 30px (en celulares el template ya lo ubica a 15px de cada
   borde). La lista tiene scroll interno con un alto que usa la altura VISIBLE (dvh descuenta la barra del navegador del celular). */
#notificationsDropdown .dropdown-notification {
    min-width: 0;
    width: 450px;
    max-width: calc(100vw - 30px);
}

.notificationsDropdownBody {
    max-height: calc(100vh - 215px);
    max-height: min(480px, calc(100dvh - 215px));
    min-height: 120px;
    overflow-y: auto;
}

@media (max-width: 575.98px) {
    #notificationsDropdown .dropdown-notification .dropdown-header,
    #notificationsDropdown .dropdown-notification .dropdown-body {
        padding: 12px;
    }

    .notificationsDropdownBody {
        max-height: calc(100vh - 260px);
        max-height: calc(100dvh - 260px);
    }

    .notificationsDropdownFooter > a {
        flex: 1 1 100%;
    }
}

.notificationItem {
    cursor: pointer;
    border-left: 4px solid transparent;
    transition: background-color 0.15s ease;
}

.notificationItem:hover {
    background-color: rgba(70, 128, 255, 0.06);
}

.notificationItem.notificationUnread {
    border-left-color: var(--notif-color, #4680ff);
    background-color: rgba(var(--notif-color-rgb, 70, 128, 255), 0.05);
}

.notificationItem .notifIcon {
    font-size: 1.1rem;
}

.notificationItem .notificationContent {
    min-width: 0;
}

.notificationItem .notificationTitle {
    min-width: 0;
    font-size: 0.9rem;
    word-break: break-word;
}

.notificationItem .notificationMessage {
    font-size: 0.82rem;
    word-break: break-word;
}

.notificationItem .notificationDate {
    font-size: 0.72rem;
    white-space: nowrap;
}

/* Aviso "Paciente en sala de espera" (médico): fijo abajo a la derecha, por encima de todo, hasta que se confirma.
   El contenedor tiene padding para que la sombra de los avisos no quede recortada por su overflow (scroll si hay muchos),
   y los avisos se separan con gap (sin márgenes). Una sola sombra (se anula la de .card del template) y la franja de color
   se dibuja con ::before para no deformar el borde redondeado. */
.arrivalNotices {
    position: fixed;
    right: 0;
    bottom: 0;
    z-index: 2000;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    width: calc(360px + 2rem);
    max-width: 100vw;
    max-height: 60vh;
    overflow-y: auto;
    padding: 1rem;
    pointer-events: none;
}

.arrivalNotices:empty {
    display: none;
}

/* .arrivalNoticesMore = tarjeta "+N pacientes más en sala de espera" (con muchos avisos se muestran completos solo 3). */
.arrivalNotice,
.arrivalNoticesMore {
    pointer-events: auto;
    flex-shrink: 0;
    overflow: hidden;
    margin-bottom: 0;
    border: 1px solid rgba(var(--notif-color-rgb), 0.35);
    box-shadow: 0 0.5rem 1.25rem rgba(27, 46, 94, 0.16);
    transform-origin: bottom right;
    animation: arrivalNoticeIn 0.35s ease-out, arrivalNoticePulse 2s ease-in-out 0.35s 3;
}

.arrivalNotice::before,
.arrivalNoticesMore::before {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 6px;
    background-color: var(--notif-color);
}

.arrivalNoticeIcon {
    font-size: 1.6rem;
    color: var(--notif-color);
}

.arrivalNoticeTitle {
    font-size: 1.05rem;
}

/* Entrada sin desplazamiento (solo escala hacia adentro + fundido): un translateY hacía que el aviso sobresaliera del contenedor
   (que tiene scroll) y se veía un instante la barra de desplazamiento. */
@keyframes arrivalNoticeIn {
    from {
        opacity: 0;
        transform: scale(0.96);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

@keyframes arrivalNoticePulse {
    0%, 100% {
        box-shadow: 0 0.5rem 1.25rem rgba(27, 46, 94, 0.16);
    }
    50% {
        box-shadow: 0 0.5rem 1.25rem rgba(27, 46, 94, 0.16), 0 0 0 5px rgba(var(--notif-color-rgb), 0.3);
    }
}

@media (max-width: 575.98px) {
    .arrivalNotices {
        left: 0;
        width: auto;
        max-height: 50vh;
        max-height: 50dvh;
        padding: 0.5rem;
    }
}