/* Notificaciones.css - Estilo Retro de AdriX OS */

#notifications-area {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 999999;
    pointer-events: none;
}

.notification-toast {
    background: #f0f0f0;
    border-radius: 20px;
    box-shadow: 0 10px 40px rgba(0,0,0,0.5);
    width: 380px; /* Reducido de 450px */
    pointer-events: auto;
    position: relative;
    overflow: hidden;
    animation: dialog-pop 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
    display: flex;
    flex-direction: column;
    border: 1px solid #777;
}

.notification-header {
    background: linear-gradient(to bottom, #f2f2f2 0%, #bcbcbc 100%);
    height: 35px;
    display: flex;
    align-items: center;
    padding: 0 5px 0 15px;
    border-bottom: 1px solid #888;
    justify-content: space-between;
}

.notification-header-title {
    font-size: 14px;
    color: #555;
    font-family: sans-serif;
}

/* Usar el grupo de controles global */
.notification-header .window-controls-group {
    display: flex;
    gap: 2px;
    height: auto;
    align-items: center;
}

.notification-header .win-btn {
    width: 26px;
    height: 18px;
    font-size: 10px;
    padding: 0;
}

.notification-header .win-btn.close {
    width: 32px;
}

.win-btn.help {
    background: linear-gradient(to bottom, #ababab 0%, #808080 100%);
    color: white;
    font-weight: bold;
    font-size: 12px;
}

.notification-body {
    padding: 20px 25px; /* Reducido de 30px */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 12px;
}

.notification-title {
    font-size: 18px; /* Reducido de 22px */
    font-weight: 800;
    color: #000;
}

.notification-message {
    font-size: 15px; /* Reducido de 18px */
    color: #000;
    margin-bottom: 5px;
}

.notification-btn-container {
    padding-bottom: 25px;
    display: flex;
    justify-content: center;
}

.notification-action-btn {
    background: linear-gradient(to bottom, #ffffff 0%, #e0e0e0 100%);
    border: 1px solid #999;
    color: #333;
    padding: 6px 25px; /* Reducido */
    border-radius: 3px;
    font-weight: bold;
    font-size: 12px; /* Reducido de 14px */
    cursor: pointer;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
    font-family: 'Segoe UI', Tahoma, sans-serif;
    min-width: 140px; /* Reducido de 160px */
    transition: background 0.2s;
}

.notification-action-btn:hover {
    background: #f8f8f8;
    border-color: #666;
}

.notification-action-btn:active {
    box-shadow: inset 1px 1px 3px rgba(0, 0, 0, 0.1);
}

/* Indicador LIVE en Taskbar */
.taskbar-live-indicator {
    background: #FF4B2B;
    background: linear-gradient(to right, #FF4B2B, #FF416C);
    color: white;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 10px;
    font-weight: bold;
    margin-right: 10px;
    height: 18px;
    display: none; /* Se activa por JS */
    align-items: center;
    box-shadow: 0 0 10px rgba(255, 65, 108, 0.5);
    animation: pulse-live 2s infinite;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.3);
}

@keyframes pulse-live {
    0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 65, 108, 0.7); }
    70% { transform: scale(1.05); box-shadow: 0 0 0 10px rgba(255, 65, 108, 0); }
    100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(255, 65, 108, 0); }
}

@keyframes dialog-pop {
    from { transform: translate(-50%, -50%) scale(0.7); opacity: 0; }
    to { transform: translate(-50%, -50%) scale(1); opacity: 1; }
}

.fade-out {
    animation: dialog-fade-out 0.2s forwards ease-in;
}

@keyframes dialog-fade-out {
    to { transform: scale(0.9); opacity: 0; }
}